/* ============================================================
   AXIOM GATE
   1. Opening sequence: logo draws, wordmark rises, counter runs,
      then the screen splits open.
   2. Role selection: dark study hall, drifting constellation,
      glass role cards with light that follows the cursor.
   Palette: forest #414E3C, sage #7B9669, teal #6B8480,
            pale #BAC8B1, mist #E6E6E6 (+ deep forest #1E261B).
   ============================================================ */
.gate{
  --g-deep:#1E261B;
  --g-forest:#414E3C;
  --g-sage:#7B9669;
  --g-teal:#6B8480;
  --g-pale:#BAC8B1;
  --g-mist:#E6E6E6;
  --g-ease:cubic-bezier(.22,.61,.36,1);
  --g-cine:cubic-bezier(.76,0,.24,1);
  position:fixed; inset:0; z-index:1000; overflow:hidden;
  background:var(--g-deep); color:var(--g-mist);
  font-family:var(--font-body);
  transition:opacity .6s var(--g-ease);
}
.gate *{box-sizing:border-box;}
.gate.is-gone{opacity:0; pointer-events:none;}
.gate.is-hidden{display:none;}

/* ---------------- background scene ---------------- */
.gate-bg{position:absolute; inset:0; transform:scale(1.14); transition:transform 2.6s var(--g-cine);}
.gate.is-open .gate-bg{transform:scale(1);}
.gate-scene{position:absolute; inset:-3%; width:106%; height:106%; display:block; transition:transform .25s linear;}
.gate-photo{display:none; position:absolute; inset:0; background:url(../assets/education-bg.jpg) center/cover no-repeat; mix-blend-mode:luminosity; opacity:.6;}
.gate.has-photo .gate-photo{display:block;}
.gate.has-photo .gate-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,38,27,.72), rgba(30,38,27,.9));}
.gate-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.gate-spot{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,38%), rgba(186,200,177,.16), rgba(186,200,177,0) 68%);
}
.gate-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(64% 58% at 50% 47%, rgba(14,20,12,.7), rgba(14,20,12,0) 72%),
    radial-gradient(120% 90% at 50% 42%, rgba(30,38,27,0) 35%, rgba(12,16,11,.78) 100%),
    linear-gradient(180deg, rgba(12,16,11,.35), rgba(12,16,11,0) 30%, rgba(12,16,11,.5));
}
.gate .beam{animation:axBeam 8s ease-in-out infinite alternate;}
.gate .beam.b2{animation-duration:11s; animation-delay:-3s;}
.gate .beam.b3{animation-duration:9s; animation-delay:-6s;}
@keyframes axBeam{from{opacity:.55;} to{opacity:1;}}

