/* ==========================================================================
   YT TUTOR motion layer (v2)
   Loaded after main.css. Every effect is progressive: without JS, or with
   prefers-reduced-motion, the page renders exactly like the v1 design.
   ========================================================================== */

:root{
  --gr-orange:#FF6B2C;--gr-gold:#FFC15A;--gr-ink:#0D0E11;--gr-cream:#F4F1EA;
  --gr-ease:cubic-bezier(.2,.8,.2,1);--gr-ease-out:cubic-bezier(.16,1,.3,1);
  --gr-intro:0s;
}
html.gr-introing{--gr-intro:1.05s}
html{scroll-behavior:smooth}
::selection{background:var(--gr-orange);color:var(--gr-ink)}

/* ---------- film-grain texture ---------- */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grGrain 1.2s steps(6) infinite;
}
@keyframes grGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- intro curtain (front page, once per session) ---------- */
.gr-intro{position:fixed;inset:0;z-index:10000;background:var(--gr-ink);display:flex;align-items:center;justify-content:center;
  animation:grCurtain .75s var(--gr-ease-out) .75s forwards;pointer-events:none}
.gr-intro::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gr-orange),var(--gr-gold));transform-origin:left;animation:grLoad .7s var(--gr-ease) both}
.gr-intro-brand{display:flex;align-items:center;gap:14px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,7vw,64px);letter-spacing:-0.03em;color:var(--gr-cream);overflow:hidden}
.gr-intro-brand span{display:inline-block;animation:grLetter .6s var(--gr-ease-out) both;animation-delay:calc(var(--i) * 45ms)}
.gr-intro-brand .gr-intro-dot{width:.32em;height:.32em;border-radius:50%;background:var(--gr-orange);box-shadow:0 0 30px var(--gr-orange)}
html:not(.gr-introing) .gr-intro{display:none}
@keyframes grCurtain{to{clip-path:inset(0 0 100% 0)}}
@keyframes grLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grLetter{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}

/* hero entrance waits for the curtain; words rise with a blur */
.w{animation-name:grRise;animation-delay:calc(var(--i) * .08s + .15s + var(--gr-intro))}
.fade{animation-delay:calc(var(--d,0s) + var(--gr-intro))}
@keyframes grRise{from{opacity:0;transform:translateY(60px) rotate(4deg);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- scroll progress ---------- */
.gr-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9995;pointer-events:none;
  background:linear-gradient(90deg,var(--gr-orange),var(--gr-gold));transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 12px rgba(255,107,44,.7)}
body.admin-bar .gr-progress{top:32px}

/* ---------- sticky glass nav ---------- */
.gr-nav{position:sticky !important;top:0;z-index:60 !important;transition:padding .35s var(--gr-ease),background .35s ease,box-shadow .35s ease,border-color .35s ease,border-radius .35s ease,margin .35s ease;border:1px solid transparent}
.gr-nav.is-stuck{padding-top:12px !important;padding-bottom:12px !important;background:rgba(13,14,17,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-color:#23252B;border-radius:0 0 22px 22px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.gr-nav.is-hidden{translate:0 -110%}
.gr-nav{transition-property:padding,background,box-shadow,border-color,border-radius,translate}
body.admin-bar .gr-nav{top:32px}

/* ---------- custom cursor (fine pointers only) ---------- */
.gr-cursor,.gr-cursor-dot{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s ease}
html.gr-fine .gr-cursor,html.gr-fine .gr-cursor-dot{opacity:1}
.gr-cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(244,241,234,.55);display:flex;align-items:center;justify-content:center;
  transition:width .3s var(--gr-ease),height .3s var(--gr-ease),margin .3s var(--gr-ease),background .3s ease,border-color .3s ease,opacity .3s ease}
.gr-cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gr-orange)}
.gr-cursor span{font:600 12px/1 'Inter',sans-serif;color:var(--gr-ink);opacity:0;transition:opacity .2s ease;letter-spacing:.04em}
.gr-cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--gr-orange);background:rgba(255,107,44,.12)}
.gr-cursor.is-label{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--gr-orange);border-color:var(--gr-orange)}
.gr-cursor.is-label span{opacity:1}
.gr-cursor.is-text{width:4px;height:34px;margin:-17px 0 0 -2px;border-radius:3px;background:var(--gr-orange);border-color:transparent}
.gr-cursor.is-down{transform:scale(.8)}
html.gr-fine.gr-cursor-on,html.gr-fine.gr-cursor-on a,html.gr-fine.gr-cursor-on button{cursor:none}
html.gr-fine.gr-cursor-on input,html.gr-fine.gr-cursor-on textarea,html.gr-fine.gr-cursor-on .gr-prompt-text{cursor:text}

/* ---------- hero spotlight + parallax ---------- */
#top::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(255,107,44,.16),transparent 60%)}
#top.is-lit::before{opacity:1}
#top .blob,#top .float,.gr-par{will-change:translate}

