/* ff2027-scene.css (r12). Hero scene styles for template-home-2027-vibe.php; loaded from the child theme with a filemtime version. Companion: ff2027-scene.js.
   hero scene (r9, 2026-09-08): full-viewport layered eclipse with scroll parallax. Layers: sky + stars, moon (brand emblem SVG + runic wordmark + year on a CSS disc), far and near treelines. --p is the scroll progress 0..1 written by the script; it stays 0 under reduced motion. No raster hero any more: the 2x JPEG export showed tile seams on retina desktops. Class family ff27v-scene*, ff27v-hero* is the copy band with the H1. */
.ff27v-scene{--p:0;position:relative;z-index:2;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - var(--ff27v-top,112px));min-height:calc(100svh - var(--ff27v-top,112px));text-align:center;background:#0E1440;color:var(--ff-ink)}
.ff27v-sky{position:absolute;left:0;right:0;top:-12%;bottom:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0C1640 0%,#15245F 48%,#1A2058 80%,#181744 100%);transform:translateY(calc(var(--p) * -5%))}
.ff27v-stars{position:absolute;inset:0;width:100%;height:100%;fill:#F2EFE2}
.ff27v-stage{position:relative;z-index:1;flex:1 1 0;min-height:clamp(180px,30svh,320px);display:flex;align-items:center;justify-content:center;container-type:size;padding:1svh 0}
.ff27v-moon{position:relative;display:block;width:min(44vh,60vw,440px);width:min(86cqh,46svh,60vw,560px);aspect-ratio:1;border-radius:50%;text-decoration:none;transform:translateY(calc(var(--p) * 70vh)) scale(calc(1 + var(--p) * .08));transform:translateY(calc(var(--p) * 70svh)) scale(calc(1 + var(--p) * .08));opacity:calc(1 - var(--p) * .25)} /* the moon grows a little as it nears the horizon (moon illusion) */
.ff27v-moon::before{content:"";position:absolute;inset:-85%;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(52,88,196,.85) 0%,rgba(40,69,163,.55) 26%,rgba(30,50,130,.25) 44%,rgba(24,28,78,0) 66%)} /* blue halo: the art's sky is brightest around the disc, so the glow travels with the moon */
.ff27v-corona{position:absolute;inset:-10%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 48% 48% at 47.5% 52.5%,rgba(99,211,235,.95) 0 88%,rgba(99,211,235,0) 100%);filter:blur(5px)} /* cyan rim, thickest at the lower left like the key art */
.ff27v-disc{position:absolute;inset:0;border-radius:50%;background:#05081B;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 44px 4px rgba(92,232,218,.28),0 0 120px 30px rgba(47,85,216,.22)}
.ff27v-emblem{display:block;width:28%;height:auto;fill:var(--ff-ink)}
.ff27v-wordmark{display:block;width:62%;height:auto;margin-top:11%}
.ff27v-yr{display:block;margin-top:7%;font-weight:700;letter-spacing:.34em;text-indent:.34em;color:var(--ff-teal);font-size:clamp(11px,1.9vh,22px);font-size:clamp(11px,4.6cqw,22px);line-height:1}
.ff27v-moon:focus-visible{outline:2px solid var(--ff-teal);outline-offset:8px}
.ff27v-trees{position:absolute;left:0;right:0;pointer-events:none}
.ff27v-trees svg{display:block;width:100%;height:100%;overflow:visible}
.ff27v-sway{position:absolute;inset:0;transform-origin:50% 100%}
/* r10 forest clearing: three depth layers, firs generated by the inline script for the real container size (tall on both sides, low in the middle so the moon sets into the gap and stays visible between the trees). Each layer's ground extends below the scene so the rise never opens a gap. */
.ff27v-trees-far{z-index:2;bottom:-6%;height:40%;fill:#172552;transform:translateY(calc(var(--p) * -8%))} /* gradient fill comes from the script; the 1px depth blur is desktop-only, see below */
.ff27v-mist::before,.ff27v-mist::after{content:"";position:absolute;top:0;bottom:0;left:-15%;right:-15%;background:radial-gradient(38% 70% at 28% 55%,rgba(78,139,255,.26),transparent 70%),radial-gradient(30% 60% at 72% 45%,rgba(92,232,218,.16),transparent 70%)}
.ff27v-mist::after{background:radial-gradient(34% 65% at 55% 60%,rgba(78,139,255,.2),transparent 70%),radial-gradient(28% 55% at 12% 50%,rgba(161,228,162,.1),transparent 70%)}
.ff27v-mist{position:absolute;left:0;right:0;z-index:3;bottom:2%;height:18%;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,rgba(78,139,255,0) 0%,rgba(78,139,255,.28) 45%,rgba(78,139,255,.1) 80%,rgba(5,8,26,0) 100%);transform:translateY(calc(var(--p) * -30%))}
.ff27v-trees-mid{z-index:4;bottom:-10%;height:50%;fill:#0D1436;transform:translateY(calc(var(--p) * -12%))}
.ff27v-trees-near{z-index:6;bottom:-16%;height:68%;fill:#060A20;transform:translateY(calc(var(--p) * -20%))}
.ff27v-meteor{position:absolute;top:12%;left:72%;width:150px;height:2px;border-radius:2px;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(242,239,226,.95),rgba(242,239,226,0));transform:rotate(-32deg);transform-origin:0 50%}
.ff27v-meteor-2{top:30%;left:28%;width:110px}
.ff27v-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:8;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,26,0) 0%,rgba(5,8,26,.55) 55%,#05081A 100%)} /* above the lockup too, so the sinking text dissolves at the edge instead of clipping */
.ff27v-scene-inner{position:relative;z-index:7;width:100%;max-width:880px;margin:0 auto;padding:0 clamp(16px,4vw,48px) calc(clamp(28px,8svh,80px) + var(--ff27v-cc,0px));box-sizing:border-box;transform:translateY(calc(var(--p) * 70vh));transform:translateY(calc(var(--p) * 70svh))} /* sinks at the moon's rate so the disc never passes through the lockup; the scene edge fade swallows it */
.ff27v-scene .ff27v-heroform{margin-top:22px}
.ff27v-scene .ff-cta{margin-top:24px}
.ff27v-scene.is-px .ff27v-moon,.ff27v-scene.is-px .ff27v-trees,.ff27v-scene.is-px .ff27v-mist,.ff27v-scene.is-px .ff27v-sky,.ff27v-scene.is-px .ff27v-scene-inner{will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .ff27v-stars .tw{animation:ff27v-tw 3.2s ease-in-out infinite}
  .ff27v-stars .tw:nth-child(3n){animation-delay:-1.2s}
  .ff27v-stars .tw:nth-child(3n+1){animation-delay:-2.3s}
  .ff27v-trees-near .ff27v-sway{animation:ff27v-sway 9s ease-in-out infinite alternate}
  .ff27v-trees-mid .ff27v-sway{animation:ff27v-sway 13s ease-in-out -5s infinite alternate-reverse}
  .ff27v-mist::before{animation:ff27v-fog 34s ease-in-out infinite alternate}
  .ff27v-mist::after{animation:ff27v-fog 46s ease-in-out -20s infinite alternate-reverse}
  .ff27v-fly{transform-box:fill-box;transform-origin:center;animation:ff27v-fly 4.2s ease-in-out infinite,ff27v-drift 9s ease-in-out infinite}
  .ff27v-fly:nth-child(2n){animation-delay:-1.4s,-3s;animation-duration:3.6s,11s}
  .ff27v-fly:nth-child(3n){animation-delay:-2.7s,-6s;animation-duration:4.8s,8s}
  .ff27v-fly:nth-child(4n+1){animation-direction:normal,reverse}
  .ff27v-ribbon{animation:ff27v-ribbon 26s ease-in-out infinite alternate}
  .ff27v-ribbon.r2{animation-duration:31s;animation-delay:-9s}
  .ff27v-ribbon.r3{animation-duration:23s;animation-delay:-15s}
  .ff27v-mist{animation:ff27v-mist 14s ease-in-out infinite}
  .ff27v-meteor{animation:ff27v-meteor 13s linear infinite}
  .ff27v-meteor-2{animation-duration:19s;animation-delay:-7s}
  .ff27v-corona:not(.ff27v-corona-warm){animation:ff27v-breathe 5.5s ease-in-out infinite}
  .ff27v-js .ff27v-stage{animation:ff27v-fade 1.2s ease-out both}
  .ff27v-js .ff27v-scene-inner>*{animation:ff27v-rise .9s cubic-bezier(.2,.7,.2,1) both}
  .ff27v-js .ff27v-scene-inner>:nth-child(2){animation-delay:.1s}
  .ff27v-js .ff27v-scene-inner>:nth-child(3){animation-delay:.2s}
  .ff27v-js .ff27v-scene-inner>:nth-child(4){animation-delay:.3s}
  .ff27v-js .ff27v-scene-inner>:nth-child(5){animation-delay:.4s}
  .ff27v-js .ff27v-hero-inner>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .ff27v-js .ff27v-hero-inner.is-in>*{opacity:1;transform:none}
  .ff27v-js .ff27v-hero-inner>:nth-child(2){transition-delay:.08s}
  .ff27v-js .ff27v-hero-inner>:nth-child(3){transition-delay:.16s}
  .ff27v-js .ff27v-hero-inner>:nth-child(4){transition-delay:.24s}
  .ff27v-js .ff27v-hero-inner>:nth-child(n+5){transition-delay:.32s}
}
@keyframes ff27v-tw{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes ff27v-sway{from{transform:skewX(-.45deg)}to{transform:skewX(.45deg)}}
@keyframes ff27v-fog{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
@keyframes ff27v-fly{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ff27v-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-11px)}}
@keyframes ff27v-ribbon{from{transform:translateX(-4%) skewX(var(--sk));opacity:.55}to{transform:translateX(4%) skewX(var(--sk));opacity:1}}
@keyframes ff27v-mist{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes ff27v-meteor{0%{transform:translate(0,0) rotate(-32deg);opacity:0}1%{opacity:1}7%{transform:translate(-380px,238px) rotate(-32deg);opacity:0}100%{transform:translate(-380px,238px) rotate(-32deg);opacity:0}}
@keyframes ff27v-breathe{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes ff27v-fade{from{opacity:0}to{opacity:1}}
@keyframes ff27v-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* ---- r12 additions ---- */
.ff27v-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ff27v-canvas[hidden]{display:none}
.ff27v-ribbon{--sk:-8deg;position:absolute;top:-6%;height:64%;width:14%;left:8%;pointer-events:none;opacity:.75;transform:skewX(var(--sk));background:radial-gradient(50% 55% at 50% 45%,rgba(161,228,162,.22),rgba(92,232,218,.10) 55%,transparent 75%)} /* northern-light curtains: soft gradients, no filter */
.ff27v-ribbon.r2{--sk:-11deg;left:24%;width:10%;height:54%;top:-2%;background:radial-gradient(50% 55% at 50% 45%,rgba(92,232,218,.22),rgba(78,139,255,.08) 55%,transparent 75%)}
.ff27v-ribbon.r3{--sk:-6deg;left:38%;width:16%;height:46%;top:-8%;opacity:.55;background:radial-gradient(50% 55% at 50% 45%,rgba(161,228,162,.14),rgba(206,58,190,.07) 55%,transparent 75%)}
.ff27v-rim{position:absolute;left:50%;bottom:14%;width:min(92vw,960px);height:30%;z-index:3;pointer-events:none;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 100%,rgba(92,232,218,.32),rgba(78,139,255,.16) 45%,transparent 72%);opacity:clamp(0,calc((var(--p) - .45) * 2.2),1)} /* rim light behind the far ridge, fades in over the last half of the descent */
.ff27v-corona-warm{background:radial-gradient(ellipse 48% 48% at 47.5% 52.5%,rgba(246,206,94,.9) 0 88%,rgba(246,206,94,0) 100%);opacity:clamp(0,calc((var(--p) - .55) * 2.5),.85)} /* the corona warms toward maize as the disc meets the horizon */
.ff27v-mist-2{bottom:-2%;height:12%;z-index:5;background:linear-gradient(180deg,rgba(78,139,255,0) 0%,rgba(78,139,255,.18) 50%,rgba(5,8,26,0) 100%);transform:translateY(calc(var(--p) * -40%))}
.ff27v-mist-2::before{background:radial-gradient(40% 70% at 62% 55%,rgba(92,232,218,.14),transparent 70%),radial-gradient(30% 60% at 20% 50%,rgba(78,139,255,.14),transparent 70%)}
.ff27v-mist-2::after{background:radial-gradient(36% 65% at 40% 60%,rgba(78,139,255,.12),transparent 70%)}
.ff27v-strip-short{display:none}
.ff27v-strip-preview{background:rgba(206,58,190,.22);border-bottom-color:rgba(206,58,190,.5)}
@media(min-width:1024px){.ff27v-trees-far{filter:blur(1px)}}
@media(max-width:400px){.ff27v-strip-long{display:none}.ff27v-strip-short{display:inline}}
@media(max-width:699px){
  .ff27v-scene-inner{padding-bottom:calc(26px + var(--ff27v-cc,0px))}
  .ff27v-scene .ff-eyebrow{margin-bottom:10px}
  .ff27v-scene .ff27v-dateline{margin-bottom:12px}
  .ff27v-scene .ff27v-heroform{margin-top:14px;width:100%}
  .ff27v-scene .ff-cta{flex-direction:column;margin-top:18px}
  .ff27v-scene .ff-cta .ff-btn{width:100%;justify-content:center;min-height:48px}
  .ff27v-trees-far{height:36%}
  .ff27v-mist{height:14%}
  .ff27v-mist-2{height:10%}
  .ff27v-trees-mid{height:46%}
  .ff27v-trees-near{height:60%}
  .ff27v-meteor,.ff27v-ribbon.r3{display:none}
}
@media(max-height:820px) and (min-width:700px){
  .ff27v-scene-inner{padding-bottom:calc(clamp(20px,5svh,48px) + var(--ff27v-cc,0px))}
  .ff27v-moon{width:min(92cqh,50svh,60vw,560px)}
}
@media(max-height:500px) and (min-width:700px){
  .ff27v-scene .ff27v-date{font-size:32px}
  .ff27v-stage{min-height:150px}
}
/* off-screen: every scene animation pauses (the script toggles is-off from an IntersectionObserver) */
.ff27v-scene.is-off *,.ff27v-scene.is-off *::before,.ff27v-scene.is-off *::after{animation-play-state:paused}