/* ═══════════════════════════════════════════════════════════
   LUNARA — scroll-story.css · GSAP scroll-mode gates
   Active only under html.gsap-scroll (added by js/scroll-story.js
   when GSAP + ScrollTrigger are present AND motion is allowed).
   Without that class this file is inert: the .reveal fallback in
   main.js/style.css owns the page and nothing here renders.
   ═══════════════════════════════════════════════════════════ */

/* ── hand the animated sections over to GSAP ──────────────
   Scoped to the five owned sections only, so the hero and the
   free-draw block (#draw) keep their .reveal CSS transitions. */
html.gsap-scroll :is(#about, #why, #services, #faq, #book) .reveal{
  transition:none;
}

/* pre-promote pending entrance targets so layer promotion happens at load,
   not mid-scroll; self-lifts the moment settle() adds .is-in */
html.gsap-scroll :is(#about, #why, #services, #faq, #book) .reveal:not(.is-in){
  will-change:transform, opacity;
}

/* ── gold-ink heading sweep (one-shot, CSS-owned) ─────────
   JS adds .ss-ink-run as the heading enters; CSS runs a single
   time-bounded sweep (no per-scroll-frame text repaint). The
   .55s delay sequences it after the heading's transform tween
   so the two paints don't stack. currentColor at both ends
   keeps the heading its own color before, after, and on teardown
   (.section-title white, .connect-title gold). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.gsap-scroll .ss-ink-run{
    background:linear-gradient(105deg,
      currentColor 0 34%, var(--gold-hi) 44%, #fff6e4 50%,
      var(--gold) 56%, currentColor 66% 100%);
    background-size:250% 100%;
    background-position:110% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:ss-ink-sweep 1.1s ease-in-out .55s both;
  }
  /* RTL: sweep reads right-to-left (ease-in-out is symmetric, so
     reversing the same keyframes looks identical, just mirrored) */
  html[dir="rtl"].gsap-scroll .ss-ink-run{
    background-position:-10% 0;
    animation-direction:reverse;
  }
}
@keyframes ss-ink-sweep{
  from{ background-position:110% 0; }
  to  { background-position:-10% 0; }
}

/* ── ambient celestial accents (exist only in gsap mode) ──
   Slow composited transform drift — no scroll coupling, so zero
   per-frame main-thread cost. contain keeps invalidation local. */
.ss-orb{ display:none; }
html.gsap-scroll .ss-orb{
  display:block; position:absolute; z-index:0;
  pointer-events:none; color:var(--gold);
  will-change:transform;
  contain:layout paint;
}
html.gsap-scroll .ss-orb svg{ width:100%; height:auto; display:block; }
html.gsap-scroll .ss-orb-a{
  inset-inline-end:4%; top:-30px; width:130px; opacity:.13;
  animation:ss-drift-a 26s ease-in-out infinite alternate;
}
html.gsap-scroll .ss-orb-b{
  inset-inline-start:3%; bottom:8%; width:80px; opacity:.16;
  animation:ss-drift-b 33s ease-in-out infinite alternate;
}
@keyframes ss-drift-a{
  from{ transform:translate3d(0, 26px, 0) rotate(0deg); }
  to  { transform:translate3d(0,-42px, 0) rotate(10deg); }
}
@keyframes ss-drift-b{
  from{ transform:translate3d(0, 18px, 0); }
  to  { transform:translate3d(0,-30px, 0); }
}
@media (max-width:720px){
  html.gsap-scroll .ss-orb{ display:none; }
}

/* ── #book connect glow ───────────────────────────────────
   JS adds .ss-glow on enter; the gradient is pre-painted and its
   opacity transitions (auto-promoted, never animate box-shadow). */
.connect{ position:relative; }
.connect > .container{ position:relative; z-index:1; }
html.gsap-scroll .connect::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(560px 320px at 50% 55%,
    rgba(240,217,174,.10), rgba(123,71,201,.07) 45%, transparent 70%);
  opacity:0;
  transition:opacity 1.6s ease-out;
}
html.gsap-scroll .connect.ss-glow::before{ opacity:1; }