/* =====================================================================
   Photo Hero — full-viewport swim photo with a cursor-driven liquid
   (WebGL) distortion.
     · .hero__photo  — fixed-attachment cover photo. Base layer + the
       fallback shown when WebGL/JS is unavailable or motion is reduced.
     · #heroCanvas   — WebGL canvas (hero-liquid.js) that renders the SAME
       photo live and warps it under the cursor. Sits over .hero__photo.
     · .hero__scrim  — dark gradient for legibility of the bottom-left copy.
   Copy is left-aligned at the bottom of the centered container.
   ===================================================================== */

.hero--photo {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh; /* dynamic viewport: always fills the visible screen on mobile,
                         even when the browser toolbar collapses (svh left a gap) */
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* copy sits at the bottom */
  padding: 0 !important;
  background: #0a1830; /* abyss fallback while the photo loads */
}

/* fixed-attachment cover photo (base + no-WebGL fallback) */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("dist/fotos/hero.png");
  background-size: cover;
  background-position: center;
  /* scroll (not fixed): `cover` then always fills the hero box. fixed sizes the image
     to the viewport, leaving the abyss fallback showing below on mobile / capture. */
  background-attachment: scroll;
}

/* live WebGL distortion of the same photo, painted on top */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* legibility scrim — darkens bottom + left for white copy */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(6, 14, 30, 0.72) 0%,
      rgba(6, 14, 30, 0.3) 32%,
      transparent 60%
    ),
    linear-gradient(
      to right,
      rgba(6, 14, 30, 0.5) 0%,
      rgba(6, 14, 30, 0.12) 34%,
      transparent 58%
    );
}

/* ---- Copy (bottom-left) ---- */
.hero--photo .hero__copy {
  position: relative;
  z-index: 3;
  text-align: left;
  padding-bottom: clamp(48px, 8vh, 104px);
}
.hero--photo .hero__copy h1,
.hero--photo .hero__copy .lead {
  max-width: 640px;
}
.hero--photo h1 {
  color: #fff;
  text-shadow: 0 3px 32px rgba(6, 14, 30, 0.6);
}
.hero--photo .accent {
  color: var(--accent-mustard);
}
.hero--photo .lead {
  color: rgba(255, 255, 255, 0.84);
  margin-top: 18px;
}
.hero--photo .hero__cta {
  margin-top: 26px;
  justify-content: flex-start;
}
.hero--photo .hero__cta .btn {
  background: var(--action-cornflower);
  color: #fff;
  padding: 14px 28px;
}
.hero--photo .arrow-link {
  color: rgba(255, 255, 255, 0.9);
}
.hero--photo .arrow-link:hover {
  color: #fff;
}

/* ---- Fallbacks ---- */
/* coarse pointers: no cursor → skip the live canvas, show the static photo */
@media (hover: none) {
  .hero__canvas {
    display: none;
  }
}
/* reduced motion: keep the photo calm and static */
@media (prefers-reduced-motion: reduce) {
  .hero__canvas {
    display: none;
  }
}

/* responsive: the liquid WebGL effect isn't needed — paint the photo straight
   onto the hero as a plain background-image and drop the canvas + photo layers */
@media (max-width: 980px) {
  .hero--photo {
    background-image: url("dist/fotos/hero.png");
    background-size: cover;
    background-position: 70% center; /* shift right so the swimmer sits centered in the narrow frame */
    background-repeat: no-repeat;
  }
  .hero__canvas,
  .hero__photo {
    display: none;
  }
}