/* ==========================================================================
   Animated hero banner — five slides, one per service
   Each slide has its own photo and its own headline. Auto-advances every 7s,
   pauses on hover, and hands control over the moment someone clicks.
   ========================================================================== */

.banner{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;
  padding:clamp(5.5rem,12vh,8.5rem) 0 clamp(1.75rem,4vh,2.75rem);
}

/* ---------- stage ---------- */
.banner__stage{position:absolute;inset:0;z-index:-2;overflow:hidden}
.banner__parallax{position:absolute;inset:0;z-index:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1);will-change:transform}
.banner__slides{position:absolute;inset:-3%}

.banner__slide{
  position:absolute;inset:0;margin:0;opacity:0;
  transform:scale(1.10);transform-origin:62% 55%;
  transition:opacity .9s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.banner__slide.is-active{
  opacity:1;transform:scale(1);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 7s linear;
}
.banner__slide img{width:100%;height:100%;object-fit:cover}

/* ---------- atmosphere ---------- */
.banner__ripple{position:absolute;inset:0;width:100%;height:100%;z-index:7;
  mix-blend-mode:screen;opacity:.6;pointer-events:none}

/* slow evening cycle — carries a still photo through warm light to nightfall */
.banner__tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.22;
  animation:bannerTint 40s ease-in-out infinite;
}
@keyframes bannerTint{
  0%   {background-color:#F0B65E}
  30%  {background-color:#B98F62}
  55%  {background-color:#4E7A93}
  78%  {background-color:#2B4E78}
  100% {background-color:#F0B65E}
}

.banner__rays{
  position:absolute;inset:-25%;z-index:5;pointer-events:none;
  opacity:.12;mix-blend-mode:screen;filter:blur(26px);
  background:repeating-linear-gradient(76deg,
    rgba(255,236,192,0) 0 90px,
    rgba(255,236,192,.55) 122px,
    rgba(255,236,192,0) 172px);
  animation:bannerRays 46s linear infinite;
}
@keyframes bannerRays{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24%,0,0)}}

.banner__caustics{
  position:absolute;left:-20%;right:-20%;bottom:-8%;height:56%;z-index:5;pointer-events:none;
  opacity:.22;mix-blend-mode:screen;filter:blur(8px);
  background:
    repeating-linear-gradient(102deg,rgba(95,201,174,0) 0 26px,rgba(150,240,215,.5) 28px,rgba(95,201,174,0) 35px),
    repeating-linear-gradient(78deg,rgba(255,255,255,0) 0 34px,rgba(200,255,242,.32) 37px,rgba(255,255,255,0) 46px);
  animation:bannerCaustics 15s linear infinite;
}
@keyframes bannerCaustics{
  0%  {transform:translate3d(0,0,0) skewY(0deg)}
  50% {transform:translate3d(-46px,12px,0) skewY(1.3deg)}
  100%{transform:translate3d(-92px,0,0) skewY(0deg)}
}

.banner__orbs{position:absolute;inset:0;z-index:6;pointer-events:none}
.banner__orbs .orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,163,.95),rgba(217,164,65,.35) 40%,transparent 70%);
  filter:blur(1px);animation:drift var(--t,18s) ease-in-out infinite alternate;
}

.banner__koi{position:absolute;inset:auto 0 0;height:42%;z-index:6;pointer-events:none;
  opacity:.38;filter:blur(.4px);transition:opacity .8s var(--ease)}
/* koi only belong on the water slides */
.banner:not([data-slide="1"]):not([data-slide="4"]) .banner__koi{opacity:0}

.banner__grain{
  position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Flat scrim — knocks the whole frame down on the bright photos.
   Strength is set per slide further down. */
.banner__plate{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--plate,0);
  transition:opacity .9s var(--ease);
  background:linear-gradient(96deg,
    rgba(4,16,13,.94) 0%,
    rgba(4,16,13,.80) 20%,
    rgba(4,16,13,.42) 38%,
    rgba(4,16,13,.10) 54%,
    rgba(4,16,13,0) 68%);
}

.banner__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#04100D;opacity:var(--scrim,0);
  transition:opacity .9s var(--ease);
}

/* Directional veil. The headline, buttons and stats bar all sit on the left,
   so the gradient is weighted left and fades out toward the right of frame.
   --vL left strength · --vT top · --vB bottom. Tuned per photo below. */
.banner__veil{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  transition:opacity .9s var(--ease);
  background:
    linear-gradient(96deg,
      rgba(4,16,13,var(--vL,.6)) 0%,
      rgba(4,16,13,calc(var(--vL,.6) * .82)) 22%,
      rgba(4,16,13,calc(var(--vL,.6) * .40)) 42%,
      rgba(4,16,13,calc(var(--vL,.6) * .10)) 58%,
      rgba(4,16,13,0) 72%),
    linear-gradient(180deg,
      rgba(4,16,13,var(--vT,.4)) 0%,
      rgba(4,16,13,0) 22%,
      rgba(4,16,13,0) 55%,
      rgba(4,16,13,calc(var(--vB,.82) * .45)) 78%,
      rgba(4,16,13,var(--vB,.82)) 100%);
}

/* ---------- per-photo tuning ----------
   Measured from the actual images: average brightness of the area the text
   occupies, on a 0–255 scale.
     1  koi pond      29  — already dark, barely touched
     2  lighting      25  — already dark, barely touched
     3  holiday       71  — bright snow low in frame
     4  pressure     176  — daylight concrete, the bright one
     5  home care    107  — lamplight on the left, right where the headline sits */
