@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

:root{
  --p: 0;    /* 0 = hands together, 1 = hands fully apart   (scroll progress) */
  --tp: 0;   /* title reveal progress, derived from --p     */
  --sp: 0;   /* spark glow intensity, derived from --p       */

  --ink: #14141a;
  --muted: rgba(20,20,26,.6);
  --line: rgba(20,20,26,.12);
  --accent: #2f6fd6;
  --accent-2: #7a4fd6;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:auto; }

body{
  font-family:'Inter', system-ui, sans-serif;
  background:#ffffff;
  color:var(--ink);
  overflow-x:hidden;
}

/* ================= PAGE 0 : MENU (game-style, sword background) ================= */

.menu-page{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#05070a;
  cursor:default;
}

.menu-page__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.menu-page__scrim-1{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}

.menu-page__scrim-2{
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.85), rgba(0,0,0,.35) 55%, transparent);
}

.menu-page nav{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding-left:2.5rem;
}

@media (min-width:768px){
  .menu-page nav{ padding-left:5rem; gap:.5rem; }
}

.brush-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  width:fit-content;
  background:none;
  border:none;
  padding:.5rem 2rem .5rem .25rem;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}

@media (min-width:768px){
  .brush-btn{ padding:.625rem 2.5rem .625rem .25rem; }
}

.brush-btn__swoosh{
  position:absolute;
  inset:0;
  z-index:-1;
  color:#fff;
  transform:scaleX(0);
  transform-origin:0% 50%;
  opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}

.brush-btn__swoosh svg{ width:100%; height:100%; display:block; }

.brush-btn:hover .brush-btn__swoosh,
.brush-btn:focus-visible .brush-btn__swoosh,
.brush-btn.is-active .brush-btn__swoosh{
  transform:scaleX(1);
  opacity:1;
}

.brush-btn__label{
  position:relative;
  font-family:'Cinzel', serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.1rem;
  color:#c9cdd4;
  transition:color .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), letter-spacing .4s cubic-bezier(.16,1,.3,1);
}

@media (min-width:768px){
  .brush-btn__label{ font-size:1.5rem; }
}

.brush-btn:hover .brush-btn__label,
.brush-btn:focus-visible .brush-btn__label,
.brush-btn.is-active .brush-btn__label{
  color:#0a0a0c;
  transform:translateX(5px);
  letter-spacing:.04em;
}

/* small hint that fades in after 2s, telling you to keep going down */
.menu-page__hint{
  position:absolute;
  left:50%;
  bottom:clamp(1.5rem, 4vh, 3rem);
  transform:translateX(-50%);
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(201,205,212,.55);
  white-space:nowrap;
  opacity:0;
  animation:hintIn .9s ease 2s forwards, hintPulse 2.8s ease-in-out 2.9s infinite;
}

@keyframes hintIn{
  from{ opacity:0; transform:translate(-50%, 8px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}

@keyframes hintPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.45; }
}

/* ================= HERO / PAGE 1 : TWO HANDS (white background) ================= */

.hero{
  position:relative;
  height:100vh;
}

.hero__pin{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:pointer;
  outline:none;
}

/* ---- background: plain white ---- */

.bg{
  position:absolute;
  inset:0;
  background:#ffffff;
}

.grain{ display:none; }

/* soft glow that pulses right where the fingertips meet */
.spark{
  position:absolute;
  left:48%;
  top:41%;
  width:min(46vw, 620px);
  height:min(46vw, 620px);
  transform:translate(-50%,-50%) scale(calc(.7 + var(--sp)*.5));
  background:radial-gradient(circle, rgba(47,111,214,.14) 0%, rgba(122,79,214,.08) 32%, transparent 70%);
  opacity:var(--sp);
  filter:blur(6px);
  pointer-events:none;
}

/* ---- the two hands ---- */

.hands{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* fades anything that pokes near the frame's own top edge, so the viewport
     never clips a hand with a hard line, regardless of the source image */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 10%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 10%);
}

.hand{
  position:absolute;
  height:clamp(440px, 76vh, 940px);
  width:auto;
  will-change:transform;
  transition:filter .3s ease;
}

/* robot-hand-v2.png: fingertip sits ~(87%, 11%) of its own frame */
.hand--robot{
  left:47%;
  top:42%;
  filter:drop-shadow(0 calc(6px + var(--p)*14px) 22px rgba(20,20,26,.22));
  transform:
    translate(-87%, -11%)
    translate(calc(var(--p) * -40vw), calc(var(--p) * 8vh))
    rotate(calc(var(--p) * -10deg));
}

/* human-hand-v2.png: fingertip sits ~(15%, 84%) of its own frame */
.hand--human{
  left:50%;
  top:40%;
  filter:drop-shadow(0 calc(6px + var(--p)*14px) 22px rgba(20,20,26,.2));
  transform:
    translate(-15%, -84%)
    translate(calc(var(--p) * 40vw), calc(var(--p) * -8vh))
    rotate(calc(var(--p) * 10deg));
  -webkit-mask-image:linear-gradient(to bottom left, transparent 0%, black 40%);
  mask-image:linear-gradient(to bottom left, transparent 0%, black 40%);
}

/* ---- middle text ---- */

.content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1.5rem;
  pointer-events:none;
  opacity:var(--tp);
  transform:translateY(calc((1 - var(--tp)) * 26px)) scale(calc(.94 + var(--tp) * .06));
}

.content__kicker{
  font-size:.75rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1rem;
}

.content__title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.4rem, 7vw, 5.5rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--ink);
}

.content__sub{
  margin-top:1.1rem;
  font-size:clamp(.95rem, 1.6vw, 1.15rem);
  color:var(--muted);
  max-width:32ch;
}

