/* =========================================================
   hero-panel.css — cycling hero panel component
   Each slide: full-bleed image with a CSS gradient overlay
   on one side (left or right) creating the dark zone where
   the eyebrow + headline + detail text sit.
   Slides alternate which side based on each panel's "side"
   property in the JSON data. Flash transition between slides.
   ========================================================= */

#hero-panel {
  position: absolute;
  /* Fill the hero content band — full canvas width, between top
     chrome (~130px) and bottom reel-strip (~130px). Result: a
     1920×820 cinemascope-aspect band, edge-to-edge horizontally. */
  top: 130px;
  left: 0;
  right: 0;
  bottom: 130px;
  overflow: hidden;
  background: #000;
}

/* Each slide is layered absolutely — only one is .active at a time.
   Slides cross-fade between each other on cycle. */
.hero-panel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.hero-panel-slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

/* The image — full-bleed inside the slide.
   Position depends on which side the gradient is on: subject sits
   opposite the gradient so it isn't covered by the dark zone. */
.hero-panel-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* Subtle slow zoom keeps the still alive */
  animation: hero-panel-ken-burns 16s ease-in-out infinite alternate;
}
/* Gradient on the RIGHT — subject lives on the LEFT (gets shown) */
.hero-panel-slide[data-side="right"] .hero-panel-image {
  background-position: 25% center;
}
/* Gradient on the LEFT — subject lives on the RIGHT (gets shown) */
.hero-panel-slide[data-side="left"] .hero-panel-image {
  background-position: 75% center;
}

/* ---------------------------------------------------------
   FLAT slides (data-flat="true")
   The still already has its crop and gradient baked into the
   pixels, so the CSS overlay is suppressed (it would double-
   darken) and Ken Burns is disabled (scaling would drift the
   baked gradient out of register with the frame edge).
   --------------------------------------------------------- */
.hero-panel-slide[data-flat="true"] .hero-panel-image {
  background-position: center center;
  background-size: 100% 100%;
  animation: none;
}
.hero-panel-slide[data-flat="true"][data-flat="true"] .hero-panel-overlay {
  background: none;
}

/* The video — layered above the image. When the video is loaded
   and playing, it covers the image. If the video fails to load,
   the image underneath remains visible as a graceful fallback. */
.hero-panel-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  z-index: 1;
  /* Start invisible — fade in once playing */
  opacity: 0;
  transition: opacity 0.4s ease;
  /* Prevent sub-pixel rendering gaps when the canvas is scaled */
  will-change: transform;
  backface-visibility: hidden;
}
/* Default object-position mirrors the image positioning logic */
.hero-panel-slide[data-side="right"] .hero-panel-video {
  object-position: 25% center;
}
.hero-panel-slide[data-side="left"] .hero-panel-video {
  object-position: 75% center;
}
/* Once the video is playing, fade it in over the image */
.hero-panel-slide.active .hero-panel-video {
  opacity: 1;
}

@keyframes hero-panel-ken-burns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.06); }
}

/* The gradient overlay creates the dark zone for text.
   Alternates which side based on the slide's data attribute.
   Sits above both image and video. */
.hero-panel-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Text zone on the LEFT — gradient fades from solid dark on the
   left into transparent. Keeps the dark zone tight to the text
   side so most of the video plays with no overlay at all. */
.hero-panel-slide[data-side="left"] .hero-panel-overlay {
  background: linear-gradient(
    to right,
    rgba(6, 5, 4, 0.94) 0%,
    rgba(6, 5, 4, 0.88) 22%,
    rgba(6, 5, 4, 0.45) 38%,
    rgba(6, 5, 4, 0.00) 55%
  );
}

/* Text zone on the RIGHT — gradient fades from transparent into
   solid dark on the right. Same tight falloff as the left version. */
.hero-panel-slide[data-side="right"] .hero-panel-overlay {
  background: linear-gradient(
    to left,
    rgba(6, 5, 4, 0.94) 0%,
    rgba(6, 5, 4, 0.88) 22%,
    rgba(6, 5, 4, 0.45) 38%,
    rgba(6, 5, 4, 0.00) 55%
  );
}

/* The text container — positioned in the dark zone (40% of the panel) */
.hero-panel-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36%;
  padding: 0 60px;
  z-index: 3;
}
.hero-panel-slide[data-side="left"] .hero-panel-text {
  left: 0;
}
.hero-panel-slide[data-side="right"] .hero-panel-text {
  right: 0;
}

/* Eyebrow (small, monospace, accent color, all caps) */
.hero-panel-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 24px;
  position: relative;
  padding-left: 32px;
}
.hero-panel-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--ember);
}

/* Headline (display font, big, bold, the capability promise) */
.hero-panel-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 28px;
  text-transform: none;
}

/* Detail line (smaller, italic-ish via serif, supporting copy) */
.hero-panel-detail {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--bone-dim);
  margin: 0;
}

/* Per-slide text reveal — fades in slightly delayed after the image */
.hero-panel-slide .hero-panel-eyebrow,
.hero-panel-slide .hero-panel-headline,
.hero-panel-slide .hero-panel-detail {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-panel-slide.active .hero-panel-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.hero-panel-slide.active .hero-panel-headline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.30s;
}
.hero-panel-slide.active .hero-panel-detail {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}


/* =========================================================
   DOT INDICATORS — beneath the panel, small + restrained
   ========================================================= */
.hero-panel-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.hero-panel-dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(244, 236, 220, 0.4);
  background: transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-panel-dot:hover {
  border-color: var(--ember);
}
.hero-panel-dot.active {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 0 12px rgba(232, 180, 117, 0.6);
  width: 9px;
  height: 9px;
}