/* Living hero: time-of-day sky, sun, procedural turbines. Lifted from the previous design. */
@property --sky-top{syntax:"<color>";inherits:true;initial-value:#2d6fb5}
@property --sky-bot{syntax:"<color>";inherits:true;initial-value:#a9d4ee}
@property --hill-far{syntax:"<color>";inherits:true;initial-value:#86a9b8}
@property --hill-mid{syntax:"<color>";inherits:true;initial-value:#4f7d78}
@property --hill-near{syntax:"<color>";inherits:true;initial-value:#26433f}
@property --turbine{syntax:"<color>";inherits:true;initial-value:#f4f7fa}
@property --sun-core{syntax:"<color>";inherits:true;initial-value:#fff6d1}
@property --sun-glow{syntax:"<color>";inherits:true;initial-value:rgba(255,236,170,.55)}
@property --star-o{syntax:"<number>";inherits:true;initial-value:0}

:root{
  --sun:#f0a53a;
  --sun-x:50;--sun-y:30;
  --sky-top:#2d6fb5;--sky-bot:#a9d4ee;--sun-core:#fff6d1;--sun-glow:rgba(255,236,170,.55);
  --hill-far:#86a9b8;--hill-mid:#4f7d78;--hill-near:#26433f;--turbine:#f4f7fa;--star-o:0;
}
html{
  transition:--sky-top 1.4s ease,--sky-bot 1.4s ease,--hill-far 1.4s ease,--hill-mid 1.4s ease,
    --hill-near 1.4s ease,--turbine 1.4s ease,--sun-core 1.4s ease,--sun-glow 1.4s ease,--star-o 1.4s ease;
}
html[data-tod="dawn"]{--sky-top:#23305e;--sky-bot:#f5b48a;--sun-core:#ffe0b0;--sun-glow:rgba(255,190,130,.55);--hill-far:#8a7c9c;--hill-mid:#4d4570;--hill-near:#242247;--turbine:#f7e8dc;--star-o:.25}
html[data-tod="day"]{--sky-top:#2d6fb5;--sky-bot:#a9d4ee;--sun-core:#fff6d1;--sun-glow:rgba(255,236,170,.55);--hill-far:#86a9b8;--hill-mid:#4f7d78;--hill-near:#26433f;--turbine:#f4f7fa;--star-o:0}
html[data-tod="dusk"]{--sky-top:#1f2050;--sky-bot:#ee7f5a;--sun-core:#ffc98a;--sun-glow:rgba(255,140,90,.55);--hill-far:#7a5a7a;--hill-mid:#3d2f5c;--hill-near:#1a1533;--turbine:#f5cdb8;--star-o:.35}
html[data-tod="night"]{--sky-top:#04060d;--sky-bot:#17264a;--sun-core:#f4f6ff;--sun-glow:rgba(190,205,255,.35);--hill-far:#1a2646;--hill-mid:#101a33;--hill-near:#070b16;--turbine:#a7b3d6;--star-o:1}


/* ----- living hero ----- */
.scene-hero{
  position:relative;overflow:hidden;color:#fff;isolation:isolate;
  min-height:calc(100svh - 76px);display:flex;align-items:flex-start;
  background:var(--sky-bot);
}
.scene-sky{position:absolute;inset:0;z-index:-4;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 78%)} /* taste-skill-ignore: living sky, scrim and sun glow from the previous design */
.scene-stars{position:absolute;inset:0 0 40% 0;z-index:-3;opacity:var(--star-o);pointer-events:none}
.scene-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:twinkle 3.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.scene-sun{
  position:absolute;z-index:-2;left:calc(var(--sun-x) * 1%);top:calc(var(--sun-y) * 1%);
  width:clamp(64px,8vw,120px);aspect-ratio:1;border-radius:50%;
  background:var(--sun-core);box-shadow:0 0 90px 45px var(--sun-glow); /* taste-skill-ignore: living sky, scrim and sun glow from the previous design */
  transform:translate(-50%,-50%);transition:left 1.6s cubic-bezier(.16,1,.3,1),top 1.6s cubic-bezier(.16,1,.3,1);
}
.scene-canvas{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:-1;pointer-events:none}
.scene-canvas svg,.scene-strip svg{display:block;width:100%;height:100%}
.scene-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 12% 38%,rgba(10,16,40,.62),transparent 72%)} /* taste-skill-ignore: living sky, scrim and sun glow from the previous design */
.scene-content{position:relative;z-index:2;padding-top:clamp(56px,13vh,140px);padding-bottom:40px}
.scene-greeting{font-size:var(--step-body);color:rgba(255,255,255,.85);margin:0 0 22px}
.scene-content h1{font-family:var(--serif);font-size:clamp(3.2rem,9.5vw,8.4rem);font-weight:500;color:#fff;line-height:.95;letter-spacing:-.03em;margin:0 0 .3em;}
.scene-lead{font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(255,255,255,.88);max-width:520px;margin:0 0 34px;}
.tod-switch{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;margin:0 auto;padding-inline:var(--pad)}
.tod-switch button{font:500 .8125rem var(--font);color:rgba(255,255,255,.85);background:rgba(8,12,24,.28);border:0;padding:12px 16px;min-height:44px;cursor:pointer;transition:background .25s,color .25s}
.tod-switch button:hover{background:rgba(8,12,24,.5);color:#fff}
.tod-switch button.is-on{background:#fff;color:var(--ink)}

/* scene svg colours */
.hill-far{fill:var(--hill-far)}.hill-mid{fill:var(--hill-mid)}.hill-near{fill:var(--hill-near)}
.t-tower,.t-blade,.t-hub{fill:var(--turbine)}
.layer{transition:transform .4s ease-out}

/* silhouette strip on inner page banners */
.scene-strip{position:absolute;left:0;right:0;bottom:-1px;height:clamp(110px,14vw,210px);z-index:1;pointer-events:none}
.scene-strip .hill-far{fill:rgba(250,248,245,.28)}
.scene-strip .hill-mid{fill:rgba(250,248,245,.55)}
.scene-strip .hill-near{fill:var(--bg)}
.scene-strip .t-tower,.scene-strip .t-blade,.scene-strip .t-hub{fill:rgba(255,255,255,.92)}
.scene-content .button-ghost{background:rgba(8,12,24,.38);color:#fff}
@media (hover:hover){.scene-content .button-ghost:hover{background:#fff;color:var(--ink)}}
@media (max-width:760px){.scene-canvas{height:52%}.scene-content{padding-top:56px}.tod-switch{bottom:16px}}
@media (prefers-reduced-motion:reduce){.scene-stars i{animation:none}}

.scene-content{padding-inline:var(--pad)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}