/**
 * AM2027 — hero banner.
 * Layers, back to front: sky (drifting tile) → skyline cutout + rippling water
 * + specular shimmer → white scrim → copy, weather badge, scroll cue.
 */

.hero{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(520px,58vw,700px);background:#8FBEDF;
}
.hero-copy{position:relative;z-index:3;width:100%;padding:0 34px 92px}
.hero-copy-in{max-width:620px;width:100%}
.hero h1{
  margin:0;font-size:calc((clamp(34px,3.8vw,56px)) * var(--fs,1));line-height:.98;font-weight:800;
  letter-spacing:-.015em;text-transform:uppercase;white-space:nowrap;
}
.hero h1 em{font-style:normal;color:var(--teal)}

/* Wordmark in place of the headline text. Width-driven and capped by the copy
   column, so the logo scales with the hero rather than at a fixed pixel size.
   `height:auto` with the intrinsic width/height on the <img> keeps the aspect
   ratio and reserves space, so the hero copy does not jump as it loads. */
.hero-logo{margin:0 0 18px;line-height:0}
.hero-logo img{
  width:min(100%,520px);height:auto;display:block;
}
.hero .tagline{
  margin:22px 0 0;font-size:calc((clamp(19px,1.7vw,24px)) * var(--fs,1));line-height:1.28;
  font-weight:500;color:#0047bb;
}
.facts{margin:30px 0 0;display:grid;gap:14px}
.fact{display:flex;align-items:center;gap:13px;font-size:calc((16px) * var(--fs,1));font-weight:500;color:var(--navy)}
.fact svg{width:19px;height:19px;color:var(--teal);flex:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}

/* ---------- animated sky: one seamless 1600px tile drifting left → right ---------- */
.hero-sky{position:absolute;inset:0;z-index:0;overflow:hidden}
.sky-strip{
  position:absolute;top:0;bottom:0;left:0;width:calc(100% + 1600px);
  background:url(../images/hero-sky.jpg) repeat-x;
  background-size:1600px 100%;
  transform:translate3d(-1600px,0,0);
  animation:skyDrift 110s linear infinite;
  will-change:transform;
}
@keyframes skyDrift{
  from{transform:translate3d(-1600px,0,0)}
  to  {transform:translate3d(0,0,0)}
}

/* ---------- skyline cutout, pinned to the bottom of the banner ---------- */
.hero-skyline{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;min-width:1080px;z-index:1;pointer-events:none;
}
.hero-skyline img{width:100%;height:auto}

/* ---------- water: same photo, masked to the water band, warped by an SVG filter ---------- */
.hero-water{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;min-width:1080px;aspect-ratio:1920/142;
  z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:var(--water-mask);mask-image:var(--water-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  filter:url(#waterRipple);
}
.hero-water img{position:absolute;left:0;bottom:0;width:100%;height:auto}

/* ---------- drifting specular streaks ---------- */
.water-shimmer{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;min-width:1080px;aspect-ratio:1920/142;
  z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:var(--water-mask);mask-image:var(--water-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.water-shimmer i{
  position:absolute;top:0;bottom:0;left:0;display:block;
  background:url(../images/water-shimmer.png) repeat-x;
  will-change:transform;
}
.water-shimmer .s1{
  width:calc(100% + 1200px);background-size:1200px 100%;opacity:.88;
  animation:rippleA 15s linear infinite;
}
.water-shimmer .s2{
  width:calc(100% + 820px);background-size:820px 100%;opacity:.58;
  animation:rippleB 10s linear infinite;
}
@keyframes rippleA{from{transform:translate3d(-1200px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes rippleB{from{transform:translate3d(0,0,0)}    to{transform:translate3d(-820px,0,0)}}

/* ---------- scrim ---------- */
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 24%,
      rgba(255,255,255,.72) 40%,
      rgba(255,255,255,.28) 54%,
      rgba(255,255,255,0) 66%);
  /* Thin the scrim out over the water so the ripples aren't washed away. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.28) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 60%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.28) 100%);
}

/* ---------- live weather badge ---------- */
/* Everything scales off --bw, so one number resizes the whole badge.
   Text positions are percentages of the artwork, measured from it. */
/* Everything an editor can change is read from a custom property with the
   shipped artwork's own value as the fallback. The ratio has to follow the
   picture: the badge is a fixed width, so a replacement of different
   proportions would otherwise be squashed into the old box. */
.wx-badge{
  --bw:238px;
  position:absolute;z-index:3;right:4.5%;bottom:65%;
  width:var(--bw);aspect-ratio:var(--badge-ratio, 1330/1182);
  color:var(--badge-temp-color, #fff);
  filter:drop-shadow(0 6px 18px rgba(6,30,60,.3));
}
.wx-badge > img{width:100%;height:auto;display:block}
.wx-read{
  position:absolute;
  left:var(--badge-temp-x, 53.3%);top:var(--badge-temp-y, 52.6%);
  transform:translate(-50%,-50%);
  display:flex;align-items:baseline;line-height:1;
  color:var(--badge-temp-color, #fff);
  text-shadow:var(--badge-temp-shadow, 0 2px 5px rgba(4,26,56,.45));
}
.wx-read .num{font-size:calc(var(--bw)*.1880);font-weight:800;letter-spacing:-.02em}
.wx-read .deg{
  font-size:calc(var(--bw)*.0954);font-weight:700;
  align-self:flex-start;margin-top:calc(var(--bw)*.0254);
}
.wx-read .f{font-size:calc(var(--bw)*.0909);font-weight:700;margin-left:calc(var(--bw)*.0073)}
.wx-cond{
  position:absolute;
  left:var(--badge-cond-x, 40.9%);top:var(--badge-cond-y, 65.6%);
  transform:translate(-50%,-50%);
  font-family:'Yellowtail','Brush Script MT','Segoe Script',cursive;
  font-size:calc(var(--bw)*.1345);
  white-space:nowrap;
  color:var(--badge-cond-color, #fff);
  text-shadow:var(--badge-cond-shadow, 0 2px 5px rgba(4,26,56,.45));
}
/* A long condition is set smaller and nudged right. The nudge is relative to
   wherever the editor put the line, not an absolute position, so it survives
   the text being moved. */
.wx-cond.long{font-size:calc(var(--bw)*.0890);left:calc(var(--badge-cond-x, 40.9%) + 2.1%)}
.wx-badge.is-loading .wx-read,.wx-badge.is-loading .wx-cond{opacity:.45}
.wx-badge.is-off .deg,.wx-badge.is-off .f{display:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero{min-height:0;align-items:flex-start}
  .hero-copy{padding:40px 24px 240px}
  .hero-copy-in{max-width:none}
  .hero-logo img{width:min(100%,400px)}
  .hero-skyline,.hero-water,.water-shimmer{min-width:940px}
  .hero-scrim{background:linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.86) 38%,
      rgba(255,255,255,.34) 60%,
      rgba(255,255,255,0) 76%)}
  .wx-badge{--bw:144px;right:14px;bottom:14px;top:auto}
}

@media(prefers-reduced-motion:reduce){
  .sky-strip{animation:none}
  .hero-water{filter:none}
  .water-shimmer .s1,.water-shimmer .s2{animation:none}
  html{scroll-behavior:auto}
}