/* =====================================================================
   Gottify STORY-SCROLL — shared styling for the narrative layer.
   Companion to journey-core.css. Adds three things, all fixed and
   pointer-transparent so they never intercept a click:

     #storyfx     the per-page reactive motif canvas (water / schematic /
                  ledger / nightdesk / bloom / forge — chosen per page)
     #storyVeil   the four stacked mood plates that carry the narrative arc
                  (problem darkens -> product enters -> proof builds -> dawn)
     #storyRail   a 2px scroll-position rail across the very top edge

   The motif is what makes each page feel like ITS OWN place. The mood arc
   is the shared grammar underneath. Engine: assets/story-fx.js
   ===================================================================== */

#storyfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#storyfx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- MOOD PLATES ----------
   Four fixed gradients, only opacity animated, so a beat change costs one
   compositor pass and nothing else. html[data-beat] is set by story-fx.js. */
#storyVeil{position:fixed;inset:0;z-index:0;pointer-events:none}
#storyVeil>i{position:absolute;inset:0;display:block;opacity:0;
  transition:opacity 1100ms cubic-bezier(.22,.61,.36,1);will-change:opacity}

/* the room dims and the edges close in — the cost of the problem */
#storyVeil .sv-dark{
  background:
    radial-gradient(120% 90% at 50% 42%,transparent 34%,rgba(4,8,15,.52) 82%,rgba(3,6,12,.82) 100%),
    linear-gradient(180deg,rgba(3,7,14,.30) 0%,rgba(3,7,14,.05) 40%,rgba(3,7,14,.34) 100%);
}
/* the product arrives: a cool lift off the floor of the frame */
#storyVeil .sv-cool{
  background:
    radial-gradient(90% 60% at 50% 108%,rgba(0,144,192,.22) 0%,rgba(24,72,192,.10) 45%,transparent 74%),
    linear-gradient(180deg,transparent 40%,rgba(69,216,192,.05) 100%);
}
/* proof: steady, level, nothing dramatic — just light that holds */
#storyVeil .sv-steady{
  background:
    linear-gradient(180deg,rgba(69,216,192,.045) 0%,transparent 38%,transparent 62%,rgba(0,144,192,.07) 100%);
}
/* the close: dawn comes up under the call to action */
#storyVeil .sv-dawn{
  background:
    radial-gradient(105% 68% at 50% 112%,rgba(254,243,218,.20) 0%,rgba(255,178,87,.13) 34%,rgba(69,216,192,.07) 62%,transparent 82%);
}

html[data-beat="problem"] #storyVeil .sv-dark{opacity:1}
html[data-beat="enter"]   #storyVeil .sv-dark{opacity:.34}
html[data-beat="enter"]   #storyVeil .sv-cool{opacity:1}
html[data-beat="proof"]   #storyVeil .sv-cool{opacity:.42}
html[data-beat="proof"]   #storyVeil .sv-steady{opacity:1}
html[data-beat="close"]   #storyVeil .sv-steady{opacity:.35}
html[data-beat="close"]   #storyVeil .sv-dawn{opacity:1}

/* ---------- SCROLL RAIL ---------- */
#storyRail{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  transform:scaleX(var(--sp,0));transform-origin:0 50%;
  background:linear-gradient(90deg,#1848c0 0%,#0090c0 38%,#45d8c0 72%,#fef3da 100%);
  opacity:.5}

/* ---------- REDUCED MOTION ----------
   One static motif frame, no beat plates, no transitions. The rail stays: it
   reports scroll position, it does not animate on its own. */
@media(prefers-reduced-motion:reduce){
  #storyVeil>i{transition:none}
  #storyVeil .sv-dark{opacity:.30}
}