/* ================================================================
   ILUVANA PLATFORM — VIDEO STRIP INTERSTITIAL
   A cinematic letterbox band that sits between Trust Stats and
   Capabilities. Desktop: ambient background video with brand
   overlay and minimal controls. Mobile: static poster image
   with text overlay, entire strip links to wdd-platform.html.

   Depends on wdd-styles.css tokens (--wdd-font-display,
   --wdd-font-body, --wdd-gutter, --wdd-ease-soft).
   ================================================================ */


/* ----------------------------------------------------------------
   1. STRIP CONTAINER
   ---------------------------------------------------------------- */
.wdd-vstrip {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  isolation: isolate;
  background: #0C0F14; /* dark base while media loads */
}


/* ----------------------------------------------------------------
   2. FULL-COVERAGE LINK (mobile tap target + desktop subtle link)
   On mobile the entire strip is tappable. On desktop the link
   sits below the controls and CTA so they remain interactive.
   ---------------------------------------------------------------- */
.wdd-vstrip__link-mobile {
  display: none;
}
@media (max-width: 768px) {
  .wdd-vstrip__link-mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}


/* ----------------------------------------------------------------
   3. MEDIA LAYERS — poster image + video
   The poster is always present and visible. On desktop the video
   fades in over it once loaded. On mobile the video is removed
   from the DOM entirely by JS, so the poster is the only layer.
   ---------------------------------------------------------------- */
.wdd-vstrip__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wdd-vstrip__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wdd-vstrip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wdd-vstrip__video.is-loaded {
  opacity: 1;
}

/* Mobile: hide the video element entirely via CSS as well
   (JS also removes it, but this prevents any flash) */
@media (max-width: 768px) {
  .wdd-vstrip__video {
    display: none !important;
  }
}


/* ----------------------------------------------------------------
   4. OVERLAY GRADIENT
   Darkens the media enough for legible text while letting warm
   tones bleed through the center.
   ---------------------------------------------------------------- */
.wdd-vstrip__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* vignette: darker edges, lighter center */
    radial-gradient(
      ellipse 70% 100% at 50% 50%,
      rgba(12, 15, 20, 0.42) 0%,
      rgba(12, 15, 20, 0.72) 100%
    ),
    /* extra top/bottom darkening for text readability */
    linear-gradient(
      to bottom,
      rgba(12, 15, 20, 0.50) 0%,
      rgba(12, 15, 20, 0.20) 40%,
      rgba(12, 15, 20, 0.20) 60%,
      rgba(12, 15, 20, 0.55) 100%
    );
}


/* ----------------------------------------------------------------
   5. CONTENT — brand, tagline, CTA
   ---------------------------------------------------------------- */
.wdd-vstrip__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 var(--wdd-gutter, 24px);
}

