/* ============ THE LIVING HERO (landing) ============
   Ported from the locked prototype: endless seasons (wheel/idle), mouse-x
   day→night, continuous one-season-ahead lens, full effects stack. */

#p-landing{background:var(--navy);user-select:none;-webkit-user-select:none}
/* the landing IS the viewport: no page scroll (wheel drives seasons), and the
   oversized effect layers (god-rays inset -24% etc.) must clip, not grow the page */
#p-landing.active{height:100svh;min-height:100svh;overflow:hidden;touch-action:none}
html.noscroll{overscroll-behavior:none}
html.noscroll, html.noscroll body{overflow:hidden;height:100%}
#p-landing .zoomwrap{position:absolute;inset:0;will-change:transform;transform:translateZ(0)}
#p-landing .bg{position:absolute;inset:-2%;width:104%;max-width:none;height:104%;object-fit:cover;
  will-change:transform,opacity;transform:translateZ(0)}
#breather{position:absolute;inset:0}   /* pinned: the world never drifts (owner directive) */
@keyframes breathe{
  0%,100%{transform:translate3d(0,0,0)}
  27%{transform:translate3d(1.6px,-2px,0)}
  55%{transform:translate3d(-1.8px,1.2px,0)}
  78%{transform:translate3d(1.2px,1.8px,0)}}

/* season mood grades */
.grade{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;mix-blend-mode:soft-light}
#gradeA{background:linear-gradient(180deg,#ff9a45 0%,#ff8a3a 52%,#c25c1e 100%)}
#gradeW{background:linear-gradient(180deg,#9fd2ff 0%,#7ec0f5 50%,#5d92c4 100%)}
#gradeSp{background:linear-gradient(180deg,#9fe39a 0%,#c8e6a6 46%,#f4c4d8 100%)}  /* spring: fresh green -> soft blossom pink */

/* night stack — one night per season */
#nightStack{position:absolute;inset:-2%;width:104%;height:104%;will-change:transform}
#nightStack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}

/* nightfall grade — darkens the dusk window so the day→night photo crossfade
   happens in shadow (the two generations are ~1-2% offset; light would ghost) */
