/* ============================================================
   Kangen Water — Hero section (home page only)
   A full-width poster carousel. The selling copy is real HTML over
   wordless artwork, so it translates and is never cropped.
   Shared nav/footer/button/section styles live in main.css.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* sized by the artwork, not by the viewport */
  padding: var(--nav-h) 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 55%, #e9f6fd 100%);
}

/* the block right after the hero starts on the hero's own bottom colour so the
   hero->content boundary is seamless too. The credential ribbon now sits in
   between, so the section below it picks up the ribbon's bottom edge instead. */
.hero + .section {
  background: linear-gradient(180deg, #e9f6fd 0%, #ffffff 22%);
}
.hero + .marquee + .section {
  background: linear-gradient(180deg, #e4f2f9 0%, #ffffff 20%);
}

/* ============================================================
   THE HERO — a full-width poster carousel.
   (An animated-waves alternative used to sit behind a switch here;
   the client only wanted the carousel, so it was removed.)
   ============================================================ */
.hero-design--photo { display: block; }

.hero-carousel {
  position: relative;
  width: 100%;
  /* every slide is normalised to 16:9, so the box never jumps */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* The slides sit in a row and the whole row slides right-to-left, so each
   poster travels off to the left as the next one arrives from the right. */
.hero-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
/* used when jumping the clone back to the real slide — no visible rewind */
.hero-track.no-anim { transition: none; }

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------- SLIDE COPY
   Every one of these compositions puts the machine right of centre and
   leaves the other side open, so the words go in that gap and never over
   the product. data-copy picks the gap: "left" for most of them, "mid" for
   the two that are built around a centred headline. The panel is purely
   decorative to the pointer -- nothing in the carousel is clickable. */
.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* +58px so the copy always clears the left arrow, which is vertically
     centred and would otherwise land on the headline */
  padding-left: calc(clamp(20px, 5vw, 74px) + 58px);
  padding-right: 47%;
  pointer-events: none;
  /* the hero centres its own copy card; this panel is a left column */
  text-align: left;
}
.hero-slide[data-copy="mid"] .hero-copy {
  padding-left: 20%;
  padding-right: 34%;
  justify-content: center;
  text-align: center;
}

/* A wash under the type only, fading out well before the machine, so busy
   artwork can never eat the headline. */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-slide[data-tone="light"] .hero-copy::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.66) 32%, rgba(255, 255, 255, 0) 62%);
}
.hero-slide[data-tone="dark"] .hero-copy::before {
  background: linear-gradient(90deg, rgba(3, 22, 38, 0.82) 0%, rgba(3, 22, 38, 0.5) 36%, rgba(3, 22, 38, 0) 66%);
}
.hero-slide[data-copy="mid"][data-tone="light"] .hero-copy::before {
  background: radial-gradient(58% 74% at 34% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 46%, rgba(255, 255, 255, 0) 78%);
}
.hero-slide[data-copy="mid"][data-tone="dark"] .hero-copy::before {
  background: radial-gradient(58% 78% at 34% 50%, rgba(3, 22, 38, 0.72) 0%, rgba(3, 22, 38, 0.4) 48%, rgba(3, 22, 38, 0) 80%);
}

.hero-copy__inner { position: relative; max-width: 100%; }

.hero-copy__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.64rem, 0.86vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-copy__title {
  margin: 0.5em 0 0.34em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.05vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero-copy__sub {
  margin: 0;
  font-size: clamp(0.84rem, 1.12vw, 1.06rem);
  line-height: 1.5;
  max-width: 36ch;
}
.hero-slide[data-copy="mid"] .hero-copy__sub { margin-inline: auto; }

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
  margin: clamp(13px, 1.7vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}
.hero-slide[data-copy="mid"] .hero-chips { justify-content: center; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  font-size: clamp(0.68rem, 0.83vw, 0.81rem);
  font-weight: 600;
  line-height: 1.25;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-chip__icon { display: inline-flex; }
.hero-chip svg { width: 15px; height: 15px; }

/* light artwork -> ink type */
.hero-slide[data-tone="light"] .hero-copy { color: var(--ink); }
.hero-slide[data-tone="light"] .hero-copy__eyebrow { color: #0b6f9e; }
.hero-slide[data-tone="light"] .hero-copy__sub { color: rgba(6, 40, 58, 0.78); }
.hero-slide[data-tone="light"] .hero-chip {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(11, 130, 196, 0.24);
  color: #0a4f72;
}
/* dark artwork -> white type */
.hero-slide[data-tone="dark"] .hero-copy { color: #fff; }
.hero-slide[data-tone="dark"] .hero-copy__eyebrow { color: #8fd9f5; }
.hero-slide[data-tone="dark"] .hero-copy__sub { color: rgba(233, 246, 253, 0.85); }
.hero-slide[data-tone="dark"] .hero-chip {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #eaf6fd;
}

/* ---------------------------------------------------------- ARROWS */
/* Sit inside the frame, clear of the copy panel, which never reaches the edge.
   Frosted rather than solid so they read over a light or a dark photograph. */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(6, 40, 58, 0.18);
  opacity: 0.82;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-out);
}
.hero-arrow svg { width: 24px; height: 24px; display: block; }
.hero-arrow--prev { left: clamp(10px, 2vw, 22px); }
.hero-arrow--next { right: clamp(10px, 2vw, 22px); }
.hero-carousel:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.62);
  transform: translateY(-50%) scale(1.06);
}
.hero-arrow:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; opacity: 1; }
/* Nothing to step through without JS, and no second design to sit in. */
html:not(.js) .hero-arrow { display: none; }

