/* ===========================================================
   Triveni Power - Hero (full-bleed video + 4-slide text rotator)
   - Background: looping muted video, always playing
   - Foreground: 4 text slides crossfade with auto-advance
   - Controls: dot indicators (with progress fill) + pause/play
   =========================================================== */

/* Wrapper that limits the sticky scope of the hero - once the user
   scrolls past Positioning, the wrapper ends and Hero unsticks so
   subsequent sections (Stats, Industries, ...) render normally. */
.hero-pin {
  position: relative;
}

.hero {
  /* Pinned to viewport top while inside .hero-pin. Positioning has
     a higher z-index so it slides up over the pinned hero on scroll. */
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: #FFFFFF;
  isolation: isolate;
}

/* =========================================================
   MEDIA - video background + dark gradient overlay
   ========================================================= */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms var(--ease-out);
  pointer-events: none;
}
.hero__bg[aria-hidden="false"] {
  opacity: 1;
}
/* <picture> stretches to fill the bg div so the <img> inside can be absolute */
.hero__bg picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__video,
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the focal point above center so on short laptop viewports
     the subject's head/upper body stays visible instead of being
     cropped equally from top and bottom. */
  object-position: center 28%;
  display: block;
  background: #0A0809;
}

/* Soft circular vignette anchored to the bottom-left corner where the
   slide text + CTA sit. Roughly a quarter-circle of dark tint that
   fades to transparent so banner imagery stays clean elsewhere, but
   the text + CTA always have enough contrast to read. */
.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 110% 95% at 0% 100%,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.64) 32%,
    rgba(0, 0, 0, 0.42) 60%,
    rgba(0, 0, 0, 0.12) 88%,
    rgba(0, 0, 0, 0.00) 100%
  );
}
/* On narrow viewports the text takes up more of the frame, so push
   the gradient slightly inward for fuller coverage of the text area. */
@media (max-width: 767px) {
  /* HOME HERO — full-bleed from the very top of the screen.
     The mobile header is normally sticky (in-flow, ~64px); on the home page
     we lift it out of flow and make it transparent so the hero image starts
     at the very top, with the nav overlaying it (like the desktop hero). It
     regains a solid background the moment the page is scrolled (.is-scrolled,
     toggled in nav.js). White logo + icons are forced since the hero is a
     dark photo, regardless of light/dark theme. */
  body.is-home .mnav { position: fixed; top: 0; left: 0; right: 0; }
  body.is-home .mnav:not(.is-scrolled) {
    background: transparent;
    color: #fff;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.is-home .mnav:not(.is-scrolled) .mnav__logo .logo-img--on-dark { display: block; }
  body.is-home .mnav:not(.is-scrolled) .mnav__logo .logo-img--on-light { display: none; }

  .hero {
    height: 100vh;            /* fallback for browsers without svh */
    height: 100svh;
    min-height: 0;
  }
  .hero__slides {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .hero__overlay {
    background:
      /* top scrim — keeps the overlaid nav legible over bright slides */
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 12%,
        rgba(0, 0, 0, 0.00) 26%
      ),
      /* bottom scrim — under the headline + CTA */
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 22%,
        rgba(0, 0, 0, 0.00) 42%
      ),
      radial-gradient(
        ellipse 200% 115% at 10% 100%,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.72) 34%,
        rgba(0, 0, 0, 0.50) 60%,
        rgba(0, 0, 0, 0.22) 82%,
        rgba(0, 0, 0, 0.00) 100%
      );
  }
}

/* =========================================================
   SLIDES - text only; left-aligned, vertically centered
   ========================================================= */
.hero__slides {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-items: end;          /* anchor headline + CTA to the bottom */
  justify-items: start;
  /* Bottom padding clears the progress-bar row that sits at bottom: var(--s-4). */
  padding: var(--s-5) var(--s-3) clamp(80px, 10vh, 120px);
  max-width: var(--container);
  margin: 0 auto;
  text-align: left;
}

.hero__slide {
  grid-area: 1 / 1;          /* stack all slides on top of each other */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: 100%;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out),
    visibility 520ms;
  pointer-events: none;
}
.hero__slide[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Stagger the CTA so it appears AFTER the slide reaches full
   opacity. backdrop-filter on the CTA mis-samples while the
   parent is partially transparent (visible as a flicker / pop
   in the orange tint at the start of each transition).
   ---
   Two-part fix:
   1. Delay the CTA fade-in past the slide's 520ms opacity ramp
   2. Force the CTA onto a permanent compositing layer (translateZ
      + will-change) so the backdrop-filter GPU surface stays
      warm and doesn't re-initialise on each slide change. */
.hero__slide .hero__btn,
.hero__slide .hero__ctas {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  will-change: opacity, transform, backdrop-filter;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out);
}
.hero__slide[aria-hidden="false"] .hero__btn,
.hero__slide[aria-hidden="false"] .hero__ctas {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 540ms;
}
/* On exit, hide instantly so the next slide's button can
   start its delayed fade-in from zero. */
.hero__slide[aria-hidden="true"] .hero__btn,
.hero__slide[aria-hidden="true"] .hero__ctas {
  transition-duration: 0ms;
  transition-delay: 0ms;
}