/* ---- Brand wordmark ---- */
.wdd-vstrip__brand {
  font-family: var(--wdd-font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(42px, 5.6vw, 64px);
  font-weight: 500;
  color: #D4A574;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-bottom: 6px;
  text-shadow:
    0 1px 0 rgba(160, 110, 60, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(180, 130, 70, 0.12);
}

/* ---- Tagline ---- */
.wdd-vstrip__tagline {
  font-family: var(--wdd-font-display, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(17px, 2.6vw, 30px);
  color: #E8D5C0;
  letter-spacing: -0.008em;
  line-height: 1.2;
  margin-bottom: 22px;
  max-width: 600px;
  text-shadow:
    0 1px 0 rgba(140, 95, 50, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---- Desktop image overlay (hidden until you add the
   composite image; then hide .wdd-vstrip__brand and
   .wdd-vstrip__tagline on desktop and show this instead) ---- */
/*
.wdd-vstrip__brand-img {
  display: none;
}
@media (min-width: 769px) {
  .wdd-vstrip__brand-img {
    display: block;
    max-width: 560px;
    width: 80%;
    height: auto;
    margin-bottom: 18px;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
  }
  .wdd-vstrip__brand,
  .wdd-vstrip__tagline {
    display: none;
  }
}
*/

/* ---- CTA link ---- */
.wdd-vstrip__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--wdd-font-body, 'Inter', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 165, 116, 0.6);
  text-decoration: none;
  position: relative;
  z-index: 11;
  transition: color 0.25s var(--wdd-ease-soft, ease),
              gap 0.25s var(--wdd-ease-soft, ease);
}
.wdd-vstrip__cta:hover {
  color: #D4A574;
  gap: 10px;
}
.wdd-vstrip__cta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Mobile: hide CTA (entire strip is tappable) */
@media (max-width: 768px) {
  .wdd-vstrip__cta { display: none; }
}


/* ----------------------------------------------------------------
   6. VIDEO CONTROLS (desktop only)
   Small translucent circles, bottom-right. Low opacity at rest,
   brightens on strip hover.
   ---------------------------------------------------------------- */
.wdd-vstrip__controls {
  position: absolute;
  bottom: 16px;
  right: 20px;
  z-index: 12;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.4s var(--wdd-ease-soft, ease);
}
.wdd-vstrip:hover .wdd-vstrip__controls,
.wdd-vstrip:focus-within .wdd-vstrip__controls {
  opacity: 0.75;
}
.wdd-vstrip__controls:hover {
  opacity: 1 !important;
}

.wdd-vstrip__ctrl {
  appearance: none;
  border: 1px solid rgba(212, 165, 116, 0.15);
  background: rgba(12, 15, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 213, 192, 0.8);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
}
.wdd-vstrip__ctrl:hover {
  background: rgba(212, 165, 116, 0.15);
  color: #E8D5C0;
  border-color: rgba(212, 165, 116, 0.3);
}
.wdd-vstrip__ctrl:focus-visible {
  outline: 2px solid #D4A574;
  outline-offset: 2px;
}
.wdd-vstrip__ctrl svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* ---- Icon state toggling ---- */
/* Play/Pause/Restart: default = playing (pause icon visible) */
.wdd-vstrip__ctrl .vstrip-icon--play,
.wdd-vstrip__ctrl .vstrip-icon--restart { display: none; }
.wdd-vstrip__ctrl.is-paused .vstrip-icon--pause { display: none; }
.wdd-vstrip__ctrl.is-paused .vstrip-icon--play  { display: block; }
.wdd-vstrip__ctrl.is-ended .vstrip-icon--pause,
.wdd-vstrip__ctrl.is-ended .vstrip-icon--play { display: none; }
.wdd-vstrip__ctrl.is-ended .vstrip-icon--restart { display: block; }

/* Mute/Unmute: default = muted (muted icon visible) */
.wdd-vstrip__ctrl .vstrip-icon--unmuted { display: none; }
.wdd-vstrip__ctrl.is-unmuted .vstrip-icon--muted   { display: none; }
.wdd-vstrip__ctrl.is-unmuted .vstrip-icon--unmuted  { display: block; }

/* YouTube toggle states based on action */
.wdd-vstrip__ctrl--youtube[data-youtube-action="embed"] .vstrip-icon--yt-link { display: none; }
.wdd-vstrip__ctrl--youtube[data-youtube-action="link"] .vstrip-icon--yt-embed { display: none; }

/* Modal for YouTube Embed */
.wdd-yt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wdd-yt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 15, 20, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.wdd-yt-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
}
.wdd-yt-modal__iframe-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.wdd-yt-modal__iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.wdd-yt-modal__close {
  position: absolute;
  top: -36px;
  right: 0;
  color: #E8D5C0;
  font-size: 32px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.wdd-yt-modal__close:hover {
  opacity: 1;
}
@media (max-width: 768px) {
  .wdd-yt-modal { padding: 10px; }
  .wdd-yt-modal__close { top: 10px; right: 10px; z-index: 2; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
}

/* Hide controls on mobile */
@media (max-width: 768px) {
  .wdd-vstrip__controls {
    display: none !important;
  }
}


/* ----------------------------------------------------------------
   7. RESPONSIVE
   ---------------------------------------------------------------- */

/* Tablet / small desktop */
@media (max-width: 1024px) {
  .wdd-vstrip {
    height: 280px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .wdd-vstrip {
    height: 240px;
    cursor: pointer;
  }
  .wdd-vstrip__brand {
    font-size: 38px;
    margin-bottom: 4px;
  }
  .wdd-vstrip__tagline {
    font-size: 16px;
    margin-bottom: 16px;
    max-width: 320px;
  }
  /* Show a small "Learn more" prompt on mobile */
  .wdd-vstrip__mobile-prompt {
    display: block;
    font-family: var(--wdd-font-body, 'Inter', system-ui, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(212, 165, 116, 0.55);
  }
}
@media (min-width: 769px) {
  .wdd-vstrip__mobile-prompt {
    display: none;
  }
}


/* ----------------------------------------------------------------
   8. ENTRANCE ANIMATION
   The content fades/slides up when the strip scrolls into view.
   Triggered by JS adding .is-visible to the strip.
   ---------------------------------------------------------------- */
.wdd-vstrip__content {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--wdd-ease-soft, ease),
              transform 0.7s var(--wdd-ease-soft, ease);
}
.wdd-vstrip.is-visible .wdd-vstrip__content {
  opacity: 1;
  transform: translateY(0);
}