/* ---------------- opening sequence ---------------- */
.intro{position:absolute; inset:0; z-index:5; pointer-events:none; color:var(--g-mist);}
.gate[data-stage="intro"] .intro,
.gate[data-stage="exit"] .intro{pointer-events:auto; cursor:progress;}
.intro-half{
  position:absolute; left:0; right:0; height:50.2%; background-color:var(--g-deep);
  background-image:radial-gradient(90% 80% at 50% 50%, #2D3A29 0%, #1E261B 62%);
  background-size:100% 200%;
  transition:transform 1.15s var(--g-cine);
  will-change:transform;
}
.intro-half.top{top:0; background-position:top;}
.intro-half.bottom{bottom:0; background-position:bottom;}
.gate.is-open .intro-half.top{transform:translateY(-101%);}
.gate.is-open .intro-half.bottom{transform:translateY(101%);}

.intro-content{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .5s var(--g-ease), transform .6s var(--g-ease), filter .5s;
}
.gate[data-stage="exit"] .intro-content,
.gate.is-open .intro-content{opacity:0; transform:scale(1.06) translateY(-10px); filter:blur(4px);}

.intro-logo{color:var(--g-mist); width:clamp(84px,11vw,124px); height:auto; overflow:visible;}
.il-ring, .il-leg, .il-bar{stroke-dasharray:1; stroke-dashoffset:1;}
.il-ring{animation:axDraw 1.3s .15s var(--g-cine) forwards;}
.il-leg{animation:axDraw 1.05s .5s var(--g-cine) forwards;}
.il-bar{animation:axDraw .5s 1.15s var(--g-cine) forwards;}
.il-spark{fill:var(--g-pale); transform-box:fill-box; transform-origin:center; transform:scale(0); animation:axPop .7s 1.5s cubic-bezier(.3,1.6,.5,1) forwards, axPulse 2.4s 2.3s ease-in-out infinite;}
@keyframes axDraw{to{stroke-dashoffset:0;}}
@keyframes axPop{to{transform:scale(1);}}
@keyframes axPulse{50%{filter:drop-shadow(0 0 5px rgba(186,200,177,.95));}}

.intro-word{display:flex; font-family:var(--font-display); font-weight:300; font-size:clamp(58px,10.5vw,128px); line-height:1; letter-spacing:-0.03em; color:#fff;}
.intro-word .ch{display:inline-block; overflow:hidden; padding:.06em .01em .1em; margin:-.06em 0 -.1em;}
.intro-word .ch > span{display:inline-block; transform:translateY(115%); animation:axLetter .95s calc(.9s + var(--i) * .075s) cubic-bezier(.2,.75,.1,1) forwards;}
@keyframes axLetter{to{transform:none;}}
.intro-tag{font-size:clamp(12px,1.2vw,14px); letter-spacing:.02em; color:var(--g-pale); opacity:0; animation:axFade .9s 1.75s var(--g-ease) forwards;}
@keyframes axFade{to{opacity:1;}}

.intro-foot{
  position:absolute; left:0; right:0; bottom:0; padding:0 clamp(20px,4vw,56px) clamp(22px,4vh,44px);
  transition:opacity .45s var(--g-ease), transform .5s var(--g-ease);
}
.gate[data-stage="exit"] .intro-foot,
.gate.is-open .intro-foot{opacity:0; transform:translateY(14px);}
.intro-counter{display:flex; align-items:baseline; gap:4px; font-family:var(--font-display); font-weight:300; font-size:clamp(54px,9vw,120px); line-height:.95; letter-spacing:-0.04em; color:var(--g-mist); font-variant-numeric:tabular-nums;}
.intro-pct{font-size:.32em; letter-spacing:0; color:var(--g-sage);}
.intro-bar{height:2px; margin-top:clamp(12px,2vh,22px); background:rgba(186,200,177,.16); overflow:hidden; border-radius:2px;}
.intro-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--g-sage), var(--g-pale)); transform:scaleX(0); transform-origin:left;}

/* ---------------- role selection ---------------- */
.select{
  position:absolute; inset:0; z-index:2; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(18px,3.4vh,34px) clamp(18px,4vw,56px) clamp(16px,3vh,28px);
}
.select .anim{opacity:0;}
.gate.is-open .select .anim{opacity:1; animation:axGateRise .95s calc(.55s + var(--d,0s)) var(--g-ease) backwards;}
@keyframes axGateRise{from{opacity:0; transform:translateY(26px) scale(.985); filter:blur(6px);} to{opacity:1; transform:none; filter:none;}}

