/* ============================================================
   Catapulte — css/retro/animations.css
   Retro/Vintage skin: page-fold overlay, film grain canvas,
   per-section vignette, typewriter cursor blink,
   reduced motion guards.

   Loaded as third retro CSS file (after tokens + components).
   z-index hierarchy: content < vignette 1 < grain 9998 < fold overlay 10000
   ============================================================ */

/* ── PAGE-FOLD OVERLAY ──
   Direct body child — required for iOS Safari clip-path + position:fixed
   stacking context compatibility (WebKit bug with transform ancestors).
   Hidden by default via visibility:hidden.
   z-index 10000 sits above header (1000), cursor (9999), grain (9998).
   Transform origin left center for 3D page-fold effect.
   ──────────────────────────────────────────────────────────── */

.retro-fold {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
}

/* ── NAVIGATED LOAD GATE STATE ──
   When html has page-transition-active, fold covers full viewport.
   Gate 4 inline script sets this class before first paint when
   sessionStorage 'catapulte-transition' = 'entering'.
   CSS safety timeout: if JS never removes class, hide after 5s.
   ──────────────────────────────────────────────────────────── */

html.page-transition-active[data-skin="retro"] .retro-fold {
  visibility: visible;
  pointer-events: all;
  animation: retro-safety-fade-out 0s ease 5s forwards;
}

@keyframes retro-safety-fade-out {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ── FILM GRAIN CANVAS OVERLAY ──
   Positioned above content but below cursor.
   opacity ~7%: visible sepia-tinted texture across the page.
   will-change: transform promotes to GPU compositing layer.
   width/height 100vw/vh prevents subpixel gaps on retina.
   ──────────────────────────────────────────────────────────── */

.retro-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  will-change: transform;
  width: 100vw;
  height: 100vh;
}

/* ── VIGNETTE — CSS-only per-section darkening ──
   Radial gradient pseudo-element on each section creates
   photographic edge darkening. Scrolls with content because
   it's attached to sections, not the viewport.
   z-index 1 keeps it above section content backgrounds
   but below interactive elements.
   Parent sections need position:relative for pseudo positioning.
   ──────────────────────────────────────────────────────────── */

[data-skin="retro"] .site-section,
[data-skin="retro"] .site-hero {
  position: relative;
}

[data-skin="retro"] .site-section::after,
[data-skin="retro"] .site-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 1;
}

/* ── REDUCED MOTION OVERRIDES ──
   All retro animations respect prefers-reduced-motion.
   Fold transitions suppressed (JS guards also apply).
   Grain canvas hidden. Vignette pseudo-elements removed.
   Cursor visible but static (no blink).
   ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .retro-fold {
    display: none !important;
  }

  .retro-grain {
    display: none;
  }

  [data-skin="retro"] .site-section::after,
  [data-skin="retro"] .site-hero::after {
    display: none;
  }

}