/* STEM LM — the intro (js/hero.js) and the onboarding page it breaks open onto (js/start.js).
   The intro is its own scroller: a tall track with a sticky full-screen stage, three layers deep
   (the sky behind the gem, the gem, the clouds in front of it) and the words on top. The intro is
   the one page in colour: the sky (fx/sky.js) and the gem; its words and buttons stay black and
   white like the rest of the site. */

/* ---------- intro ---------- */
.hero {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #eadfd6;
  outline: none;
  transition: opacity 0.8s var(--ease);
}
.hero::-webkit-scrollbar {
  display: none;
}
.hero.is-out {
  opacity: 0;
  pointer-events: none;
}
/* The scroll length sets the pace of the dive: one screen of scrolling per chapter or so. */
.hero-track {
  height: 760vh;
  height: 760svh;
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.hero-sky,
.hero-gem,
.gate-dust {
  position: absolute;
  inset: 0;
}
.hero-sky {
  pointer-events: none;
}
.hero-gem {
  will-change: transform;
}
.gate-dust {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Without WebGL: a plain sky, the words still tell the story. */
.hero.is-flat .hero-stage {
  background: linear-gradient(#9eb9d4, #f6e9df 60%, #7d9a8a);
}

.hero-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
}
.hero-ui a,
.hero-ui button {
  pointer-events: auto;
}
.hero-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(16, 16, 16, 0.12);
}
.hero-progress i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.gate-logo {
  position: absolute;
  top: var(--g);
  left: var(--g);
}
.gate-skip {
  position: absolute;
  top: var(--g);
  right: var(--g);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* The words sit over a moving sky: black with a white bloom up in the clouds, white with a dark
   bloom down over the Earth, where the tagline lands. */
.hero-line,
.hero-tagline,
.hero-cue,
.hero-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.9),
    0 0 42px rgba(255, 255, 255, 0.7);
}
.hero-line {
  top: 66%;
  width: min(90vw, 760px);
  font: 500 var(--fs-statement) / 1 var(--display);
  letter-spacing: -0.035em;
}
.hero-tagline {
  top: 74%;
  width: min(94vw, 1400px);
  margin: 0;
  font: 600 clamp(30px, 4.6vw, 96px) / 0.98 var(--display);
  letter-spacing: -0.045em;
  color: #fff;
  opacity: 0;
}
/* Two lines, so a long subject never reflows the sentence: "STEM LM replaces your" / "___ teacher". */
.hero-tagline > span:first-child {
  display: block;
}
.hero-tagline,
.hero-hint {
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(0, 0, 0, 0.4);
}
/* The ___ in "replaces your ___ teacher": the subject keeps changing over a solid rule. */
.hero-word {
  display: inline-flex;
  justify-content: center;
  padding: 0 0.08em 0.04em;
  box-shadow: inset 0 -0.07em 0 currentColor;
  vertical-align: bottom;
  white-space: nowrap;
}
.hero-word .text-rotate {
  flex-wrap: nowrap;
}
.hero-cue {
  bottom: calc(var(--g) + 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-mouse {
  position: relative;
  width: 20px;
  height: 31px;
  border: 1.5px solid currentColor;
  border-radius: 11px;
}
.hero-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: currentColor;
  animation: hero-wheel 1.8s var(--ease) infinite;
}
@keyframes hero-wheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(9px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
.hero-hint {
  top: calc(74% + clamp(76px, 10.4vw, 214px));
  color: #fff;
  opacity: 0;
}
/* Over the gem once it sits in the middle: click it to break it straight away. */
.hero-break {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36vh, 40vw);
  height: min(48vh, 54vw);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.hero-break:focus-visible {
  outline: 1px dashed var(--ink);
}
.hero.is-broken .hero-ui > :not(.hero-progress) {
  opacity: 0 !important;
  transition: opacity 0.3s;
}

/* ---------- onboarding (#start) ---------- */
body[data-view="start"] .site-header {
  display: none;
}
.start-view {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
/* The sky the intro ended in, still, washed out behind the page. */
.start-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.start-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(232, 232, 232, 0.92) 0%, rgba(232, 232, 232, 0.6) 55%, rgba(232, 232, 232, 0.35) 100%);
}
.start-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--g);
}
.start-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center;
  gap: clamp(28px, 4vw, 90px);
  padding: clamp(20px, 3vw, 60px) var(--g) clamp(40px, 5vw, 90px);
}
.start-intro .mono {
  margin-bottom: clamp(14px, 1.4vw, 24px);
}
.start-intro .display {
  max-width: 11ch;
}
.start-sub {
  max-width: 34em;
  margin-top: clamp(18px, 2vw, 36px);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.start-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.start-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 32px);
}
.start-step + .start-step {
  border-top: 1px dotted var(--rule);
}
.start-step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 500 var(--fs-h3) / 1 var(--display);
  letter-spacing: -0.03em;
}
.start-step-head strong {
  font-weight: 500;
}
.start-check {
  display: none;
  margin-left: auto;
  align-self: center;
}
.start-step.is-done .start-check {
  display: block;
}
.start-sign-btn {
  width: 100%;
  justify-content: flex-start;
}
.start-signed-out {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.start-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.start-who img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}
.start-who > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.start-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.start-input {
  width: 100%;
  padding: 6px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font: 500 clamp(22px, 2vw, 34px) / 1.1 var(--display);
  letter-spacing: -0.03em;
  outline: none;
}
.start-input::placeholder {
  color: var(--faint);
}
.start-input:focus {
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
.start-drop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--rule);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.start-drop.is-over {
  border-style: solid;
  border-color: var(--ink);
  background: var(--soft);
}
.start-drop-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.start-drop-text strong {
  font-weight: 500;
}
.start-files {
  margin: 0;
  padding: 0;
  list-style: none;
}
.start-files:empty {
  display: none;
}
.start-file {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dotted var(--rule);
}
.start-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.start-file.is-uploading .start-file-detail {
  animation: start-pulse 1.2s ease-in-out infinite;
}
.start-file.is-error .start-file-detail {
  text-decoration: underline;
}
@keyframes start-pulse {
  50% {
    opacity: 0.35;
  }
}
.start-file-remove {
  width: 28px;
  height: 28px;
  font-size: 18px;
}
.start-paste summary {
  cursor: pointer;
  list-style: none;
}
.start-paste summary::-webkit-details-marker {
  display: none;
}
.start-paste summary::before {
  content: "+ ";
}
.start-paste[open] summary::before {
  content: "− ";
}
.start-paste textarea {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-2);
  font: 400 15px / 1.5 var(--display);
  resize: vertical;
  outline: none;
}
.start-paste textarea:focus {
  border-color: var(--ink);
}
.start-error {
  padding: 10px 12px;
  background: var(--ink);
  color: #fff;
  font: 400 var(--fs-mono) / 1.35 var(--mono);
  letter-spacing: -0.03em;
}
.start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
#start-form.is-locked .start-field,
#start-form.is-locked .start-drop {
  opacity: 0.45;
}
.start-note:empty {
  display: none;
}

