/**
 * MeaningCinematicScroll Component Styles
 *
 * Immersive scrollytelling experience for the "Meaning of Opanijé" section.
 * Uses Design System 2.0 tokens for consistent styling.
 *
 * @package Opanije
 * @subpackage Components
 * @since 4.0.0
 *
 * Dependencies:
 * - design-system-2.0/main.css (tokens, easing functions)
 */

/* =================================================================
   CUSTOM PROPERTIES - COMPONENT-SPECIFIC
   ================================================================= */
.meaning-cinematic {
  /* Animation timing */
  --cinematic-scroll-duration: 600ms;
  --cinematic-ease: var(--ease-drum-beat, cubic-bezier(0.16, 1, 0.3, 1));
  --cinematic-ease-soft: var(--ease-drum-soft, cubic-bezier(0.33, 1, 0.68, 1));

  /* Glassmorphic properties - INCREASED opacity for better contrast */
  --glassmorphic-blur: 24px;
  --glassmorphic-bg: rgba(43, 40, 35, 0.88);
  --glassmorphic-border: rgba(216, 168, 27, 0.4);

  /* Ken Burns scale for reduced motion */
  --ken-burns-scale: 1.05;
}


/* =================================================================
   SECTION CONTAINER
   ================================================================= */
.meaning-cinematic {
  position: relative;
  /* Section height determines scroll distance for progressive disclosure
   * Pinned scroll distance = section height - 100vh
   * Mobile: 175vh = 75vh scroll distance
   * Desktop: 250vh = 150vh scroll distance */
  min-height: 175vh;
  background-color: var(--sys-color-ink-base, #2B2823);
  overflow: hidden;
  /* Isolation to prevent content bleed-through */
  isolation: isolate;
  z-index: 10;
  /* Center the video container vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .meaning-cinematic {
    min-height: 250vh; /* Desktop - 150vh scroll distance for comfortable reading */
  }
}

/* Reduced motion variant - shorter section, no scroll effects */
.meaning-cinematic--reduced-motion {
  min-height: auto;
  padding: var(--sys-section-spacing, clamp(3rem, 8vw, 5rem)) 0;
}


/* =================================================================
   VIDEO CONTAINER
   ================================================================= */
.meaning-cinematic__video-container {
  position: sticky;
  /* Center vertically during sticky state for true cinematic immersion
   * - When viewport < 1080px: max(0, negative) = 0, so fills viewport from top
   * - When viewport >= 1080px: centers the 1080px container in viewport */
  top: max(0px, calc((100vh - 1080px) / 2));
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 1080px; /* Cap to prevent dominance on ultra-tall displays */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.meaning-cinematic__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* Lock framing to prevent jumping */
}

/* Poster fallback wrapper (reduced motion) */
.meaning-cinematic__poster-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.meaning-cinematic__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle Ken Burns effect for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .meaning-cinematic--reduced-motion .meaning-cinematic__poster {
    animation: ken-burns 20s var(--cinematic-ease-soft) infinite alternate;
  }
}

@keyframes ken-burns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(var(--ken-burns-scale));
  }
}


/* =================================================================
   OVERLAYS FOR TEXT LEGIBILITY
   ================================================================= */

/* Dark scrim overlay - ensures text contrast against any video frame */
.meaning-cinematic__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(43, 40, 35, 0.5) 0%,
    rgba(43, 40, 35, 0.65) 50%,
    rgba(43, 40, 35, 0.75) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Gradient overlays for additional text legibility at edges */
.meaning-cinematic__gradient-top,
.meaning-cinematic__gradient-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 35%;
  pointer-events: none;
  z-index: 2;
}

.meaning-cinematic__gradient-top {
  top: 0;
  background: linear-gradient(180deg, rgba(43, 40, 35, 0.7) 0%, transparent 100%);
}

.meaning-cinematic__gradient-bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(43, 40, 35, 0.85) 0%, transparent 100%);
}


/* =================================================================
   CONTENT WRAPPER
   ================================================================= */
