/*
 * Video Feature.
 * Full-bleed poster section + click-to-open lightbox.
 * Compound selectors (.tls-video-feature .tls-video-feature__x) so we
 * beat globals' utility classes in cascade.
 */

.tls-video-feature {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-size: cover;
  background-color: var(--tls-color-foreground);  /* fallback before image loads */
  color: var(--tls-color-background);
  text-align: left;
  /* Left-align the content with the container's left edge on wide
     viewports so it lines up with other sections. */
  padding-inline:
    max(var(--tls-container-padding),
        calc((100vw - var(--tls-container-max)) / 2))
    var(--tls-container-padding);
}

.tls-video-feature__overlay {
  position: absolute;
  inset: 0;
  /* Diagonal scrim — deep navy on the left for type legibility, fades
     to transparent on the right so Jim's image reads cleanly there. */
  background: linear-gradient(
    100deg,
    rgba(26, 34, 56, 0.85) 0%,
    rgba(26, 34, 56, 0.55) 35%,
    rgba(26, 34, 56, 0.10) 65%,
    rgba(26, 34, 56, 0.00) 100%
  );
  z-index: -1;
  pointer-events: none;
}

.tls-video-feature__content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tls-space-2xl);
  padding-block: var(--tls-space-3xl);
  max-width: 50rem;
}

/* Eyebrow + meta hidden — headline + play button carry this section. */
.tls-video-feature .tls-video-feature__eyebrow,
.tls-video-feature .tls-video-feature__meta {
  display: none;
}

.tls-video-feature .tls-video-feature__headline {
  font-family: var(--tls-font-primary);
  font-weight: var(--tls-weight-regular);
  font-size: clamp(2.75rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--tls-color-background);
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  text-wrap: balance;
}

.tls-video-feature__headline-primary,
.tls-video-feature__headline-accent {
  display: block;
}

/* Brick-red shimmer on the accent line ("One voice.") — same recipe
   used everywhere accent words appear (press-list, logo-wall, bio,
   page-hero, cta-banner, video-feature lightbox CTA). */
.tls-video-feature__headline-accent {
  display: inline-block;          /* override the block above so background-clip works */
  background-color: var(--tls-color-accent);
  background-image:
    linear-gradient(
      75deg,
      transparent 38%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 62%
    );
  background-size: 220% 100%;
  background-position: 220% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Drop the text-shadow inherited from the parent headline — it would
     shadow the transparent text + paint a navy ghost underneath. */
  text-shadow: none;
  animation: tls-video-feature-headline-shine 7s ease-in-out infinite;
}

@keyframes tls-video-feature-headline-shine {
  0%, 25%   { background-position: 220% 0; }
  75%, 100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tls-video-feature__headline-accent {
    animation: none;
    background-position: 50% 0;
  }
}

/* Play button — circular, accent red, white triangle */
.tls-video-feature__play {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--tls-color-accent);
  color: var(--tls-color-background);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition:
    transform var(--tls-duration-base) ease,
    background-color var(--tls-duration-base) ease,
    box-shadow var(--tls-duration-base) ease;
  position: relative;
  isolation: isolate;
}

/* Subtle ambient pulse — premium energy, per Jim brand motion direction */
.tls-video-feature__play::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--tls-color-accent);
  z-index: -1;
  animation: tls-video-feature-pulse 2.4s ease-out infinite;
}

@keyframes tls-video-feature-pulse {
  0%   { opacity: 0.45; transform: scale(1);    }
  100% { opacity: 0;    transform: scale(1.6);  }
}

.tls-video-feature__play:hover {
  transform: scale(1.06);
  background-color: var(--tls-color-accent-dark);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.tls-video-feature__play:focus-visible {
  outline: 3px solid var(--tls-color-background);
  outline-offset: 4px;
}

.tls-video-feature .tls-video-feature__meta {
  color: var(--tls-color-background);
  opacity: 0.75;
  margin: 0;
}

/* ============ Lightbox ============ */
.tls-video-feature__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--tls-space-lg);
}

.tls-video-feature__lightbox[data-state="open"] {
  display: flex;
  animation: tls-video-feature-fade 220ms ease both;
}

@keyframes tls-video-feature-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tls-video-feature__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 34, 56, 0.94); /* Jim's foreground navy */
  cursor: pointer;
}

.tls-video-feature__lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tls-space-lg);
}

.tls-video-feature__lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: var(--tls-color-background);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--tls-duration-fast) ease;
  opacity: 0.85;
}
.tls-video-feature__lightbox-close:hover { opacity: 1; }

.tls-video-feature__lightbox-video {
  width: 100%;
  max-height: 78vh;
  background-color: black;
  display: block;
}

.tls-video-feature__lightbox-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tls-space-md);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity   var(--tls-duration-slow) ease,
    transform var(--tls-duration-slow) ease;
}

.tls-video-feature__lightbox-cta[data-state="visible"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Standalone selector — the lightbox is portaled to <body> by view.js,
   so any rule that prefixed .tls-video-feature would stop matching.
   Editorial display treatment so the modal heading reads like the rest
   of the site's title type. */
.tls-video-feature__lightbox-cta-text {
  margin: 0;
  font-family: var(--tls-font-primary);
  font-weight: var(--tls-weight-regular);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tls-color-background);
  text-wrap: balance;
}

/* Brick-red shimmer accent — same recipe as press-list / logo-wall /
   bio / cta-banner / page-hero. Standalone selector since the lightbox
   is portaled to <body>. */
.tls-video-feature__lightbox-cta-accent {
  display: inline-block;
  background-color: var(--tls-color-accent);
  background-image:
    linear-gradient(
      75deg,
      transparent 38%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 62%
    );
  background-size: 220% 100%;
  background-position: 220% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: tls-video-feature-cta-shine 7s ease-in-out infinite;
}

@keyframes tls-video-feature-cta-shine {
  0%, 25%   { background-position: 220% 0; }
  75%, 100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tls-video-feature__lightbox-cta-accent {
    animation: none;
    background-position: 50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tls-video-feature__play::before { animation: none; opacity: 0; }
  .tls-video-feature__play:hover { transform: none; }
  .tls-video-feature__lightbox[data-state="open"] { animation: none; }
  .tls-video-feature__lightbox-cta { transition: none; }
}

@media (max-width: 1024px) {
  /* Stack the headline + play button at tablet and below. Anchor the
     content to the BOTTOM of the section so it doesn't crop Jim's face
     in the poster image. Play button sits ABOVE the headline (order: -1)
     and the primary headline gets capped width so "60,000 people"
     drops to its own line — keeps the rhythm of the mobile layout. */
  .tls-video-feature {
    align-items: flex-end;
  }
  .tls-video-feature__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tls-space-lg);
  }
  .tls-video-feature__play {
    order: -1;
  }
  .tls-video-feature__headline-primary {
    max-width: 14ch;
  }
}

@media (max-width: 767px) {
  .tls-video-feature__play { width: 72px; height: 72px; }
  .tls-video-feature__lightbox-close { top: -2.5rem; }
}