.nightfall{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  background:linear-gradient(180deg,#2a3a58 0%,#1d2a40 55%,#202739 100%)}

/* dusk + rays + god-rays (sun anchored top-right) */
.duskglow{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    linear-gradient(to top, rgba(255,140,70,.22) 0%, transparent 36%),
    radial-gradient(70% 46% at 50% 88%, rgba(255,120,60,.28), transparent 70%)}
.rays{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  will-change:transform;transform-origin:75% 18%;
  background:conic-gradient(from 192deg at 75% 18%,
    transparent 0 6deg, rgba(255,170,90,.08) 8deg 12deg, transparent 15deg 24deg,
    rgba(255,170,90,.07) 26deg 30deg, transparent 33deg 44deg, rgba(255,170,90,.08) 46deg 51deg,
    transparent 54deg 360deg);
  animation:raysway 32s ease-in-out infinite alternate}
@keyframes raysway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.godrays{position:absolute;inset:-24%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  will-change:transform;transform-origin:76% 16%;
  background:
    radial-gradient(16% 12% at 76% 16%, rgba(255,224,156,.45), transparent 72%),
    conic-gradient(from 196deg at 76% 16%,
      transparent 0 4deg, rgba(255,210,126,.22) 6deg 12deg, transparent 16deg 22deg,
      rgba(255,216,134,.18) 24deg 29deg, transparent 32deg 40deg, rgba(255,210,126,.24) 42deg 48deg,
      transparent 52deg 58deg, rgba(255,216,134,.15) 60deg 64deg, transparent 68deg 360deg);
  filter:blur(1.5px);
  animation:godsway 26s ease-in-out infinite alternate}
@keyframes godsway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* aurora — layered ray CURTAINS (not bands): narrow bright cores at varied
   spacing, purple top fringe, crisp shimmer rays; sky only, dome-carved */
.aurora{position:absolute;inset:0 0 54% 0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26% 48%, rgba(0,0,0,.4) 72%, transparent 94%),
                     radial-gradient(ellipse 52% 78% at 50% 128%, transparent 0 56%, #000 76%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 26% 48%, rgba(0,0,0,.4) 72%, transparent 94%),
                     radial-gradient(ellipse 52% 78% at 50% 128%, transparent 0 56%, #000 76%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.aurora i{position:absolute;inset:-10% -22%}
.aurora i:nth-child(1){filter:blur(13px);
  background:
    repeating-linear-gradient(91deg, transparent 0 14px, rgba(96,255,176,.20) 15px 19px, transparent 20px 43px,
      rgba(70,240,196,.13) 44px 48px, transparent 49px 87px),
    repeating-linear-gradient(88.5deg, transparent 0 27px, rgba(126,255,205,.14) 28px 34px, transparent 35px 72px),
    linear-gradient(102deg, transparent 22%, rgba(64,235,170,.26) 37%, rgba(96,228,235,.14) 52%, rgba(64,235,170,.12) 63%, transparent 79%);
  animation:aur1 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){filter:blur(17px);
  background:
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(198,138,255,.12) 36px 42px, transparent 43px 90px),
    linear-gradient(180deg, rgba(186,122,255,.20) 0%, rgba(255,130,198,.09) 26%, transparent 56%);
  animation:aur2 52s ease-in-out infinite alternate}
.aurora b{position:absolute;inset:-12% -24%;filter:blur(4.5px);mix-blend-mode:screen;
  background:
    repeating-linear-gradient(90.5deg, transparent 0 22px, rgba(150,255,212,.32) 23px 26px, transparent 27px 55px,
      rgba(116,252,232,.19) 56px 58px, transparent 59px 97px),
    repeating-linear-gradient(89deg, transparent 0 66px, rgba(224,176,255,.16) 67px 70px, transparent 71px 152px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 2%, #000 22% 46%, transparent 88%);
          mask-image:linear-gradient(to bottom, transparent 2%, #000 22% 46%, transparent 88%);
  animation:aurCurtain 13s ease-in-out infinite alternate, aurShimmer 7s ease-in-out infinite}
@keyframes aurShimmer{0%,100%{opacity:.7}45%{opacity:1}65%{opacity:.85}}
@keyframes aurCurtain{
  0%{transform:translateX(-4.5%) skewX(-7deg) scaleY(.95)}
  45%{transform:translateX(1.5%) skewX(3deg) scaleY(1.07)}
  100%{transform:translateX(4.5%) skewX(8deg) scaleY(.97)}}
@keyframes aur1{from{transform:translateX(-7%) skewX(-7deg) scaleY(.92)}to{transform:translateX(7%) skewX(5deg) scaleY(1.08)}}
@keyframes aur2{from{transform:translateX(6%) skewX(6deg) scaleY(1.05)}to{transform:translateX(-6%) skewX(-4deg) scaleY(.94)}}

/* stars + glint + satellite + shooting */
.stars{position:absolute;inset:0 0 44% 0;pointer-events:none;opacity:0}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.8;
  animation:twinkle 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.95}}
.glint{position:absolute;width:34px;height:34px;pointer-events:none;opacity:0;mix-blend-mode:screen}
.glint::before,.glint::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent)}
.glint::before{width:100%;height:1.5px}
.glint::after{width:1.5px;height:100%;background:linear-gradient(180deg, transparent, rgba(255,255,255,.95), transparent)}
.glint.go{animation:glintFlare 1.3s ease-out}
@keyframes glintFlare{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:.95;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(.4) rotate(14deg)}}
.satellite{position:absolute;top:14%;left:-3vw;width:2px;height:2px;border-radius:50%;
  background:rgba(235,240,250,.9);box-shadow:0 0 4px 1px rgba(220,230,250,.5);pointer-events:none;opacity:0}
.satellite.go{animation:satPass 16s linear forwards}
@keyframes satPass{0%{opacity:0;translate:0 0}6%{opacity:.85}94%{opacity:.85}100%{opacity:0;translate:108vw -6vh}}
/* shooting star: a finely tapered ion trail with a hot white head, a soft halo,
   and a glowing leading spark. Cooler + brighter than a flat streak (W53). */