.banner[data-slide="1"]{--vL:.60;--vT:.40;--vB:.82;--scrim:0;--plate:0}
.banner[data-slide="2"]{--vL:.62;--vT:.40;--vB:.82;--scrim:0;--plate:0}
.banner[data-slide="3"]{--vL:.74;--vT:.45;--vB:.86;--scrim:.10;--plate:.40}
.banner[data-slide="4"]{--vL:.88;--vT:.55;--vB:.92;--scrim:.26;--plate:.80}
.banner[data-slide="5"]{--vL:.76;--vT:.45;--vB:.88;--scrim:.12;--plate:.42}

/* ---------- copy ---------- */
.banner__inner{position:relative;z-index:2}
.banner__copies{display:grid}
.banner__copy{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(22px);
  transition:opacity .42s var(--ease),transform .6s var(--ease-out),visibility 0s linear .45s;
}
.banner__copy.is-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition-delay:.1s,.1s,0s;
}
.banner__copy h1{
  max-width:16ch;text-wrap:balance;text-shadow:0 2px 44px rgba(4,16,13,.55);
  clip-path:inset(0 0 106% 0);
  transition:clip-path .72s var(--ease-out) .12s;
}
.banner__copy.is-active h1{clip-path:inset(0 0 -10% 0)}
.banner__copy h1 em{font-style:italic;color:var(--water-lt);font-variation-settings:"SOFT" 100,"WONK" 1}
.banner__lede{
  max-width:50ch;margin-top:1rem;font-size:clamp(1.05rem,1rem + .4vw,1.28rem);
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 20px rgba(4,16,13,.85),0 1px 3px rgba(4,16,13,.6);
}
.banner__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.4rem,3vh,2rem)}

.banner .btn--ghost{background:rgba(4,16,13,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.banner .btn--ghost:hover{background:transparent}

.magnetic{transition:transform .35s var(--ease)}
.magnetic.is-pulled{transition:transform .12s linear}

/* ---------- trust grid ---------- */
.banner__trust{
  margin-top:clamp(1.6rem,3.6vh,2.75rem);
  display:grid;gap:1px;background:rgba(255,255,255,.16);
  grid-template-columns:repeat(4,1fr);border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px -20px rgba(4,16,13,.9);
}
.banner .trust{background:rgba(4,16,13,.5)}
.banner .trust:hover{background:rgba(36,92,74,.6)}

/* ---------- slide rail ---------- */
.banner__rail{
  margin-top:clamp(1.1rem,2.4vh,1.85rem);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.5rem,1.4vw,1.25rem);
}
.railitem{
  position:relative;text-align:left;padding:.85rem 0 0;color:rgba(255,255,255,.58);
  font-size:.8rem;font-weight:600;letter-spacing:.02em;line-height:1.3;
  transition:color .4s var(--ease),transform .4s var(--ease);
}
.railitem::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:2px;
  background:rgba(255,255,255,.22);
}
.railitem__fill{
  position:absolute;inset:0 0 auto 0;height:2px;border-radius:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;
}
.railitem:hover{color:#fff;transform:translateY(-2px)}
.railitem:hover::before{background:rgba(255,255,255,.4)}
.railitem.is-active{color:#fff}
.railitem.is-active .railitem__fill{animation:railFill var(--rotate,7000ms) linear forwards}
.railitem.is-done .railitem__fill{transform:scaleX(1)}
.banner.is-paused .railitem.is-active .railitem__fill{animation-play-state:paused}
.banner.is-manual .railitem.is-active .railitem__fill{animation:none;transform:scaleX(1)}
@keyframes railFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.railitem{text-shadow:0 1px 14px rgba(4,16,13,.9)}
.railitem small{display:block;font-weight:500;font-size:.72rem;color:rgba(255,255,255,.5);margin-top:.15rem}
.railitem.is-active small{color:rgba(255,255,255,.62)}

/* ---------- counter ---------- */
.banner__count{
  position:absolute;top:clamp(6.5rem,14vh,9.5rem);right:var(--pad);z-index:2;
  font-family:var(--display);font-size:.85rem;letter-spacing:.14em;color:rgba(255,255,255,.5);
}
.banner__count b{color:#fff;font-size:1.45rem;font-weight:600}

/* short laptop screens: keep the whole banner above the fold */
@media (max-height:920px){
  .banner .h-xl{font-size:clamp(2.3rem,1.4rem + 3.4vw,4.1rem)}
  .banner__lede{font-size:1.02rem}
  .banner .trust b{font-size:1.5rem}
  .banner .trust{padding:.9rem 1.1rem}
}
@media (max-width:1024px){.banner__trust{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .banner{min-height:auto}
  .banner__count{display:none}
  .banner__copy h1{max-width:none}
  .banner__rail{grid-template-columns:repeat(5,1fr);gap:.4rem}
  .railitem{font-size:0;padding-top:.7rem}          /* bars only on small screens */
  .railitem small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .banner__parallax{transform:none !important}
  .banner__slide.is-active{transform:none;transition:opacity .001ms}
  .banner__copy h1{clip-path:none !important}
  .banner__tint{animation:none;background-color:#2B4E78;opacity:.28}
  .banner__rays,.banner__caustics{animation:none}
  .banner__ripple,.banner__orbs{display:none}
  .railitem.is-active .railitem__fill{animation:none;transform:scaleX(1)}
}