/* ---------- headline word masks ---------- */
.gr-split .gr-wm{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
.gr-split .gr-wi{display:inline-block;transform:translateY(105%) rotate(5deg);transform-origin:0 100%;transition:transform 1s var(--gr-ease-out);transition-delay:calc(var(--i) * 55ms)}
.gr-split.is-in .gr-wi{transform:none}

/* ---------- reveal fallback with stagger (no scroll-timeline) ---------- */
html.gr-io .reveal{opacity:0;transform:translateY(64px) scale(.96);
  transition:opacity .9s var(--gr-ease-out),transform 1s var(--gr-ease-out),translate .3s var(--gr-ease),box-shadow .3s ease,border-color .3s ease,background .3s ease;
  transition-delay:var(--stg,0ms),var(--stg,0ms),0s,0s,0s,0s}
html.gr-io .reveal.is-in{opacity:1;transform:none}
html.gr-io .line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--gr-ease-out) .25s}
html.gr-io .is-in .line,html.gr-io .line.is-in{transform:scaleX(1)}

/* ---------- section "grow" for the cream bands ---------- */
.gr-grow{clip-path:inset(0 calc(var(--g,0) * 5%) round calc(var(--g,0) * 56px));will-change:clip-path}

/* ---------- 3D tilt + cursor spotlight on cards ---------- */
.gr-tilt{position:relative;transition:rotate .5s var(--gr-ease),translate .3s var(--gr-ease),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.gr-tilt.is-tilting{transition:rotate .08s linear,translate .3s var(--gr-ease),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.gr-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,107,44,.16),transparent 55%)}
.gr-tilt.is-tilting::before{opacity:1}
.lift-light.gr-tilt::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,107,44,.12),transparent 55%)}

/* ---------- magnetic buttons + click ripple ---------- */
.gr-mag{transition:translate .35s var(--gr-ease),box-shadow .2s ease,background .2s ease,color .2s ease}
.gr-mag.is-mag{transition:translate .12s linear,box-shadow .2s ease,background .2s ease,color .2s ease}
.gr-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);transform:scale(0);animation:grRipple .7s var(--gr-ease-out) forwards}
@keyframes grRipple{to{transform:scale(1);opacity:0}}
.btn,.ghost,.copy,.tab,.chip{position:relative;overflow:hidden}

/* ---------- pipeline scrubbed by scroll ---------- */
.gr-scrub .pipe-fill{animation:none !important;width:calc(var(--pp,0) * 100%);transition:width .15s linear;box-shadow:0 0 16px rgba(255,107,44,.8)}
.gr-scrub .node{animation:none !important;background:#23252B;color:#A9A7A0;transition:background .4s ease,color .4s ease,box-shadow .6s ease,transform .5s var(--gr-ease-out)}
.gr-scrub .node.is-lit{background:var(--gr-orange);color:var(--gr-ink);box-shadow:0 0 0 12px rgba(255,107,44,.18),0 0 40px rgba(255,107,44,.45);transform:scale(1.08)}
.gr-scrub .node+h3,.gr-scrub .node~p{transition:opacity .5s ease,translate .6s var(--gr-ease-out);opacity:.35;translate:0 10px}
.gr-scrub .is-lit+h3,.gr-scrub .is-lit~p{opacity:1;translate:0 0}

/* ---------- marquee reacts to scroll speed ---------- */
.marquee .marquee-track{transform-origin:center;transition:none}
.marquee.gr-vel{--sk:0deg}
.marquee.gr-vel .marquee-track>span{display:inline-flex;transform:skewX(var(--sk));transition:transform .2s ease-out}
.marquee .marquee-track>span:hover{color:var(--gr-cream) !important}

/* ---------- counters ---------- */
[data-gr-count]{font-variant-numeric:tabular-nums}

/* ---------- back to top with progress ring ---------- */
.gr-top{position:fixed;right:22px;bottom:22px;z-index:70;width:54px;height:54px;border-radius:50%;border:none;background:#16181D;color:var(--gr-cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;translate:0 20px;pointer-events:none;transition:opacity .35s ease,translate .35s var(--gr-ease),background .2s ease;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.gr-top.is-on{opacity:1;translate:0 0;pointer-events:auto}
.gr-top:hover{background:var(--gr-orange);color:var(--gr-ink)}
.gr-top svg{position:absolute;inset:0;rotate:-90deg}
.gr-top circle{fill:none;stroke:var(--gr-orange);stroke-width:3;stroke-dasharray:157;stroke-dashoffset:calc(157 - var(--p,0) * 157);transition:stroke-dashoffset .1s linear}
.gr-top:hover circle{stroke:var(--gr-ink)}

/* ---------- richer lightbox ---------- */
.lightbox{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lightbox:target img{animation:grZoom .55s var(--gr-ease-out) both}
@keyframes grZoom{from{opacity:0;transform:scale(.86) translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- copy burst (vault) ---------- */
.gr-spark{position:fixed;z-index:9997;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:grSpark .8s var(--gr-ease-out) forwards}
@keyframes grSpark{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ---------- nav-link scramble keeps width steady ---------- */
.navlink[data-gr-scramble]{display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- small screens: calm the heavier effects ---------- */
@media (max-width:760px){
  .gr-grow{clip-path:none}
  .gr-nav{position:relative !important}
  .gr-nav.is-stuck{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .gr-nav.is-hidden{translate:none}
  .gr-top{right:14px;bottom:14px}
}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce){
  body::after,.gr-intro,.gr-cursor,.gr-cursor-dot{display:none !important}
  .gr-split .gr-wi{transform:none !important}
  html.gr-io .reveal{opacity:1 !important;transform:none !important}
  .gr-grow{clip-path:none !important}
  .gr-tilt{rotate:none !important}
  .gr-scrub .node+h3,.gr-scrub .node~p{opacity:1 !important;translate:none !important}
}