.shoot{position:absolute;top:12%;left:18%;width:clamp(170px,16vw,250px);height:2px;border-radius:99px;
  pointer-events:none;opacity:0;transform:rotate(24deg);
  background:linear-gradient(90deg,transparent 0%,rgba(150,195,255,.06) 34%,var(--trail,rgba(196,222,255,.55)) 74%,#fff 100%);
  box-shadow:0 0 8px rgba(255,255,255,.6),0 0 22px var(--trail,rgba(180,210,255,.4));
  filter:drop-shadow(0 0 3px var(--trail,rgba(170,205,255,.5)))}
.shoot::before{content:"";position:absolute;inset:-3px 0;border-radius:99px;filter:blur(3px);
  background:linear-gradient(90deg,transparent 40%,rgba(168,205,255,.16) 78%,rgba(214,232,255,.32))}
.shoot::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translateY(-50%);background:radial-gradient(circle,#fff 0 38%,rgba(205,228,255,.85) 62%,transparent 76%);
  box-shadow:0 0 10px 3px rgba(224,238,255,.9),0 0 24px 7px rgba(150,196,255,.5)}
.shoot.go{animation:shootA var(--sdur,1.1s) ease-out}
@keyframes shootA{0%{opacity:0;translate:0 0}8%{opacity:1}92%{opacity:1}100%{opacity:0;translate:var(--tx,56vw) var(--ty,26vh)}}
/* day egg: the sun flares wide for a beat */
/* every burst layer is EDGE-FEATHERED: a 4-side mask takes alpha to zero before
   the element boundary, so no geometry can ever paint a flat edge on screen */
#sunflash,#sunsweep,#sunBeams,#screenPop{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14% 86%,transparent),linear-gradient(0deg,transparent,#000 14% 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14% 86%,transparent),linear-gradient(0deg,transparent,#000 14% 86%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
#sunflash{position:absolute;inset:-30%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(34% 28% at 66% 29%, rgba(255,242,196,1), rgba(255,196,96,.55) 34%, rgba(255,150,60,.2) 55%, transparent 72%)}
#sunflash.go{animation:sunBoom 2.6s ease-out}
@keyframes sunBoom{0%{opacity:0;transform:scale(.5)}14%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
/* viewport-wide warm light sweep, sun side to far side */
#sunsweep{position:absolute;inset:-30%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 38%,rgba(255,238,190,.5) 50%,transparent 62%);
  transform:translateX(90%)}
#sunsweep.go{animation:sweepGo 1.5s cubic-bezier(.3,.6,.3,1) .15s}
@keyframes sweepGo{0%{opacity:0;transform:translateX(90%)}18%{opacity:1}100%{opacity:0;transform:translateX(-90%)}}
/* overexposure pop: a 350ms sting of light when the strike lands */
#screenPop{position:absolute;inset:-20%;pointer-events:none;opacity:0;
  background:radial-gradient(55% 45% at 70% 24%, rgba(255,250,235,.55), rgba(255,235,190,.22) 52%, transparent 80%)}
#screenPop.go{animation:popFlash .5s ease-out}
@keyframes popFlash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
/* the strike core: blinding white heart + diffraction spikes */
#sunCore{position:absolute;left:76%;top:16%;width:120px;height:120px;margin:-60px 0 0 -60px;
  pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 16%,rgba(255,246,210,.9) 30%,rgba(255,204,116,.4) 54%,transparent 72%)}
