/* dr-engine-v20260514a.css — Animation Engine Styles (audit fixes 2026-05-14)
 *
 * Changes vs v20260512d:
 *   - Defect 10: will-change scoped to active-state only, not blanket-applied
 *   - Defect 1 prep: keep baseline opacity:1 — the engine JS now uses
 *     `.dr-above-fold` escape instead of flipping visibility globally.
 */

/* ═══════════════════════════════════════════════════════════════════
   HERO CANVAS — full-bleed behind hero content
   ═══════════════════════════════════════════════════════════════════ */
.hero-vp {
  position: relative;
  overflow: hidden;
}

#dr-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 1.2s ease;
}

.dr-engine-ready #dr-hero-canvas { opacity: 0.6; }
[data-theme="dark"] #dr-hero-canvas { opacity: 0.8; }

/* Hero content always above canvas */
.hero-inner-vp {
  position: relative;
  z-index: 1;
}

/* Aurora stage — hide when engine canvas takes over */
.dr-engine-ready .aurora-stage { display: none !important; }

.dr-engine-ready .dr-hero-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL REVEAL — progressive enhancement base (Defect 1)
   ═══════════════════════════════════════════════════════════════════ */

/* No CSS hiding at baseline. The engine JS injects the hide rule
   with a `:not(.dr-above-fold)` escape AFTER marking above-fold
   elements. This eliminates the visible → invisible → visible flash. */
.dr-reveal,
[data-dr-reveal],
.dr-stagger-group > * {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   PERFORMANCE — contain hints
   ═══════════════════════════════════════════════════════════════════ */
.hero-vp,
.hero-product-card,
.brand-reveal {
  contain: layout style;
}

#dr-hero-canvas { contain: strict; }

/* Defect 10: will-change ONLY on active/transitional state, not always.
   Blanket-applying will-change forced GPU layer promotion for every
   reveal element and tilt card on the page (~30+ elements) at all times.
   Now it activates only when the element is about to or actively
   animating. */
.dr-card-tilt:hover,
.magnetic:hover,
[data-dr-reveal]:not(.dr-revealed):not(.dr-above-fold),
[data-dr-parallax] {
  will-change: transform;
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   CURSOR TRAIL — theme-aware
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .dr-cursor-trail {
  border-color: rgba(201, 97, 63, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════
   TEXT SPLIT — prevent FOUC
   ═══════════════════════════════════════════════════════════════════ */
[data-split] { opacity: 1; }

/* Defect 3: removed the `.dr-engine-ready [data-split]:not([data-split-done])`
   rule that blanked the H1. The JS now builds the split fragment offscreen
   and swaps it in atomically, then rAF-triggers the animation. */

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-dr-reveal],
  [data-reveal-stagger] > *,
  .dr-card-tilt,
  .magnetic,
  .hero-action.primary,
  #dr-hero-canvas {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .dr-page-transition { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #dr-hero-canvas { opacity: 0.5; }
  [data-theme="dark"] #dr-hero-canvas { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO MIN-HEIGHT — Defect 11 svh/dvh fallback chain
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 761px) {
  .hero-vp {
    min-height: min(720px, calc(100vh - 64px));  /* legacy fallback */
    min-height: min(720px, calc(100svh - 64px)); /* iOS 15.4+ */
    min-height: min(720px, calc(100dvh - 64px)); /* iOS 16+ — smoother with dynamic toolbar */
  }
}