/* ==========================================================================
   TECHGURU — STORY-FULL CSS (companion to js/story-full.js)
   Load AFTER css/cinematic.css / css/story.css. Every effect is opt-in via
   html.js-storyfull (added by story-full.js only when it boots), so:
   no-JS / error / reduced-motion = fully visible, static page.
   Only opacity / transform / box-shadow are animated (compositor-friendly).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. UNIVERSAL STAGGERED REVEALS
   ------------------------------------------------------------------------ */
.js-storyfull .tg-rvl {
  opacity: 0;
  transition:
    opacity .85s cubic-bezier(.2, .7, .2, 1),
    transform .95s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js-storyfull .tg-rvl:not([data-rv]) { transform: translate3d(0, 24px, 0); }
.js-storyfull .tg-rvl[data-rv="up"]    { transform: translate3d(0, 30px, 0); }
.js-storyfull .tg-rvl[data-rv="drop"]  { transform: translate3d(0, -22px, 0); }
.js-storyfull .tg-rvl[data-rv="left"]  { transform: translate3d(-36px, 0, 0); }
.js-storyfull .tg-rvl[data-rv="right"] { transform: translate3d(36px, 0, 0); }
.js-storyfull .tg-rvl[data-rv="scale"] { transform: scale(.94); }
.js-storyfull .tg-rvl[data-rv="chip"]  { transform: translate3d(0, 14px, 0) scale(.92); }
.js-storyfull .tg-rvl.rv-in { opacity: 1; transform: none; }

/* chapter numeral pops + flashes accent as its chip lands */
.js-storyfull .tg-rvl[data-rv="chip"].rv-in .tg-num { animation: tg-num-pop .65s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tg-num-pop {
  0%   { transform: scale(1.35); color: var(--tg-accent, #64dedf); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   2. WORD-LIGHTING FOR SECTION SUBTITLES (same signature as the About manifesto)
   ------------------------------------------------------------------------ */
.js-storyfull .tg-wl {
  opacity: .35;
  filter: saturate(.5);
  transition: opacity .45s linear, filter .45s linear;
}
.js-storyfull .tg-wl.wl-in { opacity: 1; filter: none; }

/* ---------------------------------------------------------------------------
   3. PROCESS STEP RINGS — pop + cyan glow as the connector line reaches them
   ------------------------------------------------------------------------ */
.js-storyfull .process-step-premium .step-number-ring {
  transform: scale(.82);
  opacity: .5;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease, box-shadow .9s ease;
}
.js-storyfull .process-step-premium.step-in .step-number-ring {
  transform: none;
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(100, 222, 223, .07), 0 0 26px -2px rgba(100, 222, 223, .38);
}

/* ---------------------------------------------------------------------------
   4. SCENE DEPTH — section headers drift a few px against the scroll (--sp)
   ------------------------------------------------------------------------ */
/* scene-depth transforms are applied inline by story-full.js (direct
   transform writes, no inherited custom property => no subtree recalc) */

/* ---------------------------------------------------------------------------
   5. CONTACT "START" BEAT — one-shot glow sweep when the form first enters
   ------------------------------------------------------------------------ */
.js-storyfull .contact-form.rv-in { animation: tg-form-glow 1.5s ease .35s 1; }
@keyframes tg-form-glow {
  0%   { box-shadow: 0 0 0 0 rgba(100, 222, 223, 0); }
  35%  { box-shadow: 0 0 44px -6px rgba(100, 222, 223, .35), inset 0 0 0 1px rgba(100, 222, 223, .28); }
  100% { box-shadow: 0 0 0 0 rgba(100, 222, 223, 0); }
}

/* footer finale: brand line gets a soft accent underline draw on entry */
.js-storyfull .footer-brand.rv-in .footer-logo { animation: tg-logo-glow 1.2s ease .2s 1; }
@keyframes tg-logo-glow {
  0%   { filter: drop-shadow(0 0 0 rgba(162, 116, 255, 0)); }
  45%  { filter: drop-shadow(0 0 18px rgba(162, 116, 255, .55)); }
  100% { filter: drop-shadow(0 0 0 rgba(162, 116, 255, 0)); }
}

/* ---------------------------------------------------------------------------
   SAFETY — reduced motion or ancient browsers: everything visible, no motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-storyfull .tg-rvl,
  .js-storyfull .tg-wl,
  .js-storyfull .process-step-premium .step-number-ring {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}