@import 'generative-ai-light.css';
/**
 * VOX Documentary Studio Stylesheet
 * Authentic Paper-Collage & Motion Graphics Design System
 * Inspired by VOX / Johnny Harris / Netflix Editorial Documentaries
 */

:root {
  --vox-yellow: #fff000;
  --vox-black: #111111;
  --paper-bg: #ece5d8;
  --paper-card: #f8f5ee;
  --paper-shadow: 0 16px 38px -8px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.12);
  --paper-border: #d5cbba;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #0c0e14;
  color: #1e293b;
}

.font-vox {
  font-family: 'Anton', impact, sans-serif;
  letter-spacing: -0.02em;
}

.font-mono-doc {
  font-family: 'Space Mono', monospace;
}

.font-serif-doc {
  font-family: 'Merriweather', Georgia, serif;
}

/* Paper Board Canvas Texture with Architect Grid */
.drafting-board {
  background-color: var(--paper-bg);
  background-image: 
    radial-gradient(#c8bca7 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(180, 165, 140, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(180, 165, 140, 0.18) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.12);
}

/* Architectural Border Ticks */
.drafting-board::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, #a89d89, #a89d89 1px, transparent 1px, transparent 16px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 5;
}
.drafting-board::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background-image: repeating-linear-gradient(180deg, #a89d89, #a89d89 1px, transparent 1px, transparent 16px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 5;
}

/* Authentic Translucent Scotch Tape */
.scotch-tape {
  position: absolute;
  width: 100px;
  height: 28px;
  background: rgba(255, 255, 255, 0.65);
  border-left: 2px dashed rgba(200, 190, 170, 0.8);
  border-right: 2px dashed rgba(200, 190, 170, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(2px);
  z-index: 35;
  pointer-events: none;
}

/* Archival Case File Stamp with VOX Rubber Stamp Drop */
.stamp-box {
  border: 2px solid #dc2626;
  color: #dc2626;
  padding: 3px 8px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transform: rotate(-3deg);
  display: inline-block;
  mask-image: radial-gradient(circle, black 70%, rgba(0,0,0,0.6) 100%);
  transform-origin: center center;
}

@keyframes stampSlam {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-9deg);
    filter: blur(1.5px);
  }
  60% {
    opacity: 1;
    transform: scale(0.92) rotate(-2deg);
    filter: blur(0);
  }
  85% {
    transform: scale(1.05) rotate(-3.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.0) rotate(-3deg);
  }
}
.stamp-slam {
  animation: stampSlam 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  will-change: transform, opacity;
}

/* VOX Canary Yellow Highlighter Streak */
.vox-highlighter {
  background: var(--vox-yellow);
  color: #000000;
  padding: 2px 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(255, 240, 0, 0.4);
}

/* Marker Drawing Wipe Animation */
@keyframes markerDraw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.vox-highlighter-animated {
  display: inline-block;
  animation: markerDraw 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* VOX Chisel-Tip Headline Underline Draw */
@keyframes markerDrawLine {
  0% {
    width: 0%;
    opacity: 0.4;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}
.vox-underline-draw {
  animation: markerDrawLine 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* VOX Anton Headline Impact Punch */
@keyframes headlinePunch {
  0% {
    transform: scale(0.93) translateY(8px);
    letter-spacing: 0.06em;
    opacity: 0.2;
  }
  65% {
    transform: scale(1.025) translateY(-2px);
    letter-spacing: -0.015em;
    opacity: 1;
  }
  100% {
    transform: scale(1.0) translateY(0);
    letter-spacing: normal;
    opacity: 1;
  }
}
.vox-headline-punch {
  animation: headlinePunch 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, letter-spacing, opacity;
}

/* Paper Cutout Elevation & Physics */
.paper-cutout {
  box-shadow: var(--paper-shadow);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.paper-cutout:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.38), 0 6px 18px rgba(0, 0, 0, 0.16);
}

/* Restrict Card Description Lines in Windowed Mode to Prevent Dock Clipping */
#cutoutDesc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

#floatingCutoutCard {
  max-height: 480px;
}

/* Compact Laptop Short Viewport Adaptations (< 800px height) */
@media (max-height: 800px) and (min-width: 1024px) {
  .drafting-stage-container {
    min-height: 520px !important;
  }
  #floatingCutoutCard {
    padding: 0.75rem 1.15rem !important;
    max-height: 420px !important;
  }
  .photo-frame {
    height: 11.5rem !important;
  }
  #stageArena {
    gap: 0.5rem !important;
  }
  #voxHeadline {
    font-size: clamp(2.5rem, 4.5vw, 4.5rem) !important;
  }
}