#sunCore::before,#sunCore::after{content:"";position:absolute;left:50%;top:50%;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);transform:translate(-50%,-50%)}
#sunCore::before{width:340%;height:2.5px}
#sunCore::after{width:2.5px;height:340%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent)}
#sunCore.go{animation:sunSting 1.6s cubic-bezier(.2,.8,.3,1)}
@keyframes sunSting{0%{opacity:0;transform:scale(.15) rotate(0deg)}10%{opacity:1;transform:scale(1.5) rotate(9deg)}32%{transform:scale(1.05) rotate(13deg)}100%{opacity:0;transform:scale(.72) rotate(20deg)}}
/* a wheel of crisp golden beams snaps open and retracts */
#sunBeams{position:absolute;left:76%;top:16%;width:130vmin;height:130vmin;margin:-65vmin 0 0 -65vmin;
  pointer-events:none;opacity:0;mix-blend-mode:screen;border-radius:50%;
  background:conic-gradient(from 8deg,
    transparent 0 9deg, rgba(255,232,170,.5) 11deg 14deg, transparent 16deg 36deg,
    rgba(255,214,130,.38) 38deg 41deg, transparent 43deg 70deg, rgba(255,238,190,.45) 72deg 75deg,
    transparent 77deg 108deg, rgba(255,214,130,.4) 110deg 113deg, transparent 115deg 150deg,
    rgba(255,232,170,.42) 152deg 155deg, transparent 157deg 195deg, rgba(255,214,130,.36) 197deg 200deg,
    transparent 202deg 245deg, rgba(255,238,190,.44) 247deg 250deg, transparent 252deg 295deg,
    rgba(255,220,140,.4) 297deg 300deg, transparent 302deg 360deg)}
#sunBeams.go{animation:beamBurst 1.7s ease-out}
@keyframes beamBurst{0%{opacity:0;transform:scale(.35) rotate(-10deg)}14%{opacity:1}100%{opacity:0;transform:scale(1.18) rotate(8deg)}}
/* anamorphic lens streak through the sun */
#sunStreak{position:absolute;left:76%;top:16%;width:0;height:0;pointer-events:none}
#sunStreak i,#sunStreak b{position:absolute;left:0;top:0;border-radius:99px;opacity:0;mix-blend-mode:screen;display:block;
  transform:translate(-50%,-50%) scaleX(.05)}
#sunStreak i{width:150vw;height:2px;background:linear-gradient(90deg,transparent,rgba(200,228,255,.95) 47% 53%,transparent)}
#sunStreak b{width:120vw;height:14px;filter:blur(7px);background:linear-gradient(90deg,transparent,rgba(160,210,255,.5) 46% 54%,transparent)}
#sunStreak.go i{animation:streakPop 1.5s ease-out}
#sunStreak.go b{animation:streakPop 1.5s ease-out .06s}
@keyframes streakPop{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.05)}12%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.15)}}
/* lens-ghost rings on the sun diagonal */
.lensghost{position:absolute;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  border:1.5px solid rgba(255,214,140,.55);translate:-50% -50%;
  background:radial-gradient(circle, rgba(255,226,160,.25), rgba(255,214,140,.07) 60%, transparent 75%);
  box-shadow:0 0 12px rgba(255,210,130,.25), inset 0 0 10px rgba(255,226,160,.3);
  animation:ghostPop 1s ease-out both}
@keyframes ghostPop{0%{opacity:0;transform:scale(.4)}25%{opacity:.95;transform:scale(1.08)}70%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
/* gold motes that rise around the headline during the day burst */
.eggmote{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff3d0 0 30%,#ffc966 60%,transparent 75%);
  box-shadow:0 0 10px 2px rgba(255,200,110,.6);
  animation:moteRise 2.1s ease-out forwards}
@keyframes moteRise{0%{opacity:0;transform:translateY(14px) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translateY(-72px) scale(1.15)}}
/* night egg: one slow BOLIDE with a bright head + a landing glow on the ridge */
#bolide{position:absolute;top:4%;left:-6%;width:min(340px,30vw);height:3px;border-radius:99px;
  pointer-events:none;opacity:0;transform:rotate(21deg);
  background:linear-gradient(90deg,transparent,rgba(190,220,255,.5) 45%,#fff);
  box-shadow:0 0 12px 2px rgba(220,235,255,.8),0 0 34px 8px rgba(160,200,255,.4)}
#bolide.go{animation:bolideGo 1.7s cubic-bezier(.25,.6,.5,1)}
@keyframes bolideGo{0%{opacity:0;translate:0 0}7%{opacity:1}88%{opacity:1}100%{opacity:0;translate:82vw 32vh}}
#bolideGlow{position:absolute;left:68%;top:32%;width:30vw;height:18vw;pointer-events:none;opacity:0;
  mix-blend-mode:screen;background:radial-gradient(50% 50% at 50% 50%, rgba(200,225,255,.55), transparent 70%);filter:blur(8px)}
