/* ============================================================
   Hero slider — brand slide + five documented industry firsts.
   Replaces the former 41 MB autoplay hero video.
   Loaded on index.html only. Pairs with assets/hero-slider.js
   ============================================================ */

/* --- Stage ------------------------------------------------- */
/* The base .hero is a centring flex box with its own padding. The slider
   needs each slide to own the full stage instead, so the background image
   fills edge to edge — so neutralise those two here and re-apply the
   padding on the slide.                                                  */
.hero-slider{
  position:relative;
  isolation:isolate;
  display:block;
  padding:0;
  --hero-stage:calc(100vh - 130px);
}
.hero-slider .hero-slides{
  display:grid;              /* all slides stack in one cell   */
  width:100%;
}
.hero-slider .hero-slide{
  grid-area:1 / 1;
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  min-height:var(--hero-stage);
  padding:96px 0 104px;      /* bottom clears the controls row */
  opacity:0;
  visibility:hidden;
  transition:opacity 620ms ease;
  pointer-events:none;
}
.hero-slider .hero-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  position:relative;
  z-index:1;
}

/* No-JS / pre-JS: show the first slide and let the rest stack
   below rather than vanish. JS adds .js-ready to take over.   */
.hero-slider:not(.js-ready) .hero-slide{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.hero-slider:not(.js-ready) .hero-slides{
  display:block;
}

/* --- Background image -------------------------------------- */
.hero-slider .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-slider .hero-bg picture,
.hero-slider .hero-bg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
/* Scrim — the base .hero-bg::after gradient is tuned for a dark video.
   Photography is brighter and busier, so deepen it for text legibility. */
.hero-slider .hero-bg::after{
  background:
    linear-gradient(95deg,
      rgba(0,20,38,.88) 0%,
      rgba(0,25,45,.72) 30%,
      rgba(0,45,80,.38) 58%,
      rgba(0,51,89,.10) 82%),
    linear-gradient(0deg,
      rgba(0,20,38,.55) 0%,
      rgba(0,20,38,.10) 34%,
      rgba(0,20,38,0) 60%);
}

/* Slow drift on the active slide — stopped for reduced motion */
.hero-slider.js-ready .hero-slide.is-active .hero-bg img{
  animation:heroDrift 14s ease-out forwards;
}
@keyframes heroDrift{
  from{ transform:scale(1.045); }
  to  { transform:scale(1); }
}

/* --- Copy --------------------------------------------------- */
.hero-slider .hero-inner{
  position:relative;
  z-index:1;
  width:100%;
}
.hero-slider .hero-copy{
  max-width:620px;
}
/* The base h1 carries a 160px bottom margin to clear the old hero video's
   animated wordmark. With the video gone that is dead space — bring the
   brand slide back into the same rhythm as the story slides.            */
.hero-slider .hero-copy h1{
  margin-bottom:22px;
}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *{
  animation:heroCopyIn 620ms cubic-bezier(.22,.61,.36,1) both;
}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(1){animation-delay:60ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(2){animation-delay:130ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(3){animation-delay:200ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(4){animation-delay:265ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(5){animation-delay:325ms}
.hero-slider.js-ready .hero-slide.is-active .hero-copy > *:nth-child(6){animation-delay:380ms}
@keyframes heroCopyIn{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* Badges + location line */
.hero-slider .hero-flags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.hero-slider .hero-badge{
  display:inline-block;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  background:var(--teal);
  color:#fff;
}
.hero-slider .hero-badge--world{
  background:var(--coral);
}
.hero-slider .hero-loc{
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(255,255,255,.86);
}
.hero-slider .hero-loc .flag{
  font-size:14px;
  margin-right:3px;
}

/* Story headline — matches the h1 scale of the brand slide */
.hero-slider .hero-title{
  font-family:var(--font-display);
  font-size:clamp(38px, 6vw, 76px);
  line-height:.97;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 14px;
  text-wrap:balance;
}
.hero-slider .hero-title .first-word{
  color:var(--teal-light);
}
.hero-slider .hero-project{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.8);
  margin:0 0 16px;
}
.hero-slider .hero-copy .lede{
  max-width:56ch;
}
.hero-slider .hero-source{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.68);
}
.hero-slider .hero-source .dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.5);
}

/* --- Controls ------------------------------------------------ */
.hero-slider .hero-controls{
  position:absolute;
  left:0; right:0;
  bottom:28px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 20px;
}
.hero-slider .hero-arrow,
.hero-slider .hero-playpause{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;      /* 44px minimum touch target */
  flex:0 0 auto;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  background:rgba(0,28,48,.42);
  color:#fff;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.hero-slider .hero-arrow:hover,
.hero-slider .hero-playpause:hover{
  background:var(--teal);
  border-color:var(--teal);
}
.hero-slider .hero-arrow:active{ transform:scale(.94); }
.hero-slider .hero-arrow:focus-visible,
.hero-slider .hero-playpause:focus-visible,
.hero-slider .hero-dot:focus-visible{
  outline:2px solid var(--teal-light);
  outline-offset:3px;
}
.hero-slider .hero-playpause{ width:38px;height:38px; }
.hero-slider .hero-playpause .ico-play{ display:none; }
.hero-slider .hero-playpause[aria-pressed="true"] .ico-play{ display:block; }
.hero-slider .hero-playpause[aria-pressed="true"] .ico-pause{ display:none; }

/* Dots — each is a progress bar for the active slide */
.hero-slider .hero-dots{
  display:flex;
  align-items:center;
  gap:8px;
}
/* The button is a full 44px-tall touch target; the visible bar is the
   .track inside it, so the hit area is never clipped by the bar's
   overflow:hidden.                                                     */
.hero-slider .hero-dot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:width 260ms ease;
}
.hero-slider .hero-dot .track{
  display:block;
  position:relative;
  width:100%;
  height:4px;
  border-radius:3px;
  background:rgba(255,255,255,.34);
  overflow:hidden;
  transition:background 200ms ease;
}
.hero-slider .hero-dot[aria-selected="true"]{
  width:58px;
}
.hero-slider .hero-dot[aria-selected="true"] .track{
  background:rgba(255,255,255,.28);
}
.hero-slider .hero-dot .bar{
  position:absolute;
  inset:0;
  width:0;
  background:var(--teal);
  border-radius:3px;
}
.hero-slider .hero-dot[aria-selected="true"] .bar{
  width:100%;
  transform-origin:left center;
}
.hero-slider .hero-dot[aria-selected="true"] .bar.run{
  animation:heroDotFill var(--hero-dur,7000ms) linear forwards;
}
@keyframes heroDotFill{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
/* Paused: hold the bar where it is */
.hero-slider.is-paused .hero-dot .bar.run{
  animation-play-state:paused;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width:900px){
  .hero-slider{ --hero-stage:56vh; }
  .hero-slider .hero-slide{ padding:56px 0 76px; }
  .hero-slider .hero-copy{ max-width:100%; }
  .hero-slider .hero-title{ font-size:clamp(28px,7vw,44px); }
}
@media (max-width:640px){
  /* On phones the image is what makes the hero — show it in full at the
     top of the slide, then the copy in a navy panel below.  This replaces
     the overlay-on-image layout, which buried the photo behind the scrim. */
  .hero-slider{ --hero-stage:auto; }
  .hero-slider .hero-slide{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:0;
    min-height:auto;
  }
  /* Image band — relative-positioned block at the top of the slide */
  .hero-slider .hero-bg{
    position:relative;
    inset:auto;
    height:240px;
    flex:0 0 240px;
  }
  .hero-slider .hero-bg img{ object-position:center 45%; }
  /* Very light bottom-only fade so the image blends into the copy panel */
  .hero-slider .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(0,20,38,0) 0%,
      rgba(0,20,38,0) 62%,
      rgba(0,20,38,0.55) 100%);
  }
  /* Copy panel below the image, sitting on the hero's navy background */
  .hero-slider .hero-inner{
    flex:1 1 auto;
    padding:22px 18px 76px;   /* bottom clears the controls row */
  }
  .hero-slider .hero-copy{ max-width:100%; padding-bottom:0; }
  /* Big text as requested */
  .hero-slider .hero-title{
    font-size:clamp(28px,8vw,42px);
    line-height:1.02;
  }
  .hero-slider .hero-copy .lede{
    font-size:14px;
    line-height:1.5;
    margin-bottom:14px;
  }
  .hero-slider .hero-source{ font-size:11px; margin-top:6px; }
  /* Much smaller CTA buttons */
  .hero-slider .hero-actions{
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }
  .hero-slider .hero-actions .btn{
    padding:7px 12px;
    font-size:10.5px;
    letter-spacing:1px;
    line-height:1.2;
    min-height:0;
  }
  /* Controls sit at the bottom of the copy panel */
  .hero-slider .hero-controls{
    bottom:14px;
    gap:8px;
    padding:0 16px;
  }
  .hero-slider .hero-arrow{ width:34px;height:34px; }
  .hero-slider .hero-playpause{ display:none; }
  .hero-slider .hero-dot{ width:18px; }
  .hero-slider .hero-dot[aria-selected="true"]{ width:30px; }
}

/* --- Motion / contrast preferences --------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-slider .hero-slide{ transition:none; }
  .hero-slider.js-ready .hero-slide.is-active .hero-bg img,
  .hero-slider.js-ready .hero-slide.is-active .hero-copy > *{
    animation:none;
  }
  .hero-slider .hero-dot .bar.run{ animation:none; }
  .hero-slider .hero-dot[aria-selected="true"] .bar{ transform:scaleX(1); }
}
@media (prefers-contrast:more){
  .hero-slider .hero-loc,
  .hero-slider .hero-project,
  .hero-slider .hero-source{ color:#fff; }
}