.meaning-cinematic__content-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sys-space-6, 2rem);
  z-index: var(--sys-z-fixed, 300);
  /* Start hidden - JS controls visibility via inline styles */
  opacity: 0;
  transition: opacity 500ms var(--cinematic-ease-soft);
  pointer-events: none;
}

/* Visible state when section is in pinned zone */
.meaning-cinematic__content-wrapper--visible {
  opacity: 1;
}

/* Static wrapper for reduced motion */
.meaning-cinematic__content-wrapper--static {
  position: relative;
  height: auto;
  min-height: 60vh;
  opacity: 1;
  pointer-events: auto;
}

.meaning-cinematic__content-wrapper > * {
  pointer-events: auto;
}

.meaning-cinematic__content-inner {
  max-width: 720px;
  width: 100%;
  text-align: center;
  position: relative;
}


/* =================================================================
   EYEBROW
   ================================================================= */
.meaning-cinematic__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--sys-font-display, 'Montserrat', sans-serif);
  font-size: var(--sys-font-size-caption, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sys-color-primary-light, #D8A81B);
  padding: var(--sys-space-2, 0.5rem) var(--sys-space-4, 1rem);
  border: 1px solid var(--glassmorphic-border);
  border-radius: var(--sys-radius-full, 9999px);
  margin-bottom: var(--sys-space-6, 2rem);
  /* Start hidden for animation */
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 400ms var(--cinematic-ease),
    transform 400ms var(--cinematic-ease);
}

.meaning-cinematic__eyebrow--visible {
  opacity: 1;
  transform: translateY(0);
}


/* =================================================================
   CONTENT CARD - GLASSMORPHIC STYLE
   ================================================================= */
.meaning-cinematic__content-card {
  background: var(--glassmorphic-bg);
  backdrop-filter: blur(var(--glassmorphic-blur));
  -webkit-backdrop-filter: blur(var(--glassmorphic-blur));
  border: 1px solid var(--glassmorphic-border);
  border-radius: var(--sys-radius-lg, 12px);
  padding: var(--sys-space-8, 3rem) var(--sys-space-6, 2rem);
  /* Add subtle ring for edge definition */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.3);
  /* Start hidden for animation */
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 500ms var(--cinematic-ease),
    transform 500ms var(--cinematic-ease);
}

/* Visible state */
.meaning-cinematic__content-card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Safari fallback for backdrop-filter */
@supports not (backdrop-filter: blur(24px)) {
  .meaning-cinematic__content-card {
    background: rgba(43, 40, 35, 0.95);
  }
}


/* =================================================================
   WORD & PRONUNCIATION
   ================================================================= */
.meaning-cinematic__word-group {
  margin-bottom: var(--sys-space-6, 2rem);
  /* Animation for word group */
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 500ms var(--cinematic-ease),
    transform 500ms var(--cinematic-ease);
}

.meaning-cinematic__word-group--visible {
  opacity: 1;
  transform: translateY(0);
}

.meaning-cinematic__word {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 700;
  color: var(--sys-color-surface-0, #FFFFFF);
  letter-spacing: -0.02em;
  line-height: var(--sys-line-height-tight, 1.1);
  margin: 0 0 var(--sys-space-3, 0.75rem) 0;
  /* Strong text shadow for contrast against any video frame */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.3);
}

.meaning-cinematic__pronunciation {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--sys-font-size-body, 1rem);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.meaning-cinematic__phonetic {
  letter-spacing: 0.05em;
}

.meaning-cinematic__separator {
  margin: 0 var(--sys-space-2, 0.5rem);
}

.meaning-cinematic__etymology {
  font-style: italic;
  opacity: 0;
  transform: translateY(10px);
  display: inline-block;
  transition:
    opacity 400ms var(--cinematic-ease),
    transform 400ms var(--cinematic-ease);
}

.meaning-cinematic__etymology--visible {
  opacity: 1;
  transform: translateY(0);
}


/* =================================================================
   DEFINITION
   ================================================================= */
.meaning-cinematic__definition {
  position: relative;
  padding: var(--sys-space-5, 1.5rem) 0;
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 500ms var(--cinematic-ease),
    transform 500ms var(--cinematic-ease);
  transition-delay: 200ms;
}

