/**
 * View Transitions CSS
 *
 * Document Application: Browser-native page transitions using the View Transitions API.
 * Provides smooth, SPA-like navigation between pages without JavaScript frameworks.
 *
 * DESIGN PHILOSOPHY:
 * -----------------
 * 1. MINIMAL - Only animate what needs to animate (main-content only)
 * 2. SUBTLE - Quick 180ms crossfade, no dramatic movement
 * 3. STABLE - Header, footer, sidebars stay fixed (no view-transition-name)
 * 4. ACCESSIBLE - Respects prefers-reduced-motion
 *
 * WHY ONLY MAIN-CONTENT?
 * - Prevents "morphing" between elements of different sizes (e.g., hero sections)
 * - Avoids ghost overlays from sidebar/TOC during transitions
 * - Keeps chrome stable for spatial continuity
 * - Simpler = fewer edge cases and jarring effects
 *
 * AVAILABLE STYLES (set in bengal.toml):
 * - crossfade (default): 180ms pure opacity fade
 * - fade-slide: 150ms opacity + 10px vertical slide
 * - slide: 200ms horizontal slide
 * - none: Instant, no animation
 *
 * Browser Support (as of Dec 2025):
 * - Chrome 111+, Firefox 144+, Safari 18+, Edge 111+ (90%+ global support)
 *
 * @see https://developer.chrome.com/docs/web-platform/view-transitions/
 * @see MOTION_DESIGN_SYSTEM.md for full motion design documentation
 */

/* ==============================================
   VIEW TRANSITION NAMES
   Named elements for coordinated transitions
   ============================================== */

/* Main content - the only element with a view transition name */
main[role="main"],
#main-content {
  view-transition-name: main-content;
}

/*
 * NOTE: Sidebars (docs-nav, toc) intentionally DO NOT have view-transition-name.
 * This prevents "ghost" overlays during page transitions.
 * They naturally stay in place as part of the document flow.
 */

/*
 * Hero sections intentionally excluded from view transitions.
 * The .page-hero (doc pages) and .hero (landing pages) have dramatically
 * different sizes and layouts, causing jarring morph effects during navigation.
 * They transition naturally as part of main-content.
 */

/* Header - exclude from transitions to prevent overlay issues */
/* The header stays stable because it's outside the main-content transition */

/* Footer - exclude from transitions */
/* The footer stays stable because it's outside the main-content transition */

/* ==============================================
   TRANSITION ANIMATIONS
   ============================================== */

/* Fade-slide animation keyframes */
@keyframes fade-slide-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Simple fade keyframes */
@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Slide keyframes */
@keyframes slide-out-left {
  to {
    transform: translateX(-20px);
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
}

/* ==============================================
   MAIN CONTENT TRANSITIONS
   Default: Pure crossfade (matches config default)
   ============================================== */

::view-transition-old(main-content) {
  animation: fade-out 180ms ease-out forwards;
}

::view-transition-new(main-content) {
  animation: fade-in 180ms ease-in;
}

/* ==============================================
   STABLE ELEMENTS
   Elements without view-transition-name stay stable naturally.
   They're not captured in the transition layer, avoiding ghost overlays.
   ============================================== */


/* ==============================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   Enable view transitions for same-origin navigation
   ============================================== */

@view-transition {
  navigation: auto;
}

/* ==============================================
   REDUCED MOTION
   Respect user preference for reduced motion
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all view transition animations */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    animation-duration: 0s !important;
  }

  /* Instant transitions instead of animated */
  @view-transition {
    navigation: auto;
  }
}

/* ==============================================
   TRANSITION STYLE VARIANTS
   Applied via data-transition-style attribute on <html>
   Set in bengal.toml: document_application.navigation.transition_style
   ============================================== */

/* Fade-slide variant - vertical slide with fade (more dynamic) */
[data-transition-style="fade-slide"] ::view-transition-old(main-content) {
  animation: fade-slide-out 150ms ease-out forwards;
}

[data-transition-style="fade-slide"] ::view-transition-new(main-content) {
  animation: fade-slide-in 150ms ease-in;
}

/* Slide variant - horizontal sliding transitions */
[data-transition-style="slide"] ::view-transition-old(main-content) {
  animation: slide-out-left 200ms ease-out forwards;
}

[data-transition-style="slide"] ::view-transition-new(main-content) {
  animation: slide-in-right 200ms ease-in;
}

/* None variant - instant transitions (no animation) */
[data-transition-style="none"] ::view-transition-old(main-content),
[data-transition-style="none"] ::view-transition-new(main-content) {
  animation: none;
}

/* ==============================================
   PRINT
   Disable transitions for print
   ============================================== */

@media print {
  * {
    view-transition-name: none !important;
  }
}