.select-brand{align-self:flex-start; display:flex; align-items:center; gap:11px; color:#fff;}
.sb-mark{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(186,200,177,.12); box-shadow:inset 0 0 0 1px rgba(186,200,177,.38); color:#fff;}
.sb-name{font-family:var(--font-display); font-size:22px; font-weight:450; letter-spacing:-0.01em;}

.select-inner{margin:auto 0; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(12px,3vh,32px) 0;}
.select-title{font-family:var(--font-display); font-weight:300; font-size:clamp(34px,4.8vw,62px); line-height:1.08; letter-spacing:-0.025em; color:#fff; max-width:18ch; margin:0;}
.select-sub{margin:16px 0 0; max-width:44ch; font-size:clamp(14px,1.25vw,16px); line-height:1.6; color:rgba(230,230,230,.7);}
.select-foot{font-size:12px; color:rgba(186,200,177,.65);}

.role-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); width:min(940px,100%); margin-top:clamp(28px,5vh,52px); perspective:1100px;}

.role-card{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  position:relative; isolation:isolate; overflow:hidden; text-align:left; color:#fff; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  min-height:clamp(300px,42vh,370px); padding:clamp(22px,2.4vw,32px);
  border:0; border-radius:26px;
  background:linear-gradient(160deg, rgba(38,48,34,.62), rgba(24,31,22,.5) 70%);
  -webkit-backdrop-filter:blur(18px) saturate(120%); backdrop-filter:blur(18px) saturate(120%);
  box-shadow:inset 0 0 0 1px rgba(186,200,177,.2), 0 34px 60px -34px rgba(0,0,0,.75);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .35s var(--g-ease), box-shadow .5s var(--g-ease), background .5s var(--g-ease), opacity .6s var(--g-ease), filter .6s;
  will-change:transform;
}
.role-card > *{position:relative; z-index:1;}

/* light that pools under the cursor */
.role-card::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(186,200,177,.3), rgba(186,200,177,.08) 45%, transparent 68%);
  opacity:0; transition:opacity .45s var(--g-ease);
}
/* light that runs along the edge */
.role-card::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(186,200,177,.55) 38%, rgba(186,200,177,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0; transition:opacity .45s var(--g-ease);
}
/* the sweep: a slanted band of light that crosses the card */
.rc-shine{
  position:absolute !important; z-index:1; top:-30%; bottom:-30%; left:0; width:34%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-20deg); opacity:0; mix-blend-mode:soft-light;
}
.role-card:hover, .role-card:focus-visible{
  background:linear-gradient(160deg, rgba(52,64,47,.7), rgba(28,37,26,.55) 70%);
  box-shadow:inset 0 0 0 1px rgba(186,200,177,.32), 0 40px 70px -30px rgba(0,0,0,.8), 0 0 60px -12px rgba(123,150,105,.42);
}
.role-card:hover::before, .role-card:hover::after,
.role-card:focus-visible::before, .role-card:focus-visible::after{opacity:1;}
.role-card:hover .rc-shine, .role-card:focus-visible .rc-shine{opacity:1; transform:translateX(430%) skewX(-20deg); transition:transform 1.25s var(--g-cine), opacity .2s;}
.role-card:focus-visible{outline:2px solid var(--g-pale); outline-offset:4px;}
.role-card:active{transition-duration:.12s; filter:brightness(1.12);}

.rc-icon{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:var(--g-pale); background:rgba(186,200,177,.1); box-shadow:inset 0 0 0 1px rgba(186,200,177,.32); transition:background .45s var(--g-ease), color .45s var(--g-ease), transform .6s cubic-bezier(.3,1.5,.5,1);}
.rc-icon svg{width:26px; height:26px;}
.role-card:hover .rc-icon, .role-card:focus-visible .rc-icon{background:var(--g-pale); color:var(--g-forest); transform:rotate(-8deg) scale(1.06);}
.rc-title{font-family:var(--font-display); font-weight:450; font-size:clamp(28px,2.7vw,36px); letter-spacing:-0.02em; margin-top:22px; line-height:1.1;}
.rc-desc{margin-top:10px; font-size:14.5px; line-height:1.6; color:rgba(230,230,230,.74); max-width:36ch;}
.rc-points{display:flex; flex-direction:column; gap:7px; margin:16px 0 24px; font-size:13px; color:rgba(230,230,230,.6);}
.rc-points span{display:flex; align-items:center; gap:10px;}
.rc-points span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--g-sage); flex-shrink:0; transition:box-shadow .4s, background .4s;}
.role-card:hover .rc-points span::before{background:var(--g-pale); box-shadow:0 0 8px 1px rgba(186,200,177,.8);}

