/* qm-fx-native.css — Native CSS scroll-driven animations & View Transitions
   Additive layer; coordinates with qm-motion.css/js (skips [data-qm-m], .qm-in, [data-home-motion])
   Baseline 2024: Chrome 115+, Safari 17.5+, Firefox 114+ */

:root {
  --qm-fx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --qm-fx-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --qm-fx-mesh-primary: rgba(99, 102, 241, 0.12);
  --qm-fx-mesh-secondary: rgba(139, 92, 246, 0.06);
  --qm-fx-beam: rgba(255, 255, 255, 0.05);
}

/* ========== View Transitions (Chrome 111+, Safari 18+ flagged) ========== */

@supports (view-transition-name: test) {
  /* Enable automatic cross-document view transitions (Chrome 126+) */
  @view-transition {
    navigation: auto;
  }

  /* Named elements morph between pages */
  .qm-vt-hero {
    view-transition-name: hero;
  }

  .qm-vt-title {
    view-transition-name: title;
  }

  .qm-vt-media {
    view-transition-name: media;
  }

  /* Customize transition timing */
  ::view-transition-old(hero),
  ::view-transition-new(hero),
  ::view-transition-old(title),
  ::view-transition-new(title),
  ::view-transition-old(media),
  ::view-transition-new(media) {
    animation-duration: 0.6s;
    animation-timing-function: var(--qm-fx-ease);
  }

  /* Slow down media transitions for smoothness */
  ::view-transition-old(media),
  ::view-transition-new(media) {
    animation-duration: 0.8s;
    animation-timing-function: var(--qm-fx-expo);
  }
}

/* ========== CSS Scroll-Driven Animations (Baseline 2024) ========== */

@supports (animation-timeline: view()) {
  /* Soft fade-up on scroll into view (OpenAI/Linear pattern)
     Only applies to elements NOT already animated by qm-motion.js */
  html.qm-fx-native .qm-fx-reveal:not([data-qm-m]):not(.qm-in):not([data-home-motion] *) {
    animation: qmFxFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }

  @keyframes qmFxFadeUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Card depth push (push toward viewer from behind) */
  html.qm-fx-native .qm-fx-card:not([data-qm-m]):not(.qm-in) {
    animation: qmFxCardDepth linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  @keyframes qmFxCardDepth {
    from {
      opacity: 0;
      transform: perspective(1400px) translate3d(0, 48px, -100px) rotateX(8deg);
    }
    to {
      opacity: 1;
      transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg);
    }
  }

  /* Line-by-line text reveal with clip-path (no DOM splitting) */
  html.qm-fx-native .qm-fx-text:not([data-qm-m]):not(.qm-in) {
    animation: qmFxLineReveal var(--qm-fx-expo) both;
    animation-timeline: view();
    animation-range: entry 5% entry 50%;
  }

  @keyframes qmFxLineReveal {
    from {
      clip-path: inset(0 0 100% 0);
      opacity: 0;
    }
    to {
      clip-path: inset(0 0 0% 0);
      opacity: 1;
    }
  }

  /* Hero image scale on scroll (Apple sticky hero pattern) */
  html.qm-fx-native .qm-fx-hero-scale:not([data-qm-m]) {
    animation: qmFxHeroScale linear both;
    animation-timeline: scroll();
    animation-range: 0vh 100vh;
  }

  @keyframes qmFxHeroScale {
    from {
      scale: 1;
      opacity: 1;
    }
    to {
      scale: 0.92;
      opacity: 0.3;
    }
  }

  /* Parallax layers (subtle depth, transform-only) */
  html.qm-fx-native .qm-fx-px-slow:not([data-qm-m]) {
    animation: qmFxPxSlow linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0% 100%;
  }

  @keyframes qmFxPxSlow {
    from {
      translate: 0 0;
    }
    to {
      translate: 0 -8%;
    }
  }

  html.qm-fx-native .qm-fx-px-fast:not([data-qm-m]) {
    animation: qmFxPxFast linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0% 100%;
  }

  @keyframes qmFxPxFast {
    from {
      translate: 0 0;
    }
    to {
      translate: 0 8%;
    }
  }
}

/* ========== Ken Burns (Slow Zoom) ========== */

/* Full-bleed hero images: subtle scale-in on load
   Extends existing qmaZoom (1.06→1 over 14s) with additional trigger */
html.qm-fx-native .qm-fx-kb {
  animation: qmFxKenBurns 14s var(--qm-fx-expo) forwards;
  transform-origin: 50% 50%;
}

@keyframes qmFxKenBurns {
  from {
    scale: 1.05;
  }
  to {
    scale: 1;
  }
}

/* Variant: zoom out (for backgrounds that should recede) */
html.qm-fx-native .qm-fx-kb-out {
  animation: qmFxKenBurnsOut 16s var(--qm-fx-expo) forwards;
}

@keyframes qmFxKenBurnsOut {
  from {
    scale: 1;
  }
  to {
    scale: 1.08;
  }
}

/* ========== Gradient Mesh Accents (Stripe/Vercel pattern) ========== */

/* Dark section accent (only visible on dark backgrounds) */
.qm-fx-mesh {
  position: absolute;
  width: clamp(400px, 50vw, 700px);
  height: clamp(400px, 50vw, 700px);
  background: radial-gradient(
    circle at 50% 50%,
    var(--qm-fx-mesh-primary) 0%,
    var(--qm-fx-mesh-secondary) 50%,
    transparent 100%
  );
  filter: blur(60px);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: qmFxMeshFloat 24s ease-in-out infinite;
}