#bolideGlow.go{animation:bolideLand 1.3s ease-out}
@keyframes bolideLand{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}

/* moon */
.moonwrap{position:absolute;left:0;top:0;width:min(11vw,150px);pointer-events:none;opacity:0;will-change:transform,opacity}
.moonwrap img{width:100%;filter:drop-shadow(0 0 26px rgba(220,230,250,.35))}

/* lens — a CRYSTAL BALL: crisp core, glass ring, opposite-time preview */
#lens{position:absolute;left:0;top:0;width:16.8vmin;height:16.8vmin;pointer-events:none;
  opacity:0;transition:opacity .12s ease;z-index:4;will-change:transform,opacity;
  -webkit-mask-image:radial-gradient(circle, #000 0 58%, rgba(0,0,0,.65) 67%, rgba(0,0,0,.15) 74%, transparent 79%);
          mask-image:radial-gradient(circle, #000 0 58%, rgba(0,0,0,.65) 67%, rgba(0,0,0,.15) 74%, transparent 79%)}
#lens .li{position:absolute;inset:0;background-repeat:no-repeat;opacity:0;
  filter:brightness(1.16) saturate(1.12) contrast(1.05)}
#lensRing{position:absolute;left:0;top:0;width:16.8vmin;height:16.8vmin;pointer-events:none;opacity:0;
  transition:opacity .12s ease;z-index:5;will-change:transform,opacity;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(120,180,255,.18), 0 0 24px rgba(180,210,255,.28),
    inset 0 0 22px rgba(190,215,255,.22), inset 0 0 2px rgba(255,255,255,.6),
    0 14px 44px rgba(7,10,18,.45)}
#lensRing::before{content:"";position:absolute;left:14%;top:9%;width:34%;height:20%;border-radius:50%;
  background:linear-gradient(160deg, rgba(255,255,255,.5), transparent 70%);filter:blur(2px);
  transform:rotate(-18deg)}
#lensRing::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(255,196,120,.22)}


/* clouds + snow + sparkles + auroraGlow + mists + wind */
.cloudband{position:absolute;left:-30%;width:160%;height:16%;pointer-events:none;mix-blend-mode:screen;will-change:transform}
.cloudband .puffs{position:absolute;inset:0;animation:cloudlife 60s ease-in-out infinite alternate;
  background:
    radial-gradient(38% 86% at 18% 56%, rgba(244,248,253,.17) 0 42%, transparent 72%),
    radial-gradient(30% 70% at 44% 40%, rgba(238,244,252,.13) 0 44%, transparent 74%),
    radial-gradient(40% 90% at 72% 60%, rgba(244,248,253,.15) 0 42%, transparent 72%),
    radial-gradient(26% 60% at 92% 44%, rgba(238,244,252,.11) 0 46%, transparent 76%);
  filter:blur(6px)}
.cloudband.c1{top:7%}
.cloudband.c2{top:21%;height:15%;opacity:.7}
.cloudband.c2 .puffs{animation-duration:84s;animation-direction:alternate-reverse}
@keyframes cloudlife{from{transform:translateX(-4%) scaleY(.96)}to{transform:translateX(4%) scaleY(1.05)}}
#snow{position:absolute;inset:0;pointer-events:none;opacity:0}
#snow b{position:absolute;top:-12vh;left:0;width:1px;height:1px;border-radius:50%}
#snow #snowA{animation:snowfall 13s linear infinite}
#snow #snowB{animation:snowfall 19s linear infinite;animation-delay:-7s}
@keyframes snowfall{to{transform:translateY(118vh)}}
/* spring petals: like snow but slower + drifting sideways with a gentle tumble */
#petals{position:absolute;inset:0;pointer-events:none;opacity:0}
#petals b{position:absolute;top:-12vh;left:0;width:1px;height:1px;border-radius:60% 40% 55% 45%}
#petals #petalA{animation:petalfall 17s linear infinite}
#petals #petalB{animation:petalfall 24s linear infinite;animation-delay:-9s}
@keyframes petalfall{to{transform:translate(7vw,118vh) rotate(240deg)}}
#sparkles{position:absolute;inset:42% 0 0 0;pointer-events:none;opacity:0}
#sparkles i{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 6px 1px rgba(255,255,255,.8);animation:sparkleFlash 7s linear infinite;animation-delay:var(--sd)}
@keyframes sparkleFlash{0%,92%,100%{opacity:0;transform:scale(.4)}95%{opacity:.95;transform:scale(1.25)}97%{opacity:.3;transform:scale(.7)}}
#auroraGlow{position:absolute;inset:46% -10% -4% -10%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(60% 50% at 38% 40%, rgba(80,235,180,.16), transparent 72%),
    radial-gradient(55% 45% at 70% 55%, rgba(110,200,255,.1), transparent 70%);
  filter:blur(14px);animation:aurGlowDrift 22s ease-in-out infinite alternate}
