/**
 * FoxyTales Native View Transitions API Stylesheet
 *
 * Implements cross-document navigation transitions, catalog-to-reader cover morphing,
 * reader stage frame continuity, and Visual Novel scene cross-fades.
 *
 * @package FoxyTales
 */

/* ==========================================================================
   1. GLOBAL CROSS-DOCUMENT VIEW TRANSITION OPT-IN
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* ==========================================================================
   2. ROOT DOCUMENT CROSS-FADE ANIMATIONS
   Eliminates white flashes between MPA page loads and provides subtle app feel
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 260ms cubic-bezier(0.4, 0, 0.2, 1) both ft-root-fade-out;
  }

  ::view-transition-new(root) {
    animation: 260ms cubic-bezier(0.4, 0, 0.2, 1) both ft-root-fade-in;
  }
}

@keyframes ft-root-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.99);
  }
}

@keyframes ft-root-fade-in {
  from {
    opacity: 0;
    transform: scale(1.01);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   3. CATALOG CARD TO READER STAGE COVER MORPHING (Shared Element Transitions)
   Morphs the 3:4 portrait cover from archive-novel.php / front-page.php directly
   into the hero cover / stage on single-novel.php.
   ========================================================================== */

/* Catalog & Reader Cover Shared Element Identifiers */
.ft-novel-card[data-slug="protocol-aegis"] .ft-novel-card-cover,
.ft-reader-stage[data-novel-slug="protocol-aegis"] .ft-reader-cover-hero,
.ft-novel-hero[data-slug="protocol-aegis"] .ft-novel-cover-target {
  view-transition-name: novel-cover-protocol-aegis;
}

.ft-novel-card[data-slug="chrono-drifters"] .ft-novel-card-cover,
.ft-reader-stage[data-novel-slug="chrono-drifters"] .ft-reader-cover-hero,
.ft-novel-hero[data-slug="chrono-drifters"] .ft-novel-cover-target {
  view-transition-name: novel-cover-chrono-drifters;
}

.ft-novel-card[data-slug="shadows-of-neo-kyoto"] .ft-novel-card-cover,
.ft-reader-stage[data-novel-slug="shadows-of-neo-kyoto"] .ft-reader-cover-hero,
.ft-novel-hero[data-slug="shadows-of-neo-kyoto"] .ft-novel-cover-target {
  view-transition-name: novel-cover-shadows-of-neo-kyoto;
}

.ft-novel-card[data-slug="starfall-outlaws"] .ft-novel-card-cover,
.ft-reader-stage[data-novel-slug="starfall-outlaws"] .ft-reader-cover-hero,
.ft-novel-hero[data-slug="starfall-outlaws"] .ft-novel-cover-target {
  view-transition-name: novel-cover-starfall-outlaws;
}

/* Dynamic fallback for any additional novel slugs via inline style or data-attribute */
[style*="view-transition-name: novel-cover-"] {
  contain: layout;
}

/* View Transition Group Interpolation Parameters */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(novel-cover-protocol-aegis),
  ::view-transition-group(novel-cover-chrono-drifters),
  ::view-transition-group(novel-cover-shadows-of-neo-kyoto),
  ::view-transition-group(novel-cover-starfall-outlaws) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  ::view-transition-old(novel-cover-protocol-aegis),
  ::view-transition-old(novel-cover-chrono-drifters),
  ::view-transition-old(novel-cover-shadows-of-neo-kyoto),
  ::view-transition-old(novel-cover-starfall-outlaws) {
    animation: 380ms cubic-bezier(0.2, 0, 0, 1) both ft-cover-morph-out;
  }

  ::view-transition-new(novel-cover-protocol-aegis),
  ::view-transition-new(novel-cover-chrono-drifters),
  ::view-transition-new(novel-cover-shadows-of-neo-kyoto),
  ::view-transition-new(novel-cover-starfall-outlaws) {
    animation: 380ms cubic-bezier(0.2, 0, 0, 1) both ft-cover-morph-in;
  }
}

@keyframes ft-cover-morph-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ft-cover-morph-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   4. READER STAGE CONTINUITY TRANSITIONS
   Maintains container stability when switching between Webtoon and VN Mode
   ========================================================================== */
.ft-reader-stage,
.ft-reader-viewport {
  view-transition-name: ft-reader-stage;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(ft-reader-stage) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  }
}

/* ==========================================================================
   5. VISUAL NOVEL SCENE ADVANCEMENT CROSS-FADES (Same-Document Transitions)
   Triggered via document.startViewTransition() during slide navigation
   ========================================================================== */
.ft-vn-slide.is-active {
  view-transition-name: vn-scene;
}

.ft-vn-dialogue-box {
  view-transition-name: vn-dialogue;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(vn-scene) {
    animation: 320ms cubic-bezier(0.4, 0, 0.2, 1) both ft-vn-slide-out;
  }

  ::view-transition-new(vn-scene) {
    animation: 320ms cubic-bezier(0.4, 0, 0.2, 1) both ft-vn-slide-in;
  }

  ::view-transition-old(vn-dialogue) {
    animation: 180ms ease-out both ft-dialogue-fade-out;
  }

  ::view-transition-new(vn-dialogue) {
    animation: 220ms ease-in both ft-dialogue-fade-in;
  }
}

@keyframes ft-vn-slide-out {
  from {
    opacity: 1;
    transform: scale(1) translateX(0);
    filter: brightness(1);
  }
  to {
    opacity: 0;
    transform: scale(0.97) translateX(-18px);
    filter: brightness(0.7);
  }
}

@keyframes ft-vn-slide-in {
  from {
    opacity: 0;
    transform: scale(1.03) translateX(18px);
    filter: brightness(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
    filter: brightness(1);
  }
}

@keyframes ft-dialogue-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes ft-dialogue-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   6. MOTION SAFETY & ACCESSIBILITY FALLBACKS
   Disables all custom keyframes for users with prefers-reduced-motion: reduce
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}