/* Physical Paper Card Drop & Settle Spring */
@keyframes paperDropSpring {
  0% {
    opacity: 0.1;
    transform: translateY(-22px) rotate(-1.6deg) scale(0.965);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  60% {
    opacity: 1;
    transform: translateY(3px) rotate(0.4deg) scale(1.018);
    box-shadow: 0 28px 45px -8px rgba(0, 0, 0, 0.36);
  }
  80% {
    transform: translateY(-1px) rotate(-0.15deg) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1.0);
    box-shadow: var(--paper-shadow);
  }
}
.paper-drop-spring {
  animation: paperDropSpring 0.5s cubic-bezier(0.25, 1, 0.3, 1) 0.04s both;
  will-change: transform, opacity, box-shadow;
}

/* Directional Film Transitions with Soft Momentum */
.stage-transition-exit-next {
  opacity: 0 !important;
  transform: translateX(-24px) scale(0.985) !important;
  filter: blur(2.5px) !important;
  transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.4, 0, 1, 1), filter 0.2s ease-in !important;
}

.stage-transition-exit-prev {
  opacity: 0 !important;
  transform: translateX(24px) scale(0.985) !important;
  filter: blur(2.5px) !important;
  transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.4, 0, 1, 1), filter 0.2s ease-in !important;
}

.stage-transition-enter-next {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  filter: blur(0) !important;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stage-transition-enter-prev {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  filter: blur(0) !important;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Fallback Transitions */
.stage-transition-exit {
  opacity: 0 !important;
  transform: translateY(-10px) scale(0.985) !important;
  filter: blur(2px) !important;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, filter 0.2s ease-in !important;
}

.stage-transition-enter {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 4 Distinct Alternating Ken-Burns Documentary Paths */
@keyframes kenBurnsPanTL {
  0% { transform: scale(1.0) translate(-1%, -1%); }
  50% { transform: scale(1.05) translate(0%, 0%); }
  100% { transform: scale(1.09) translate(1.2%, 1%); }
}
.ken-burns-pan-tl {
  animation: kenBurnsPanTL 16s ease-in-out infinite alternate;
  transform-origin: top left;
}

@keyframes kenBurnsZoomIn {
  0% { transform: scale(1.01) translate(0%, 0%); }
  100% { transform: scale(1.10) translate(0%, -1.8%); }
}
.ken-burns-zoom-in {
  animation: kenBurnsZoomIn 15s ease-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes kenBurnsZoomOut {
  0% { transform: scale(1.10) translate(0.8%, 0.8%); }
  100% { transform: scale(1.0) translate(-0.5%, -0.5%); }
}
.ken-burns-zoom-out {
  animation: kenBurnsZoomOut 16s ease-out infinite alternate;
  transform-origin: center center;
}

@keyframes kenBurnsTrackX {
  0% { transform: scale(1.06) translate(-1.8%, 0%); }
  100% { transform: scale(1.06) translate(1.8%, 0%); }
}
.ken-burns-track-x {
  animation: kenBurnsTrackX 17s ease-in-out infinite alternate;
  transform-origin: center center;
}

/* Default Ken-Burns fallback */
.ken-burns {
  animation: kenBurnsPanTL 16s ease-out infinite alternate;
}

/* 35mm Archival Film Vignette on Cutout Photo Container */
#cutoutPhotoContainer {
  position: relative;
  overflow: hidden;
}
#cutoutPhotoContainer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.32);
  z-index: 10;
}

/* Audio Scrubber Needle Glow */
#timelineFill {
  position: relative;
}
#timelineFill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 8px #facc15, 0 0 16px rgba(250, 204, 21, 0.8);
}

/* Dashed Route Animation for Maps */
@keyframes dash {
  to {
    stroke-dashoffset: -40;
  }
}
.route-path {
  stroke-dasharray: 8, 8;
  animation: dash 2.5s linear infinite;
}

/* Dynamic Layout Architectures for VOX Stage Arena */
#stageArena {
  display: grid;
  width: 100%;
  flex: 1;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: auto;
  min-height: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Layout A: Right Hero Cutout (Scenes 1, 5) */