/* the button: rests as a small orb, opens into a pill on hover */
.rc-cta{
  position:relative !important; margin-top:auto; align-self:flex-start; display:block; overflow:hidden;
  height:48px; width:48px; border-radius:24px;
  background:rgba(186,200,177,.1); box-shadow:inset 0 0 0 1px rgba(186,200,177,.4);
  transition:width .65s cubic-bezier(.7,0,.2,1), background .4s var(--g-ease), box-shadow .4s;
}
.rc-cta::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:40%; transform:translateX(-160%) skewX(-20deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); pointer-events:none;
}
.rc-cta-label{position:absolute; left:22px; top:0; line-height:48px; font-size:14px; font-weight:600; letter-spacing:-0.005em; white-space:nowrap; color:#fff; opacity:0; transform:translateX(-14px); transition:opacity .3s var(--g-ease), transform .5s var(--g-ease);}
.rc-cta-arrow{position:absolute; right:4px; top:4px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--g-pale); color:var(--g-forest); transition:transform .6s cubic-bezier(.7,0,.2,1), background .3s;}
.rc-cta-arrow svg{width:18px; height:18px;}
.role-card:hover .rc-cta, .role-card:focus-visible .rc-cta{width:min(100%,206px); background:rgba(186,200,177,.2); box-shadow:inset 0 0 0 1px rgba(186,200,177,.75), 0 0 26px -4px rgba(186,200,177,.5);}
.role-card:hover .rc-cta-label, .role-card:focus-visible .rc-cta-label{opacity:1; transform:none; transition-delay:.18s;}
.role-card:hover .rc-cta::after, .role-card:focus-visible .rc-cta::after{transform:translateX(560%) skewX(-20deg); transition:transform 1s .3s var(--g-cine);}
.role-card:hover .rc-cta-arrow{background:#fff;}
.role-card:active .rc-cta-arrow{transform:scale(.9);}

/* click: burst of light from the pointer */
.rc-ripple{
  position:absolute; z-index:3; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(230,230,230,.55) 30%, rgba(186,200,177,0) 70%);
  transform:scale(0); animation:axRipple .9s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes axRipple{to{transform:scale(34); opacity:0;}}

/* leaving the gate */
.gate.is-leaving .role-card{pointer-events:none;}
.gate.is-leaving .role-card.is-dismissed{opacity:0; filter:blur(8px); transform:scale(.94);}
.gate.is-leaving .role-card.is-chosen{transform:scale(1.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 90px -6px rgba(186,200,177,.75);}
.gate.is-leaving .select .select-title, .gate.is-leaving .select .select-sub, .gate.is-leaving .select .select-brand, .gate.is-leaving .select .select-foot{opacity:0; transition:opacity .4s;}

.gate-wash{
  position:absolute; inset:0; z-index:9; pointer-events:none;
  background:radial-gradient(circle at var(--wx,50%) var(--wy,50%), #fff 0%, #F3F5EF 30%, #EEF0EB 62%);
  clip-path:circle(0 at var(--wx,50%) var(--wy,50%));
}
.gate.wash-go .gate-wash{animation:axWash 1s cubic-bezier(.65,0,.25,1) forwards;}
@keyframes axWash{to{clip-path:circle(150vmax at var(--wx,50%) var(--wy,50%));}}

/* ---------------- small screens ---------------- */
@media (max-width:760px){
  .role-grid{grid-template-columns:1fr;}
  .role-card{min-height:0; gap:0;}
  .rc-cta{width:min(100%,206px);}
  .rc-cta-label{opacity:1; transform:none;}
  .select-inner{margin:8px 0 auto;}
  .intro-counter{font-size:64px;}
}
@media (hover:none){
  .rc-cta{width:min(100%,206px);}
  .rc-cta-label{opacity:1; transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .gate .beam{animation:none;}
  .il-ring, .il-leg, .il-bar{stroke-dashoffset:0;}
  .il-spark{transform:scale(1); animation:none;}
  .intro-word .ch > span{transform:none;}
  .intro-tag{opacity:1;}
  .gate.is-open .select .anim{animation:none;}
  .gate-bg{transition:none; transform:none;}
}