/**
 * Cinematic Subtitles Premium Styles - Apple Tier 💎
 * Features: Liquid Motion, 3D Typography, Kinetic Drift
 */

:root {
  --apple-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-subtitle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
  perspective: 1200px;
}

.cinematic-subtitle {
  position: absolute;
  font-weight: 900;
  color: #fff;
  text-align: center;
  width: max-content;
  max-width: 90%;
  opacity: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  filter: blur(12px);
  transform: translate(-50%, -50%) scale(0.9) translateY(20px);
  transition: opacity 1.2s var(--apple-curve), filter 1.2s var(--apple-curve);
}

/* Base Survival - Active State */
.cinematic-subtitle.is-active {
  opacity: var(--target-opacity, 0.2);
  filter: blur(0px);
  transform: translate(-50%, -50%) scale(1) translateY(0);
}

/* --- High-End Animations --- */

/* 1. Fade & Dynamic Scale (Breathing) */
.anim-fade-scale {
  animation:
    apple-reveal var(--duration) var(--apple-curve) forwards,
    apple-drift var(--duration) ease-in-out infinite alternate;
}

@keyframes apple-reveal {
  0% {
    opacity: 0;
    filter: blur(15px);
    transform: translate(-50%, -50%) scale(0.8) translateY(30px);
    text-shadow: -3px 0 rgba(255, 0, 0, 0.5), 3px 0 rgba(0, 0, 255, 0.5);
  }

  10% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(5px);
    text-shadow: -1px 0 rgba(255, 0, 0, 0.3), 1px 0 rgba(0, 0, 255, 0.3);
  }

  15% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1) translateY(0);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
  }

  85% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1.02);
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(1.1) translateY(-20px);
  }
}

/* 2. Slide with Kinetic Momentum */
.anim-slide-rand {
  animation: apple-slide var(--duration) var(--apple-curve) forwards;
}

@keyframes apple-slide {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) scale(0.9);
  }

  20% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1.01);
  }

  100% {
    opacity: 0;
    filter: blur(15px);
    transform: translate(calc(-50% - var(--ox)*0.5), calc(-50% - var(--oy)*0.5)) scale(1.1);
  }
}

/* 3. Blur Reveal (Liquid Focus) */
.anim-blur-reveal {
  animation: apple-blur var(--duration) var(--apple-curve) forwards;
}

@keyframes apple-blur {
  0% {
    opacity: 0;
    filter: blur(40px);
    transform: translate(-50%, -50%) scale(1.2);
  }

  25% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1);
  }

  85% {
    opacity: var(--target-opacity, 0.2);
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(0.98);
  }

  100% {
    opacity: 0;
    filter: blur(30px);
    transform: translate(-50%, -50%) scale(0.85);
  }
}

/* 4. 3D Letter Reveal (The $100k Magic) */
.anim-letter-reveal {
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%, -50%);
}

.cinematic-letter {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: perspective(1000px) rotateX(-90deg) translateZ(50px);
  animation: letter-flip 1.2s var(--apple-curve) forwards;
  animation-delay: var(--delay);
}

@keyframes letter-flip {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: perspective(1000px) rotateX(-90deg) translateZ(60px);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform: perspective(1000px) rotateX(0deg) translateZ(0);
  }
}

/* Premium Exit States */
.cinematic-subtitle.is-exiting {
  opacity: 0 !important;
  filter: blur(20px) !important;
  transform: translate(-50%, -50%) scale(1.1) translateY(-30px) !important;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.is-exiting .cinematic-letter {
  animation: letter-fade-out 0.8s var(--apple-curve) forwards;
  animation-delay: 0s !important;
}

@keyframes letter-fade-out {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(-40px) scale(1.1) rotateX(20deg);
  }
}

/* Kinetic Drift (Constant subtle motion) */
@keyframes apple-drift {
  from {
    transform: translate(-50%, -50%) translate(0, 0);
  }

  to {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy));
  }
}

/* --- Modal Base --- */
#cinematic-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 12, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none;
  /* Controlled via JS */
  z-index: 99999;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  perspective: 2000px;
  transition: opacity 0.8s var(--apple-curve), visibility 0.8s;
}

#cinematic-modal.is-active {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

/* --- Video Container (9:16 Cinematic High-End) --- */
.cinematic-video-container {
  width: auto;
  height: 90vh; /* Increased for more immersion */
  max-width: 95vw;
  aspect-ratio: 9/16;
  position: relative;
  z-index: 10;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 50px 150px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: #000;
  transform: scale(0.95);
  transition: transform 1.2s var(--apple-curve);
}

#cinematic-modal.is-active .cinematic-video-container {
  transform: scale(1);
}

#cinematic-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Close Button */
.cinematic-modal-close {
  position: absolute;
  top: clamp(20px, 5vh, 40px);
  right: clamp(20px, 5vw, 40px);
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.4s var(--apple-curve);
  backdrop-filter: blur(10px);
}

.cinematic-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1) rotate(90deg);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Mobile Adaptation */
@media (max-width: 768px) {
  .cinematic-video-container {
    height: 70vh;
    border-radius: 16px;
  }

  .cinematic-modal-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}