.layout-right-hero #stageArena {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-right-hero #stageArena {
    grid-template-columns: 46% 54%;
  }
  .layout-right-hero #editorialCol {
    order: 1;
  }
  .layout-right-hero #cutoutCol {
    order: 2;
  }
}

/* Layout B: Left Hero Cutout (Scenes 2, 6) */
.layout-left-hero #stageArena {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-left-hero #stageArena {
    grid-template-columns: 54% 46%;
  }
  .layout-left-hero #editorialCol {
    order: 2;
  }
  .layout-left-hero #cutoutCol {
    order: 1;
  }
}

/* Layout C: Centerpiece Hero (Scenes 3, 7) - Balanced Dual-Tier Structure */
.layout-center-hero #stageArena {
  grid-template-columns: 1fr;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .layout-center-hero #stageArena {
    grid-template-columns: 46% 54%;
  }
  .layout-center-hero #editorialCol {
    order: 1;
  }
  .layout-center-hero #cutoutCol {
    order: 2;
  }
}

/* Layout D: 50/50 Split Editorial (Scene 4) */
.layout-split-hero #stageArena {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-split-hero #stageArena {
    grid-template-columns: 46% 54%;
  }
}

/* Layout Intro / Pre-Scene Dossier Briefing */
.layout-intro-hero #stageArena {
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .layout-intro-hero #stageArena {
    grid-template-columns: 46% 54%;
  }
}

/* Fullscreen Mode Overrides: Broadcast Presentation Theater */
:fullscreen,
:-webkit-full-screen {
  background-color: #0c0e14 !important;
}

:fullscreen.drafting-stage-container,
:fullscreen .drafting-stage-container,
:-webkit-full-screen.drafting-stage-container,
:-webkit-full-screen .drafting-stage-container {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  padding: 1.25rem 2rem !important;
  box-sizing: border-box !important;
}

:fullscreen #draftingStage,
:-webkit-full-screen #draftingStage {
  padding: 1.25rem 2rem !important;
  border-radius: 1rem !important;
  max-height: calc(100vh - 2.5rem) !important;
}

:fullscreen #stageArena,
:-webkit-full-screen #stageArena {
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  grid-template-columns: 30% 70% !important;
  max-width: 1500px !important;
  gap: 2rem !important;
  align-items: center !important;
}

:fullscreen .layout-left-hero #stageArena,
:-webkit-full-screen .layout-left-hero #stageArena {
  grid-template-columns: 70% 30% !important;
}

:fullscreen .layout-center-hero #stageArena,
:-webkit-full-screen .layout-center-hero #stageArena {
  grid-template-columns: 30% 70% !important;
  max-width: 1500px !important;
}

:fullscreen .layout-split-hero #stageArena,
:-webkit-full-screen .layout-split-hero #stageArena {
  grid-template-columns: 30% 70% !important;
}

/* Fullscreen Scaled Typography Hierarchy & Hero Visual Proportions */
:fullscreen #voxHeadline,
:-webkit-full-screen #voxHeadline {
  font-size: clamp(3.2rem, 6.5vw, 6.8rem) !important;
  line-height: 0.94 !important;
}

:fullscreen #floatingCutoutCard,
:-webkit-full-screen #floatingCutoutCard {
  width: 100% !important;
  max-width: 1250px !important;
  max-height: calc(100vh - 190px) !important;
  padding: 1.5rem 2.25rem !important;
  box-sizing: border-box !important;
}

:fullscreen .card-inner-flex,
:-webkit-full-screen .card-inner-flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2.5rem !important;
  width: 100% !important;
}

:fullscreen #cutoutPhotoContainer,
:-webkit-full-screen #cutoutPhotoContainer {
  width: auto !important;
  flex-shrink: 0 !important;
}

:fullscreen .photo-frame,
:-webkit-full-screen .photo-frame {
  width: clamp(380px, 32vw, 540px) !important;
  height: clamp(260px, 38vh, 400px) !important;
  flex-shrink: 0 !important;
}

:fullscreen #cutoutPhotoContainer img,
:-webkit-full-screen #cutoutPhotoContainer img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

:fullscreen #cutoutTitle,
:-webkit-full-screen #cutoutTitle {
  font-size: clamp(1.4rem, 1.8vw, 2.1rem) !important;
  line-height: 1.25 !important;
  word-break: normal !important;
}