/* ---------------------------------------------------------- SELECTOR */
.hero-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  /* a long row of dots must wrap rather than run off a narrow screen */
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 16px 22px;
  background: linear-gradient(180deg, #eaf4fb 0%, #ffffff 100%);
}
.hero-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 40, 58, 0.20);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s var(--ease-out), width 0.3s var(--ease-out);
}
.hero-dot:hover { background: rgba(6, 40, 58, 0.38); transform: scale(1.15); }
.hero-dot.is-active {
  width: 30px;
  border-radius: 999px;
  background: var(--accent-grad);
  box-shadow: 0 3px 10px rgba(18, 181, 229, 0.35);
}
.hero-dot:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

/* With JS off, stack the slides so every poster is still reachable. */
html:not(.js) .hero-carousel { aspect-ratio: auto; }
html:not(.js) .hero-slide { position: relative; opacity: 1; }
html:not(.js) .hero-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ---------------------------------------------------------- RESPONSIVE */

/* The gap beside the machine is a share of the width, so it shrinks with the
   viewport. Below this the copy needs more of it and one chip fewer. */
@media (max-width: 900px) {
  .hero-copy { padding-right: 43%; }
  .hero-slide[data-copy="mid"] .hero-copy { padding-left: 15%; padding-right: 26%; }
  /* All four properties matter to the client, so they wrap rather than drop. */
}

@media (max-width: 700px) {
  /* A phone still wants a taller box than a 16:9 letterbox strip, but 4:3 cost
     a quarter of the width and sliced the leftmost athlete in half. 3:2 gives
     up 16% instead. */
  .hero-carousel { aspect-ratio: 3 / 2; }

  /* There is no empty half left to write in once the picture is cropped this
     hard, so the copy moves to the foot of the frame over a gradient. Same
     treatment on every slide, light or dark, so the box never jumps. */
  .hero-copy,
  .hero-slide[data-copy="mid"] .hero-copy {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding: 0 16px 15px;
  }
  /* Every one of these has to out-specify the [data-tone] rules above, or the
     light slides keep their left-to-right white wash and the type turns white
     on white. Matching the attribute selector and coming later does it. */
  .hero-slide[data-tone][data-copy] .hero-copy::before {
    background: linear-gradient(180deg, rgba(3, 26, 42, 0) 30%, rgba(3, 26, 42, 0.38) 58%, rgba(3, 26, 42, 0.88) 100%);
  }
  .hero-slide[data-tone] .hero-copy,
  .hero-slide[data-tone] .hero-copy__title { color: #fff; }
  .hero-slide[data-tone] .hero-copy__eyebrow { color: #9fe0f7; }
  .hero-slide[data-tone] .hero-copy__sub { display: none; }
  .hero-slide[data-tone] .hero-chip {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
  }
  .hero-copy__eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; }
  .hero-copy__title { font-size: clamp(1.1rem, 5vw, 1.55rem); margin: 0.35em 0 0; }
  .hero-chips { gap: 6px; margin-top: 10px; }
  .hero-slide[data-copy="mid"] .hero-chips { justify-content: flex-start; }
  .hero-chip { padding: 4px 10px 4px 7px; font-size: 0.66rem; gap: 5px; }
  .hero-chip svg { width: 13px; height: 13px; }
  /* Every chip stays: on a phone they wrap onto a second row. */
  /* The copy sits at the foot here, so the arrows move up into the picture
     instead of straddling the eyebrow line. */
  .hero-arrow { top: 30%; }
  .hero-copy { padding-left: clamp(16px, 5vw, 30px); }
  /* 42%, not centre: these compositions put the subject on the left and the
     machine right of centre, so the crop is biased left to keep the person in
     frame while still holding the whole machine. */
  .hero-slide img { object-fit: cover; object-position: 42% center; }

  .hero-dots { padding: 16px 14px 18px; }
  /* Smaller, and always visible: there is no hover on a phone. */
  .hero-arrow { width: 40px; height: 40px; opacity: 1; }
  .hero-arrow svg { width: 19px; height: 19px; }
}