/* =============================================================
   ZenithNord — hero base
   Extracted from index.html 2026-08-27 so the 56 town pages can
   share the same hero. Carries the .chero shell, the copy inside
   it, and the h-solar / h-heat variants. The day cycle itself is
   in an-hero-cycle.css, which must load immediately after this.
   ============================================================= */

.chero{position:relative;overflow:hidden;min-height:clamp(460px,72vh,620px);display:flex;align-items:center;
  padding:4.5rem 2rem 4rem;background:#121418;}
.chero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.chero-in{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;}
.chero .land-eyebrow{opacity:0;animation:ch-in .9s cubic-bezier(.2,.7,.3,1) .15s forwards;}
.chero h1{font-size:clamp(2.1rem,5.4vw,3.7rem);font-weight:900;line-height:1.08;letter-spacing:-1.5px;
  margin-bottom:1.3rem;max-width:15ch;opacity:0;animation:ch-in 1s cubic-bezier(.2,.7,.3,1) .3s forwards;}
.chero h1 em{font-style:normal;color:var(--acc);}
.chero .sub{opacity:0;animation:ch-in 1s cubic-bezier(.2,.7,.3,1) .5s forwards;}
.chero .hero-cta{opacity:0;animation:ch-in 1s cubic-bezier(.2,.7,.3,1) .68s forwards;
  margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;}
.chero .sub{margin-bottom:.4rem;}
.chero .land-note{opacity:0;animation:ch-in 1s cubic-bezier(.2,.7,.3,1) .84s forwards;}
@keyframes ch-in{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

.chero-glow{position:absolute;left:38%;top:62%;width:min(1200px,130vw);height:760px;transform:translate(-50%,-50%);
  animation:ch-breathe 7.5s ease-in-out infinite;}
@keyframes ch-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}}
.chero-parts span{position:absolute;border-radius:50%;pointer-events:none;}
.chero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,14,.92) 0%,rgba(10,11,14,.6) 45%,rgba(10,11,14,.15) 100%);z-index:2;}
.chero-floor{position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(180deg,rgba(36,40,46,0) 0%,#16181C 92%);z-index:2;}

/* ---------------- Heat: embers, heat haze, frost burning off ---------------- */
.h-heat .chero-glow{background:radial-gradient(ellipse at center,rgba(255,122,69,.34) 0%,rgba(255,122,69,.10) 42%,rgba(255,122,69,0) 68%);}
.h-heat .chero-haze{position:absolute;inset:-25%;
  background:repeating-linear-gradient(101deg,rgba(255,145,99,.11) 0 2px,transparent 2px 15px);
  -webkit-mask-image:radial-gradient(ellipse at 44% 76%,#000 6%,transparent 66%);
  mask-image:radial-gradient(ellipse at 44% 76%,#000 6%,transparent 66%);
  animation:ch-haze 10s linear infinite;}
@keyframes ch-haze{to{background-position:240px -70px;}}
.h-heat .chero-frost{position:absolute;inset:0;
  background:radial-gradient(circle at 6% 6%,rgba(228,225,218,.26) 0%,transparent 25%),
             radial-gradient(circle at 95% 10%,rgba(228,225,218,.20) 0%,transparent 22%),
             radial-gradient(circle at 88% 92%,rgba(228,225,218,.16) 0%,transparent 20%);
  animation:ch-frost 15s ease-in-out infinite;}
@keyframes ch-frost{0%,8%{opacity:1;}48%,62%{opacity:.06;}100%{opacity:1;}}
.h-heat .chero-parts span{background:radial-gradient(circle,#FFD3B0 0%,var(--acc) 45%,rgba(255,122,69,0) 72%);
  animation-name:ch-ember;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes ch-ember{0%{transform:translate3d(0,0,0) scale(1);opacity:0;}
                    10%{opacity:.95;}
                    70%{opacity:.7;}
                    100%{transform:translate3d(var(--dx),-620px,0) scale(.35);opacity:0;}}
.h-heat h1 em{animation:ch-emberglow 5s ease-in-out infinite;}
@keyframes ch-emberglow{0%,100%{text-shadow:0 0 26px rgba(255,122,69,.30);}50%{text-shadow:0 0 46px rgba(255,122,69,.62);}}

/* ---------------- Solar: sun, sweeping rays, drifting light ---------------- */
.h-solar .chero-glow{left:74%;top:24%;width:min(820px,108vw);height:560px;
  background:radial-gradient(circle at center,rgba(255,236,176,.55) 0%,rgba(255,214,110,.30) 14%,rgba(255,201,70,.12) 28%,rgba(255,197,51,.03) 44%,rgba(255,197,51,0) 58%);}
.h-solar .chero-rays{position:absolute;right:12%;top:16%;left:auto;bottom:auto;
  width:132px;height:132px;--rs:5.6;
  /* the fan occupies the sun's exact box, then scales about its own centre,
     so it stays locked concentric with the disc at every viewport width
     rather than being placed by a guessed percentage */
  background:conic-gradient(from -10deg at 50% 50%,rgba(255,222,140,0) 1.25deg,rgba(255,222,140,0.2) 4.00deg,rgba(255,222,140,0) 6.75deg,rgba(255,222,140,0) 21.50deg,rgba(255,222,140,0.13) 23.00deg,rgba(255,222,140,0) 24.50deg,rgba(255,222,140,0) 34.75deg,rgba(255,222,140,0.17) 38.00deg,rgba(255,222,140,0) 41.25deg,rgba(255,222,140,0) 58.70deg,rgba(255,222,140,0.11) 60.00deg,rgba(255,222,140,0) 61.30deg,rgba(255,222,140,0) 73.50deg,rgba(255,222,140,0.19) 76.00deg,rgba(255,222,140,0) 78.50deg,rgba(255,222,140,0) 97.30deg,rgba(255,222,140,0.12) 99.00deg,rgba(255,222,140,0) 100.70deg,rgba(255,222,140,0) 115.00deg,rgba(255,222,140,0.16) 118.00deg,rgba(255,222,140,0) 121.00deg,rgba(255,222,140,0) 140.60deg,rgba(255,222,140,0.1) 142.00deg,rgba(255,222,140,0) 143.40deg,rgba(255,222,140,0) 158.70deg,rgba(255,222,140,0.15) 161.00deg,rgba(255,222,140,0) 163.30deg,rgba(255,222,140,0) 180.40deg,rgba(255,222,140,0.12) 182.00deg,rgba(255,222,140,0) 183.60deg,rgba(255,222,140,0) 202.20deg,rgba(255,222,140,0.17) 205.00deg,rgba(255,222,140,0) 207.80deg,rgba(255,222,140,0) 226.70deg,rgba(255,222,140,0.1) 228.00deg,rgba(255,222,140,0) 229.30deg,rgba(255,222,140,0) 244.90deg,rgba(255,222,140,0.14) 247.00deg,rgba(255,222,140,0) 249.10deg,rgba(255,222,140,0) 268.50deg,rgba(255,222,140,0.11) 270.00deg,rgba(255,222,140,0) 271.50deg,rgba(255,222,140,0) 289.40deg,rgba(255,222,140,0.16) 292.00deg,rgba(255,222,140,0) 294.60deg,rgba(255,222,140,0) 314.60deg,rgba(255,222,140,0.1) 316.00deg,rgba(255,222,140,0) 317.40deg,rgba(255,222,140,0) 332.80deg,rgba(255,222,140,0.13) 335.00deg,rgba(255,222,140,0) 337.20deg,rgba(255,222,140,0) 352.50deg,rgba(255,222,140,0.11) 354.00deg,rgba(255,222,140,0) 355.50deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,rgba(0,0,0,.9) 12%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.18) 46%,transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,rgba(0,0,0,.9) 12%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.18) 46%,transparent 62%);
  transform-origin:50% 50%;transform:scale(5.6);
  animation:ch-rayfan 22s ease-in-out infinite;}
@media(max-width:768px){.h-solar .chero-rays{right:6%;top:8%;width:88px;height:88px;--rs:5.2;transform:scale(5.2);}}
@keyframes ch-rayfan{0%,100%{opacity:.26;transform:scale(var(--rs,6)) rotate(-1.1deg);}50%{opacity:.46;transform:scale(calc(var(--rs,6) * 1.03)) rotate(1.1deg);}}
.h-solar .chero-disc{position:absolute;right:12%;top:16%;width:132px;height:132px;border-radius:50%;
  /* a white-hot core, not a flat pale disc - it was reading as a moon */
  background:radial-gradient(circle,#FFFBEF 0%,#FFEFB8 22%,var(--acc) 52%,rgba(255,197,51,.42) 72%,rgba(255,197,51,0) 100%);
  box-shadow:0 0 90px 30px rgba(255,214,110,.34),0 0 190px 80px rgba(255,201,70,.18),0 0 300px 140px rgba(255,197,51,.09);
  animation:ch-discpulse 6s ease-in-out infinite;}
/* a soft bloom rather than hard spokes - the conic rays read as one stray line */
.h-solar .chero-disc::before{content:'';position:absolute;inset:-70%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,176,.34) 0%,rgba(255,214,110,.18) 38%,rgba(255,197,51,.06) 60%,rgba(255,197,51,0) 76%);
  animation:ch-sunbreath 8s ease-in-out infinite;pointer-events:none;}
@keyframes ch-sunbreath{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}
@keyframes ch-discpulse{0%,100%{transform:scale(.97);filter:blur(.4px);}50%{transform:scale(1.06);filter:blur(0);}}
.h-solar .chero-parts span{background:radial-gradient(circle,#FFF3C9 0%,var(--acc) 50%,rgba(255,197,51,0) 74%);
  animation-name:ch-mote;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
@keyframes ch-mote{0%{transform:translate3d(0,0,0);opacity:0;}
                   18%{opacity:.9;}
                   82%{opacity:.55;}
                   100%{transform:translate3d(var(--dx),-260px,0);opacity:0;}}
.h-solar h1 em{animation:ch-sunglow 5.5s ease-in-out infinite;}
@keyframes ch-sunglow{0%,100%{text-shadow:0 0 24px rgba(255,197,51,.28);}50%{text-shadow:0 0 44px rgba(255,197,51,.58);}}

@media(max-width:760px){
  .chero{min-height:auto;padding:3.2rem 1.25rem 3rem;}
  .h-solar .chero-disc{width:88px;height:88px;right:6%;top:8%;}
}
@media(prefers-reduced-motion:reduce){
  .chero-glow,.chero-haze,.chero-frost,.chero-rays,.chero-disc,.chero-parts span,.chero h1 em{animation:none !important;}
  .chero .land-eyebrow,.chero h1,.chero .sub,.chero .hero-cta,.chero .land-note{opacity:1 !important;animation:none !important;}
  .chero-parts{display:none;}
  .chero-rays{opacity:.3;transform:scale(var(--rs,6));}
}