/* Cuba Libre fork: a quiet, centered hero over a scroll-scrubbed walkthrough video.
   Loaded LAST in index.html so these rules win over styles.css / hero-fix.css /
   mobile-fix.css without needing !important. The hero markup deliberately drops the
   template's own .hero class: styles.css pins .hero to 100svh with bottom-left copy and
   a left-to-right navy wash, none of which suits a centered hero on a sticky pin, and
   inheriting it only to override it again is how those files end up fighting. */

.cl-hero {
  position: relative;
  /* The scroll track. Its height minus one viewport is the distance the video scrubs
     across, so 320vh spends ~2.2 screens of scrolling on 18.8s of footage. */
  height: 320vh;
  background: #041722;
  color: #fff;
}

.cl-hero-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cl-hero .hero-media { position: absolute; inset: 0; }

.cl-hero-video,
.cl-hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The curated hero photograph carries the first paint and stays until the video can
   actually seek (see cl-hero.js) -- so a slow connection or a browser that refuses the
   blob path never shows an empty black box. */
/* The walkthrough was shot at dusk and runs dark, and the scrim below darkens it further;
   a mild lift keeps the room readable instead of reading as one black rectangle. */
.cl-hero-video { opacity: 0; transition: opacity .9s ease; filter: brightness(1.16) saturate(1.06); }
.cl-hero-still { opacity: 1; transition: opacity .9s ease; }
.cl-hero.is-ready .cl-hero-video { opacity: 1; }
.cl-hero.is-ready .cl-hero-still { opacity: 0; }

.cl-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(118% 82% at 50% 46%, rgba(4, 23, 34, .08) 0%, rgba(4, 23, 34, .38) 58%, rgba(4, 23, 34, .66) 100%),
    linear-gradient(180deg, rgba(4, 23, 34, .42) 0%, rgba(4, 23, 34, .06) 40%, rgba(4, 23, 34, .56) 100%);
}

.cl-hero-copy {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1000px);
  text-align: center;
}

.cl-hero-copy h1 {
  max-width: 21ch;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 5.3rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 2px 44px rgba(4, 23, 34, .5);
}

/* The venue's hero body copy still ships for screen readers and for the language
   toggle's [data-i18n] pass -- it is only the visual hero that is stripped back. */
.cl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(26px, 4vh, 44px);
}

.cl-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border-radius: var(--radius);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.cl-btn--solid { background: var(--brand); color: var(--brand-ink); }
.cl-btn--solid:hover { background: color-mix(in srgb, var(--brand) 80%, white 20%); transform: translateY(-2px); }

.cl-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  backdrop-filter: blur(6px);
}
.cl-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .17); transform: translateY(-2px); }

.cl-btn svg { width: 17px; height: 17px; flex: none; }

/* Entrance, not a scroll reveal: the brief is a hero that is already complete when the
   page opens, so the heading and its two buttons rise once, on load. */
.cl-hero-copy h1,
.cl-hero-actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
}
.cl-hero.is-in .cl-hero-copy h1 { opacity: 1; transform: none; }
.cl-hero.is-in .cl-hero-actions { opacity: 1; transform: none; transition-delay: .16s; }

.cl-hero-progress {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, .16);
}
.cl-hero-progress i {
  display: block;
  height: 100%;
  width: calc(var(--hero-progress, 0) * 100%);
  background: var(--accent);
}

/* No video (reduced motion, a decode failure, a browser that refuses both the plain URL
   and the blob) collapses the track to a single screen so the page never scrolls through
   two dead viewports of a still image. */
.cl-hero.is-static { height: 100svh; }
.cl-hero.is-static .cl-hero-pin { position: static; height: 100svh; }
.cl-hero.is-static .cl-hero-progress { display: none; }

@media (max-width: 780px) {
  .cl-hero { height: 250vh; }
  .cl-hero-copy h1 { max-width: 18ch; font-size: clamp(2.05rem, 9.2vw, 3.3rem); }
  .cl-hero-actions { flex-direction: column; align-items: center; }
  .cl-btn { width: 100%; max-width: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-hero { height: 100svh; }
  .cl-hero-pin { position: static; height: 100svh; }
  .cl-hero-video { display: none; }
  .cl-hero-still { opacity: 1; }
  .cl-hero-copy h1,
  .cl-hero-actions { opacity: 1; transform: none; transition: none; }
  .cl-hero-progress { display: none; }
}