.meaning-cinematic__definition--visible {
  opacity: 1;
  transform: translateY(0);
}

.meaning-cinematic__quote-mark {
  position: absolute;
  top: 0;
  left: var(--sys-space-4, 1rem);
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--sys-color-primary-light, #D8A81B);
  opacity: 0.5;
  line-height: 1;
  user-select: none;
}

.meaning-cinematic__definition-text {
  font-size: var(--sys-font-size-lead, clamp(1.125rem, 1rem + 0.35vw, 1.3125rem));
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--sys-line-height-relaxed, 1.65);
  margin: 0;
  padding-left: var(--sys-space-6, 2rem);
}


/* =================================================================
   CULTURAL NOTE
   ================================================================= */
.meaning-cinematic__cultural-note {
  margin-top: var(--sys-space-5, 1.5rem);
  padding-top: var(--sys-space-5, 1.5rem);
  border-top: 1px solid rgba(216, 168, 27, 0.2);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 500ms var(--cinematic-ease),
    transform 500ms var(--cinematic-ease);
  transition-delay: 400ms;
}

.meaning-cinematic__cultural-note--visible {
  opacity: 1;
  transform: translateY(0);
}

.meaning-cinematic__cultural-note p {
  font-size: var(--sys-font-size-body, 1rem);
  font-weight: 600;
  color: var(--sys-color-surface-0, #FFFFFF);
  margin: 0;
}


/* =================================================================
   CTA BUTTON
   ================================================================= */
.meaning-cinematic__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-2, 0.5rem);
  margin-top: var(--sys-space-6, 2rem);
  padding: var(--sys-space-3, 0.75rem) var(--sys-space-5, 1.5rem);
  background: transparent;
  border: 2px solid var(--sys-color-primary-light, #D8A81B);
  border-radius: var(--sys-radius-full, 9999px);
  color: var(--sys-color-primary-light, #D8A81B);
  font-family: var(--sys-font-display, 'Montserrat', sans-serif);
  font-size: var(--sys-font-size-small, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  /* Start hidden for progressive disclosure */
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition:
    opacity 400ms var(--cinematic-ease),
    transform 400ms var(--cinematic-ease),
    background-color 300ms var(--cinematic-ease-soft),
    color 300ms var(--cinematic-ease-soft);
}

.meaning-cinematic__cta--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.meaning-cinematic__cta:hover {
  background: var(--sys-color-primary-light, #D8A81B);
  color: var(--sys-color-ink-base, #2B2823);
  transform: translateY(-2px);
}

.meaning-cinematic__cta:focus-visible {
  outline: 3px solid rgba(216, 168, 27, 0.5);
  outline-offset: 3px;
}

.meaning-cinematic__cta svg {
  transition: transform 200ms var(--cinematic-ease);
}

.meaning-cinematic__cta:hover svg {
  transform: translateX(4px);
}


/* =================================================================
   SCROLL INDICATOR
   ================================================================= */
.meaning-cinematic__scroll-indicator {
  position: absolute;
  bottom: var(--sys-space-8, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sys-space-2, 0.5rem);
  color: rgba(255, 255, 255, 0.6);
  animation: scroll-bounce 2s var(--cinematic-ease-soft) infinite;
}

.meaning-cinematic__scroll-text {
  font-family: var(--sys-font-display, 'Montserrat', sans-serif);
  font-size: var(--sys-font-size-caption, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes scroll-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}

/* Hide scroll indicator when reduced motion preferred */
@media (prefers-reduced-motion: reduce) {
  .meaning-cinematic__scroll-indicator {
    display: none;
  }
}


/* =================================================================
   VIDEO CONTROLS
   ================================================================= */
.meaning-cinematic__controls {
  position: fixed;
  bottom: var(--sys-space-6, 2rem);
  right: var(--sys-space-6, 2rem);
  display: flex;
  gap: var(--sys-space-2, 0.5rem);
  z-index: var(--sys-z-sticky, 200);
}

.meaning-cinematic__control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(43, 40, 35, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--sys-radius-md, 8px);
  color: var(--sys-color-surface-0, #FFFFFF);
  cursor: pointer;
  transition:
    background-color 200ms var(--cinematic-ease-soft),
    border-color 200ms var(--cinematic-ease-soft),
    transform 150ms var(--cinematic-ease);
}

.meaning-cinematic__control-btn:hover {
  background: rgba(43, 40, 35, 0.9);
  border-color: var(--sys-color-primary-light, #D8A81B);
  transform: scale(1.05);
}

.meaning-cinematic__control-btn:focus-visible {
  outline: 2px solid var(--sys-color-primary-light, #D8A81B);
  outline-offset: 2px;
}

.meaning-cinematic__control-btn:active {
  transform: scale(0.98);
}


/* =================================================================
   CULTURAL SYMBOL
   ================================================================= */
.meaning-cinematic__symbol {
  position: absolute;
  bottom: var(--sys-space-8, 3rem);
  left: 50%;
  transform: translateX(-50%);
  color: var(--sys-color-primary-light, #D8A81B);
  opacity: 0.4;
  z-index: var(--sys-z-base, 1);
}


/* =================================================================
   RESPONSIVE STYLES
   ================================================================= */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .meaning-cinematic {
    /* min-height: 175vh from base styles = 75vh scroll distance */
    --glassmorphic-blur: 16px;
  }

  .meaning-cinematic__content-wrapper {
    padding: var(--sys-space-4, 1rem);
    /* Keep centered on mobile */
    justify-content: center;
  }

  .meaning-cinematic__content-card {
    padding: var(--sys-space-5, 1.5rem) var(--sys-space-4, 1rem);
  }

  .meaning-cinematic__word {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .meaning-cinematic__quote-mark {
    font-size: 3rem;
    left: 0;
  }

  .meaning-cinematic__definition-text {
    padding-left: var(--sys-space-4, 1rem);
  }

  .meaning-cinematic__controls {
    bottom: var(--sys-space-4, 1rem);
    right: var(--sys-space-4, 1rem);
  }

  .meaning-cinematic__symbol {
    bottom: var(--sys-space-6, 2rem);
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .meaning-cinematic__content-card {
    padding: var(--sys-space-6, 2rem) var(--sys-space-5, 1.5rem);
  }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  /* min-height: 250vh from @media (min-width: 768px) = 150vh scroll distance */

  .meaning-cinematic__content-inner {
    max-width: 800px;
  }

  .meaning-cinematic__content-card {
    padding: var(--sys-space-10, 4rem) var(--sys-space-8, 3rem);
  }
}


/* =================================================================
   REDUCED MOTION OVERRIDES
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .meaning-cinematic,
  .meaning-cinematic__video,
  .meaning-cinematic__content-card,
  .meaning-cinematic__etymology,
  .meaning-cinematic__definition,
  .meaning-cinematic__cultural-note,
  .meaning-cinematic__cta {
    transition: none;
  }

  .meaning-cinematic__content-card {
    opacity: 1;
    transform: none;
  }

  .meaning-cinematic__etymology,
  .meaning-cinematic__definition,
  .meaning-cinematic__cultural-note {
    opacity: 1;
    transform: none;
  }
}


/* =================================================================
   PRINT STYLES
   ================================================================= */
@media print {
  .meaning-cinematic {
    min-height: auto;
    padding: 2rem;
    background: white;
  }

  .meaning-cinematic__video-container,
  .meaning-cinematic__controls,
  .meaning-cinematic__scroll-indicator,
  .meaning-cinematic__pattern-overlay,
  .meaning-cinematic__gradient-top,
  .meaning-cinematic__gradient-bottom {
    display: none;
  }

  .meaning-cinematic__content-wrapper {
    position: relative;
    height: auto;
    opacity: 1;
  }

  .meaning-cinematic__content-card {
    background: none;
    border: 1px solid #ccc;
    opacity: 1;
    transform: none;
  }

  .meaning-cinematic__word {
    color: #2B2823;
  }

  .meaning-cinematic__definition-text,
  .meaning-cinematic__pronunciation,
  .meaning-cinematic__cultural-note p {
    color: #333;
  }
}