@media (max-width: 900px) {
  .start-body {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .start-intro .display {
    max-width: none;
  }
  .start-card {
    box-shadow: 6px 6px 0 var(--ink);
  }
}
@media (max-width: 520px) {
  .gate-skip,
  .start-skip {
    min-width: 0;
  }
  .hero-line {
    top: 64%;
  }
  .hero-tagline {
    top: 70%;
  }
  .hero-hint {
    top: calc(70% + 120px);
  }
  .start-drop {
    grid-template-columns: auto 1fr;
  }
  .start-drop .button {
    grid-column: 1 / -1;
  }
}

/* Sound on / off for the intro and onboarding ambience (js/ambience.js). The bars move while the
   sound plays, lie flat when it is off, and pulse while waiting for the first click. */
.sound-toggle {
  min-width: 0;
  gap: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gate-sound {
  position: absolute;
  top: var(--g);
  right: calc(var(--g) + clamp(140px, 10.6vw, 210px) + 10px);
}
.start-top-actions {
  display: flex;
  gap: 10px;
}
.sound-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.sound-bars i {
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  animation: sound-bar 1.1s ease-in-out infinite;
}
.sound-bars i:nth-child(2) {
  animation-delay: -0.35s;
}
.sound-bars i:nth-child(3) {
  animation-delay: -0.7s;
}
.sound-bars i:nth-child(4) {
  animation-delay: -0.2s;
}
.sound-toggle.is-off .sound-bars i {
  animation: none;
  transform: scaleY(0.18);
}
.sound-toggle.is-waiting .sound-bars i {
  animation: sound-wait 1.6s ease-in-out infinite;
}
@keyframes sound-bar {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes sound-wait {
  0%,
  100% {
    transform: scaleY(0.18);
    opacity: 0.4;
  }
  50% {
    transform: scaleY(0.5);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sound-bars i,
  .sound-toggle.is-waiting .sound-bars i {
    animation: none;
    transform: scaleY(0.6);
  }
}
@media (max-width: 700px) {
  .sound-toggle .sound-label {
    display: none;
  }
  .gate-sound {
    right: auto;
    left: calc(var(--g) + 66px);
  }
}