:fullscreen #cutoutDesc,
:-webkit-full-screen #cutoutDesc {
  font-size: clamp(1.05rem, 1.2vw, 1.25rem) !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 5 !important;
  max-width: 650px !important;
  display: -webkit-box !important;
  word-break: normal !important;
}

:fullscreen #collocationHighlight,
:-webkit-full-screen #collocationHighlight {
  font-size: clamp(1rem, 1.3vw, 1.45rem) !important;
  padding: 4px 12px !important;
}

:fullscreen #vietnameseColloc,
:-webkit-full-screen #vietnameseColloc {
  font-size: clamp(0.9rem, 1.1vw, 1.2rem) !important;
}

:fullscreen #narrationSubtitles,
:-webkit-full-screen #narrationSubtitles {
  font-size: clamp(1.05rem, 1.35vw, 1.45rem) !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 2 !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}



/* ==========================================================================
   VOX EDITORIAL STUDIO - LIGHT TECH CONTRAST & ACCESSIBILITY SHIELD
   ========================================================================== */

/* 1. Drafting Board Badges & Stamps */
#sceneYearBadge {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #334155 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

#sceneEraTag {
  color: #0F172A !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

#currentSceneNum {
  color: #0F172A !important;
  font-weight: 900 !important;
}

/* 2. Narration Dock & Subtitles (Dark Floating Glass Capsule) */
#stageFooterDock {
  background-color: #0F172A !important;
  border: 1px solid #1E293B !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#narrationSubtitles {
  color: #F8FAFC !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

#stageDockControls button {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid #334155 !important;
  font-weight: 700 !important;
}

#stageDockControls button:hover {
  background-color: #334155 !important;
  color: #FFFFFF !important;
}

#stageDockControls #btnDockAutoPlay {
  background-color: #FACC15 !important;
  color: #0F172A !important;
  border: 1px solid #EAB308 !important;
  font-weight: 900 !important;
}

#stageDockControls #btnDockAutoPlay:hover {
  background-color: #FDE047 !important;
}

/* 3. Player Controller Bar (Clean Light Tech Surface) */
#stageControllerBar,
.lg\:col-span-8 > .bg-slate-900,
#draftingStageContainer + div {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

#progressTime,
#progressTime + div + span,
#totalDurationLabel {
  color: #0F172A !important;
  font-weight: 700 !important;
}

#timelineTrack {
  background-color: #E2E8F0 !important;
}

#timelineFill {
  background-color: #EAB308 !important;
}

#stageControllerBar button,
.lg\:col-span-8 > .bg-slate-900 button,
#draftingStageContainer + div button {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 700 !important;
}

#stageControllerBar button:hover,
.lg\:col-span-8 > .bg-slate-900 button:hover,
#draftingStageContainer + div button:hover {
  background-color: #EEF2FF !important;
  color: #4F46E5 !important;
  border-color: #C7D2FE !important;
}

/* 4. Schematic Map Card (Light Tech Surface & SVG Contrast) */
#voxMapCard,
.lg\:col-span-4 > div:first-child {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

#voxMapTitle {
  color: #0F172A !important;
  font-weight: 800 !important;
}

#voxMapBadge {
  background-color: #FEF08A !important;
  color: #854D0E !important;
  border: 1px solid #FDE047 !important;
  font-weight: 800 !important;
}

#voxMapCard .relative.w-full.h-32,
.lg\:col-span-4 > div:first-child .relative.w-full.h-32 {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

#voxMapCard svg text,
.lg\:col-span-4 > div:first-child svg text {
  fill: #0F172A !important;
  font-weight: 700 !important;
}

#voxMapSubtitle {
  color: #475569 !important;
  font-weight: 500 !important;
}

/* 5. Right Sidebar Scene Cards List */
.vox-scene-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  transition: all 0.2s ease;
}

.vox-scene-card:hover {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

.vox-scene-card.is-active {
  background-color: #EEF2FF !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12) !important;
}

.vox-scene-card.is-active h4 {
  color: #4F46E5 !important;
}

.vox-card-intro {
  background-color: #FEF9C3 !important;
  border: 1.5px solid #FDE047 !important;
}

.vox-card-intro:hover {
  background-color: #FEF08A !important;
}

.vox-card-intro.is-active {
  background-color: #EEF2FF !important;
  border-color: #4F46E5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12) !important;
}