@keyframes aurGlowDrift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.mist{position:absolute;left:-30%;width:160%;height:46%;bottom:-6%;pointer-events:none;mix-blend-mode:screen;opacity:.34;will-change:transform}
.mist::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(46% 70% at 22% 62%, rgba(236,225,206,.26) 0%, rgba(236,225,206,.1) 45%, transparent 72%),
    radial-gradient(40% 64% at 56% 76%, rgba(214,201,182,.2) 0%, rgba(214,201,182,.08) 45%, transparent 72%),
    radial-gradient(44% 68% at 84% 58%, rgba(236,225,206,.24) 0%, rgba(236,225,206,.09) 45%, transparent 72%)}
.mist.m1{animation:driftR 95s linear infinite alternate}
.mist.m2{bottom:-14%;opacity:.22;animation:driftL 140s linear infinite alternate}
@keyframes driftR{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
@keyframes driftL{from{transform:translateX(7%)}to{transform:translateX(-7%)}}
.windstreak{position:absolute;width:90px;height:1.5px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, transparent, rgba(240,243,248,.7), transparent);filter:blur(.4px)}
.windstreak.go{animation:windRush .55s ease-out}
@keyframes windRush{0%{opacity:0;transform:translateX(0) scaleX(.4)}25%{opacity:.7}100%{opacity:0;transform:translateX(var(--wdx,90px)) scaleX(1.15)}}

/* anamorphic flare (dusk crossing) */
#flare{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5}
#flare.go{animation:flareFade 1.5s ease-out}
@keyframes flareFade{0%{opacity:0}18%{opacity:.45}58%{opacity:.3}100%{opacity:0}}
#flare .line{position:absolute;left:46%;right:14%;top:46%;height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(255,196,150,.35) 30%, rgba(255,244,230,.8) 50%, rgba(255,196,150,.35) 70%, transparent);
  filter:blur(.7px);box-shadow:0 0 12px 1px rgba(255,214,170,.3)}
#flare .core{position:absolute;left:66%;top:46%;width:10px;height:10px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,240,.95), rgba(255,200,140,.4) 55%, transparent 75%);
  box-shadow:0 0 34px 10px rgba(255,220,170,.5)}
#flare .g{position:absolute;border-radius:50%;opacity:.55}
#flare .g1{left:57%;top:48%;width:26px;height:26px;background:radial-gradient(circle, rgba(160,210,255,.25), transparent 70%)}
#flare .g2{left:40%;top:51%;width:42px;height:42px;background:radial-gradient(circle, rgba(255,190,130,.18), transparent 70%)}
#flare .g3{left:28%;top:54%;width:18px;height:18px;background:radial-gradient(circle, rgba(255,235,200,.3), transparent 72%)}
#flare.go .g{animation:ghostDrift 1.5s ease-out}
@keyframes ghostDrift{from{translate:14px 0}to{translate:-22px 0}}

/* headline + frost */
.fadebase{position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(to top, rgba(10,14,24,.62), transparent)}
#p-landing .hero-inner{position:relative;z-index:6;min-height:100svh;display:grid;place-content:center;
  justify-items:center;text-align:center;gap:22px;padding:90px 18px 60px}