/* Title - Raleway display, regular weight, tight */
.hero__title {
  font-family: "Raleway", var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.5vw, 35px); /* fluid: matches all banners site-wide, no breakpoint jump */
  line-height: 1.12;
  letter-spacing: 0.01em;          /* tracking opens up slightly for caps */
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

/* Sub-headline under the slide title - one-sentence supporting copy.
   Negative top-margin counteracts most of the parent flex gap (16px)
   so it sits close to the title without crowding the CTA below. */
.hero__sub {
  margin: -10px 0 0;
  max-width: 56ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-m);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.40);
}
@media (max-width: 767px) {
  .hero__sub {
    font-size: var(--fs-s);
    max-width: 100%;
  }
}
.hero__title-accent {
  color: #FFFFFF;
}

.hero__subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  max-width: 720px;
  text-shadow: 0 1px 16px rgba(0,0,0,0.40);
}

/* Show/hide helpers for mobile vs desktop subhead variants */
.hero__sub-mob { display: none; }

/* CTAs - left aligned */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* =========================================================
   .hero__btn / --primary / --ghost / --accent
   All visual rules moved to css/buttons.css (canonical
   .btn--ghost and .btn--accent kinds). Aliased there.
   ========================================================= */

/* =========================================================
   BOTTOM BAR - wraps controls (left) + scroll hint (right)
   Aligned to the same container as the nav header.
   ========================================================= */
.hero__bottom {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  /* Lift the dots above the iOS home indicator / bottom toolbar. */
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* =========================================================
   CONTROLS - horizontal progress bars + pause/play
   ========================================================= */
.hero__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;                  /* stretch the controls row across the bottom bar */
}

/* Each "dot" is a thin horizontal track button - flex-grows to fill the row
   evenly, matching the wide-bar style from the reference. */
.hero__dot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 14px;             /* enlarged hit-target; visual track is centered */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hero__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: rgba(255,255,255,0.30);
  border-radius: 2px;
  transition: background var(--dur-fast) var(--ease-out);
}
.hero__dot:hover::before { background: rgba(255,255,255,0.55); }
.hero__dot[aria-current="true"]::before { background: rgba(255,255,255,0.20); }

/* Orange fill - driven by --p (0..100) set in JS */
.hero__dot-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  width: calc(var(--p, 0) * 1%);
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.hero__dot[aria-current="true"] .hero__dot-fill { opacity: 1; }

/* Pause button */
.hero__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.78);
  margin-left: 6px;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero__pause:hover { background: rgba(255,255,255,0.10); color: #FFFFFF; }
.hero__pause-icon { width: 12px; height: 12px; }
.hero__pause-icon--play { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--play  { display: block; }

/* =========================================================
   SCROLL HINT - mouse icon + "Scroll down" label
   ========================================================= */
.hero__scroll-hint {
  display: none;          /* shown ≥1024 below */
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.78);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero__scroll-hint:hover {
  color: #FFFFFF;
  transform: translateY(2px);
}

/* Mouse outline */
.hero__scroll-mouse {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  flex-shrink: 0;
}
/* Inner wheel dot - bounces vertically to suggest scrolling */
.hero__scroll-wheel {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: heroScrollWheel 1.6s var(--ease-io) infinite;
}
@keyframes heroScrollWheel {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  70%  { opacity: 0; transform: translate(-50%, 10px); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

.hero__scroll-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* =========================================================
   BREAKPOINTS
   ========================================================= */

/* ── Mobile: push text + CTAs to the bottom so the image
      shows clearly in the top portion of the frame ────────── */
@media (max-width: 767px) {
  .hero__slides {
    align-items: end;                              /* stick content to bottom */
    padding-top: var(--s-3);
    /* Clears the dots bar AND the iOS bottom toolbar / home indicator.
       The flat 72px dropped the safe-area inset that the base rule set,
       which let the CTA fall under Safari's bottom bar on iPhone. */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  /* Portrait mobile images - anchor to top so faces are never clipped */
  .hero__image {
    object-position: center top;
  }

  /* Subhead: smaller size + swap to shorter 2-line mobile copy */
  .hero__subhead    { font-size: 15px; }
  .hero__sub-mob    { display: block; }
  .hero__sub-desk   { display: none; }

  /* Stack CTAs; size each button to its content (not full-width) */
  .hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: var(--s-2);
  }
  .hero__btn {
    width: auto;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .hero__slides { padding: var(--s-6) var(--s-4) clamp(96px, 12vh, 140px); }
  .hero__bottom { padding: 0 var(--s-4); }
}

@media (min-width: 1024px) {
  .hero { height: 100svh; }
  .hero__slides { padding: var(--s-7) var(--s-4) clamp(112px, 14vh, 160px); }
  .hero__scroll-hint { display: inline-flex; }
}

@media (min-width: 1280px) {
  .hero__slides,
  .hero__bottom { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* =========================================================
   FOCUS RINGS
   ========================================================= */
.hero a:focus-visible,
.hero button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================
   REDUCED MOTION - instant transitions; auto-advance also off in JS
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero, .hero * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}