/* ---- scroll cue ---- */

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(1.5rem, 4vh, 3rem);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  opacity:calc(1 - var(--p) * 8);
  transition:opacity .25s ease;
}

.scroll-cue__mouse{
  width:24px;
  height:38px;
  border:2px solid rgba(20,20,26,.35);
  border-radius:14px;
  position:relative;
}

.scroll-cue__dot{
  position:absolute;
  left:50%;
  top:7px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ink);
  transform:translateX(-50%);
  animation:cueDot 1.6s ease-in-out infinite;
}

@keyframes cueDot{
  0%{ opacity:1; top:7px; }
  70%{ opacity:0; top:20px; }
  100%{ opacity:0; top:7px; }
}

.scroll-cue__label{
  font-size:.68rem;
  letter-spacing:.3em;
}

body.is-scrolled .scroll-cue{ pointer-events:none; }

/* ================= PAGE 2 : TWO TEACHING CONDITIONS ================= */

.slide2{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.25rem, 3vh, 2.5rem);
  padding:clamp(1.5rem, 4vw, 3rem) 1.25rem;
  cursor:pointer;
  outline:none;
}

.head{ text-align:center; }

.head__kicker{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.6rem;
}

.head__title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem, 4.2vw, 3rem);
  letter-spacing:-.01em;
}

/* stage: holds both scenes, cross-fades between states */

.stage{
  position:relative;
  width:min(90vw, 900px);
  aspect-ratio:1500/1120;
}

.scene{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.94);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

.scene__base{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.scene__caption{
  position:absolute;
  left:50%;
  bottom:-2.6rem;
  transform:translateX(-50%);
  text-align:center;
  font-size:clamp(.85rem, 1.6vw, 1.05rem);
  font-weight:600;
  white-space:nowrap;
  transition:opacity .5s ease;
}

.scene__caption span{
  display:block;
  margin-top:.2rem;
  font-size:.78em;
  font-weight:400;
  color:var(--muted);
  white-space:normal;
}

/* bobbing floaters: gentle idle motion, always running, only visible with their scene */
.bob{
  position:absolute;
  animation:bob 2.6s ease-in-out infinite;
}
.bob--b2{ animation-delay:.9s; animation-duration:2.9s; }

@keyframes bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-9%); }
}

/* state machine: 1 = school (default), 2 = ai, 3 = both together */

.stage.state-1 .scene--school,
.stage.state-2 .scene--ai{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.stage.state-3 .scene--school{
  opacity:1;
  transform:translateX(-29%) translateY(2%) scale(.62);
  pointer-events:auto;
}
.stage.state-3 .scene--ai{
  opacity:1;
  transform:translateX(29%) translateY(2%) scale(.62);
  pointer-events:auto;
}

.stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:8%;
  bottom:8%;
  width:1px;
  background:linear-gradient(to bottom, transparent, var(--line) 20%, var(--line) 80%, transparent);
  opacity:0;
  transition:opacity .5s ease .2s;
}
.stage.state-3::before{ opacity:1; }

/* research text: only shown once both are together */

.research-text{
  max-width:56ch;
  text-align:center;
  font-size:clamp(.9rem, 1.6vw, 1.05rem);
  line-height:1.6;
  color:var(--muted);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .6s ease .15s, transform .6s ease .15s;
  pointer-events:none;
}

.stage.state-3 ~ .research-text{
  opacity:1;
  transform:translateY(0);
}

/* progress dots */

.progress{
  display:flex;
  gap:.5rem;
}

.progress span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--line);
  transition:background .3s ease, transform .3s ease;
}

.stage.state-1 ~ .progress span:nth-child(1),
.stage.state-2 ~ .progress span:nth-child(2),
.stage.state-3 ~ .progress span:nth-child(3){
  background:var(--accent);
  transform:scale(1.3);
}

/* ================= PAGE 3 : WHAT I LOVE (warm, distinct feel) ================= */

.love-page{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 30%, #2a1a12 0%, #160d09 55%, #0c0705 100%);
  padding:2rem 1.5rem;
  cursor:default;
}

.love-page__glow{
  position:absolute;
  left:50%;
  top:38%;
  width:min(60vw, 720px);
  height:min(60vw, 720px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,170,90,.16) 0%, rgba(255,120,60,.07) 40%, transparent 72%);
  filter:blur(4px);
  pointer-events:none;
}

.love-page__inner{
  position:relative;
  max-width:52ch;
  text-align:center;
}

.love-page__kicker{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,214,178,.65);
  margin-bottom:.9rem;
}

.love-page__title{
  font-family:'Cinzel', serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(1.8rem, 4.5vw, 3rem);
  color:#fff3e6;
}

.love-page__body{
  margin-top:1.25rem;
  font-size:clamp(.95rem, 1.6vw, 1.1rem);
  line-height:1.7;
  color:rgba(255,232,214,.72);
}

.love-page__list{
  margin-top:1.75rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  list-style:none;
}

.love-page__list li{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:rgba(255,232,214,.85);
  font-size:1rem;
}

.love-page__list li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,170,90,.8);
}

/* ================= small screens ================= */

@media (max-width:640px){
  .hand{ height:min(54vh, 540px); }
  .hand--robot{
    left:48%; top:40%;
    transform:
      translate(-87%, -11%)
      translate(calc(var(--p) * -18vw), calc(var(--p) * 14vh))
      rotate(calc(var(--p) * -10deg));
  }
  .hand--human{
    left:52%; top:38%;
    transform:
      translate(-15%, -84%)
      translate(calc(var(--p) * 18vw), calc(var(--p) * -14vh))
      rotate(calc(var(--p) * 10deg));
  }
}