html.qm-fx-native .qm-fx-mesh {
  opacity: 1;
}

@keyframes qmFxMeshFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -40px) scale(1.12);
  }
  66% {
    transform: translate(-40px, 50px) scale(0.92);
  }
}

/* Mesh variants (position in parent with absolute positioning) */
.qm-fx-mesh--tl { top: -20%; left: -10%; }
.qm-fx-mesh--tr { top: -20%; right: -10%; }
.qm-fx-mesh--bl { bottom: -20%; left: -10%; }
.qm-fx-mesh--br { bottom: -20%; right: -10%; }
.qm-fx-mesh--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ========== Light Beam Sweep (Linear/Vercel grid pattern) ========== */

.qm-fx-beam {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--qm-fx-beam) 50%,
    transparent 100%
  );
  width: 2px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: qmFxBeamSweep 10s ease-in-out infinite;
}

html.qm-fx-native .qm-fx-beam {
  opacity: 1;
}

@keyframes qmFxBeamSweep {
  0%, 100% {
    transform: translateX(-100%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 100%));
    opacity: 0;
  }
}

/* Vertical beam variant */
.qm-fx-beam--v {
  width: 100%;
  height: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--qm-fx-beam) 50%,
    transparent 100%
  );
  animation-name: qmFxBeamSweepV;
}

@keyframes qmFxBeamSweepV {
  0%, 100% {
    transform: translateY(-100%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 100%));
    opacity: 0;
  }
}

/* Stagger multiple beams */
.qm-fx-beam:nth-child(2) { animation-delay: 3.3s; }
.qm-fx-beam:nth-child(3) { animation-delay: 6.6s; }

/* ========== Magnetic Hover (JS-powered, pointer:fine only) ========== */

/* Applied by JS only when pointer:fine and element in viewport */
html.qm-fx-native .qm-fx-mag {
  translate: var(--qm-fx-mx, 0) var(--qm-fx-my, 0);
  transition: translate 0.2s var(--qm-fx-ease);
  will-change: translate;
}

html.qm-fx-native .qm-fx-mag:hover {
  scale: 1.02;
  transition: translate 0.2s var(--qm-fx-ease), scale 0.3s var(--qm-fx-ease);
}

html.qm-fx-native .qm-fx-mag--out {
  transition: translate 0.6s var(--qm-fx-expo), scale 0.4s var(--qm-fx-expo);
}

/* Magnetic tilt (3D rotation based on pointer position) */
html.qm-fx-native .qm-fx-tilt {
  transform: perspective(1000px) rotateX(var(--qm-fx-rx, 0deg)) rotateY(var(--qm-fx-ry, 0deg));
  transition: transform 0.2s var(--qm-fx-ease);
  will-change: transform;
}

html.qm-fx-native .qm-fx-tilt--out {
  transition: transform 0.6s var(--qm-fx-expo);
}

/* ========== Reduced Motion & Mobile ========== */

@media (max-width: 767px) {
  /* Disable 3D depth transforms on mobile (performance) */
  @supports (animation-timeline: view()) {
    html.qm-fx-native .qm-fx-card:not([data-qm-m]):not(.qm-in) {
      animation-name: qmFxFadeUp; /* Falls back to simple fade */
    }
  }

  /* Reduce Ken Burns scale range */
  @keyframes qmFxKenBurns {
    from { scale: 1.03; }
    to { scale: 1; }
  }

  /* Disable parallax */
  html.qm-fx-native .qm-fx-px-slow,
  html.qm-fx-native .qm-fx-px-fast {
    animation: none !important;
  }

  /* Faster mesh movement (reduce animation cost) */
  .qm-fx-mesh {
    animation-duration: 16s;
    filter: blur(40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable all scroll-driven animations */
  @supports (animation-timeline: view()) {
    html.qm-fx-native .qm-fx-reveal,
    html.qm-fx-native .qm-fx-card,
    html.qm-fx-native .qm-fx-text,
    html.qm-fx-native .qm-fx-hero-scale,
    html.qm-fx-native .qm-fx-px-slow,
    html.qm-fx-native .qm-fx-px-fast {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
      scale: none !important;
      translate: none !important;
    }
  }

  /* Disable Ken Burns */
  html.qm-fx-native .qm-fx-kb,
  html.qm-fx-native .qm-fx-kb-out {
    animation: none !important;
    scale: 1 !important;
  }

  /* Disable ambient animations */
  .qm-fx-mesh,
  .qm-fx-beam {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Disable magnetic effects */
  html.qm-fx-native .qm-fx-mag,
  html.qm-fx-native .qm-fx-tilt {
    translate: none !important;
    transform: none !important;
    scale: none !important;
    transition: none !important;
  }

  /* Keep view transitions but make them instant */
  @supports (view-transition-name: test) {
    ::view-transition-old(hero),
    ::view-transition-new(hero),
    ::view-transition-old(title),
    ::view-transition-new(title),
    ::view-transition-old(media),
    ::view-transition-new(media) {
      animation-duration: 0.01s !important;
    }
  }
}

/* ========== Print ========== */

@media print {
  .qm-fx-mesh,
  .qm-fx-beam {
    display: none !important;
  }

  .qm-fx-reveal,
  .qm-fx-card,
  .qm-fx-text,
  .qm-fx-hero-scale,
  .qm-fx-kb,
  .qm-fx-kb-out {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    scale: 1 !important;
  }
}