/* dr-engine-v20260512a.css — Animation Engine Styles
 *
 * Companion to dr-engine-v20260512a.js. Handles:
 *   - Hero canvas sizing and layering
 *   - WebGPU/Canvas2D effect positioning
 *   - Scroll-driven animation base states
 *   - Page transition overlays
 *   - Cursor trail theming
 *   - Performance hints (will-change, contain)
 *
 * ~3KB. Loaded before the JS engine.
 */

/* ═══════════════════════════════════════════════════════════════════
   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;
}

/* Dark theme: canvas is more prominent */
[data-theme="dark"] #dr-hero-canvas {
  opacity: 0.8;
}

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

/* Aurora stage (existing) — 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
   ═══════════════════════════════════════════════════════════════════ */

/* Before JS loads, everything is visible */
[data-dr-reveal] {
  opacity: 1;
  transform: none;
}

/* JS adds these transitions */
.dr-engine-ready [data-dr-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.dr-engine-ready [data-dr-reveal].dr-revealed {
  opacity: 1;
  transform: translateY(0);
}

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

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

/* GPU compositing for animated elements */
.dr-card-tilt,
.magnetic,
[data-dr-reveal],
[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;
}

.dr-engine-ready [data-split]:not([data-split-done]) {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — honor user preference
   ═══════════════════════════════════════════════════════════════════ */
@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 — equal quality, adapted layout
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #dr-hero-canvas {
    opacity: 0.5;
  }

  [data-theme="dark"] #dr-hero-canvas {
    opacity: 0.7;
  }
}