#p-landing .hero-inner::before{content:"";position:absolute;inset:-16% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 56% at 50% 42%, rgba(7,10,18,.5) 0%, rgba(7,10,18,.26) 52%, transparent 74%)}
/* the maker's mark — gold sheen sweeps the name every few seconds */
.builtby{font-family:var(--mono);font-size:clamp(13px,1.75vw,17px);letter-spacing:.42em;will-change:transform;
  text-transform:uppercase;color:rgba(241,236,226,.78);text-shadow:0 1px 4px rgba(7,10,18,.92),0 0 2px rgba(7,10,18,.7);
  display:flex;align-items:center;gap:14px;animation:bbIn 1.4s cubic-bezier(.2,.9,.3,1) .3s both, bbFloat 6.5s ease-in-out 1.8s infinite}
@keyframes bbFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
.builtby::before,.builtby::after{content:"";height:1px;width:clamp(22px,4vw,46px);
  background:linear-gradient(90deg,transparent,rgba(232,161,61,.7));}
.builtby::after{background:linear-gradient(90deg,rgba(232,161,61,.7),transparent)}
/* the name is the readability concern (owner asked twice): a BRIGHT solid gold
   with a real thin black outline so it reads over the bright snowy peak. The old
   gradient-clip sheen washed out on a light background — dropped for a crisp,
   high-contrast treatment. -webkit-text-stroke is supported on every iOS Safari;
   paint-order:stroke fill keeps the gold full-width with the outline behind it. */
.builtby b{font-weight:800;letter-spacing:.28em;color:#ffc23a;
  -webkit-text-stroke:.6px #000;paint-order:stroke fill;
  text-shadow:0 1px 3px rgba(7,10,18,.9),0 0 6px rgba(7,10,18,.55)}
@keyframes bbIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
body.rm .builtby{animation:none}
/* the sheen stays even under reduced-motion (1 tiny element, slow, owner-requested);
   only the entrance slide is dropped */

.h1stack{display:grid;justify-items:center}
.h1stack > *{grid-area:1/1}
/* short / small phones: shrink the headline so the locked-viewport hero never clips (W55) */
@media (max-width:560px){#p-landing .h1line{font-size:clamp(2.1rem,8vw,3.6rem)}}
@media (max-height:700px) and (max-width:700px){#p-landing .hero-inner{gap:10px}}
.h1line{font-size:clamp(2.7rem,9vw,6.7rem);font-weight:680;line-height:.95;letter-spacing:-.018em;
  max-width:16ch;text-shadow:0 2px 5px rgba(7,10,18,.9),0 6px 20px rgba(7,10,18,.65),0 16px 58px rgba(7,10,18,.5)}
.h1line em{font-style:italic;font-weight:560;
  text-shadow:0 2px 4px rgba(7,10,18,.88),0 5px 18px rgba(7,10,18,.65),0 14px 54px rgba(7,10,18,.5)}
.h1frost{pointer-events:none;opacity:0;will-change:opacity;color:#f2f9ff;
  text-shadow:0 0 1px rgba(205,232,255,.95),0 0 12px rgba(175,216,255,.8),0 0 36px rgba(140,196,255,.5),0 2px 10px rgba(8,16,30,.45)}
.h1frost em{color:#1d242e;text-shadow:
  0 0 2px rgba(225,242,255,.95),0 0 6px rgba(205,232,255,.8),
  0 0 16px rgba(175,216,255,.6),0 0 34px rgba(150,200,255,.35),
  0 1px 2px rgba(235,246,255,.9)}
/* paired CTAs: primary + ghost twin, equal size, side by side */
.ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ctarow .btn{width:clamp(186px,24vw,232px);justify-content:center;white-space:nowrap}
@media (max-width:560px){
  .ctarow{flex-direction:column;align-items:center;gap:11px;width:100%}
  .ctarow .btn{width:min(86vw,300px)}
  .season-chip{font-size:12px;padding:10px 16px;letter-spacing:.12em}
  /* the maker's mark: tighter + brighter so it reads on a small screen */
  .builtby{font-size:12px;letter-spacing:.22em;color:rgba(241,236,226,.85);gap:9px}
  .builtby::before,.builtby::after{width:18px}
}
.ctarow .btn.ghost{background:rgba(10,14,24,.42);border:1px solid rgba(241,236,226,.5);color:var(--ink);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-shadow:0 1px 3px rgba(7,10,18,.7)}
.ctarow .btn.ghost:hover{border-color:rgba(232,161,61,.8);color:#ffe9c4}
/* the CTA carries a slow sheen — the eye lands where the action is */
#continueBtn{position:relative;overflow:hidden}
#continueBtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);animation:ctaSheen 5.2s ease-in-out infinite}
@keyframes ctaSheen{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
.tagline{font-family:var(--serif);font-style:italic;font-weight:480;font-size:clamp(1.15rem,2.6vw,1.7rem);
  color:rgba(241,236,226,.94);text-shadow:0 2px 6px rgba(7,10,18,.85),0 6px 22px rgba(7,10,18,.55);
  animation:bbIn 1.2s cubic-bezier(.2,.9,.3,1) .55s both;margin-top:-6px}
body.rm .tagline{animation:none}
#p-landing .sub{font-family:var(--mono);font-size:clamp(.8rem,1.8vw,1.05rem);letter-spacing:.34em;
  text-transform:uppercase;opacity:.95;text-shadow:0 1px 4px rgba(7,10,18,.85)}
#p-landing .accent{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;color:rgba(241,236,226,.88);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
  text-shadow:0 1px 3px rgba(7,10,18,.8)}
#p-landing .hero-inner::before{background:radial-gradient(50% 56% at 50% 42%, rgba(7,10,18,.54) 0%, rgba(7,10,18,.28) 52%, transparent 74%)}

/* season chip + hints */
.season-chip{position:fixed;left:18px;bottom:18px;z-index:7;font-family:var(--mono);font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(12,15,22,.6);border-radius:99px;
  padding:16px 26px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.season-chip b{color:var(--amber)}
/* desktop: read as one inline line "SUMMER · every season, we search" via
   pseudo-separators; phone (below) stacks the three parts onto their own lines */
.season-chip .sc-a::before{content:"\00A0·\00A0"}
.season-chip .sc-b::before{content:",\00A0"}
.egghint{position:absolute;top:64px;left:clamp(16px,3vw,34px);z-index:7;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,236,226,.5);
  text-shadow:0 1px 3px rgba(7,10,18,.8);animation:bbIn 1.2s ease 2.4s both;pointer-events:none}
/* phones: center the hint + season chip under the nav (placed AFTER the base rules so they win) */
@media (max-width:560px){
  .egghint{top:56px;left:50%;right:auto;translate:-50% 0;font-size:9.5px;letter-spacing:.14em;white-space:nowrap}
  /* stack the tagline into three clean lines: SEASON / EVERY SEASON / WE SEARCH
     (it wrapped awkwardly mid-phrase before). Drop the inline separators. */
  .season-chip{left:50%;right:auto;translate:-50% 0;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:5px}
  .season-chip .sc-a::before,.season-chip .sc-b::before{content:""}
}
.hints{position:fixed;right:18px;bottom:18px;z-index:7;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(241,236,226,.5);text-align:right;line-height:2}
@media (max-width:760px){.hints{display:none}}

/* perf gates (LAST: must beat animation shorthands) */
.aurora i,.aurora b,#auroraGlow{animation-play-state:paused}
body.nightOn .aurora i,body.nightOn .aurora b,body.nightOn #auroraGlow{animation-play-state:running}
#sparkles i,#snow b,#petals b{animation-play-state:paused}
body.winterOn #sparkles i,body.winterOn #snow b{animation-play-state:running}
body.springOn #petals b{animation-play-state:running}
.godrays,.rays{animation-play-state:paused}
body.morningOn .godrays,body.morningOn .rays{animation-play-state:running}
.lite .mist.m2,.lite .cloudband.c2,.lite #snowB,.lite #petalB,.lite .rays,.lite .aurora b{display:none}
.lite .stars i:nth-child(even){display:none}