/* AI Scroll Reveal — 3D perspective transition
 * JS sets --reveal-progress (0→1) on .ai-reveal-perspective.
 * CSS handles all visual math via calc().
 * Progressive enhancement: no JS = fully visible, no transforms.
 */

/* ==========================================
   DEFAULT STATE (no JS / progressive fallback)
   ========================================== */
.ai-reveal-perspective {
  position: relative;
}

.ai-reveal-card {
  position: relative;
}

.ai-reveal-heading {
  text-align: center;
  padding: 0 2rem;
}

.ai-reveal-heading .eyebrow {
  display: block;
  margin-bottom: 0.75rem;
}

.ai-reveal-heading .section-headline {
  margin: 0;
}

/* ==========================================
   ACTIVE STATE (JS opted in)
   ========================================== */
[data-reveal-active="true"].ai-reveal-perspective {
  perspective: 1200px;
  perspective-origin: center top;
  padding-top: 4rem;
}

[data-reveal-active="true"] .ai-reveal-card {
  transform-origin: center top;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border: 2px solid rgba(108, 108, 108, 0.4);
  border-radius: 24px;
  background: #001212;
  overflow: hidden;
  transform:
    rotateX(calc(15deg * (1 - var(--reveal-progress, 1))))
    scale(calc(1.05 - 0.05 * var(--reveal-progress, 1)))
    translateY(calc(40px * (1 - var(--reveal-progress, 1))));
}

[data-theme="light"] [data-reveal-active="true"] .ai-reveal-card {
  background: var(--bg-primary);
  border-color: rgba(2, 94, 196, 0.2);
}

/* GPU-safe box-shadow on pseudo (not on transform layer) */
[data-reveal-active="true"] .ai-reveal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 60px rgba(120, 175, 46, 0.04), 0 4px 30px rgba(0, 0, 0, 0.3);
  opacity: var(--reveal-progress, 1);
  pointer-events: none;
  z-index: -1;
}

[data-theme="light"] [data-reveal-active="true"] .ai-reveal-card::before {
  box-shadow: 0 0 60px rgba(2, 94, 196, 0.04), 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* Heading parallax */
[data-reveal-active="true"] .ai-reveal-heading {
  transform: translateY(calc(60px * (1 - var(--reveal-progress, 0))));
  opacity: var(--reveal-progress, 1);
  transition: none; /* JS drives via --reveal-progress, no CSS transition needed */
}

/* ==========================================
   RESPONSIVE — MOBILE (<768px)
   No 3D rotateX, just scale + fade
   ========================================== */
@media (max-width: 767px) {
  [data-reveal-active="true"].ai-reveal-perspective {
    perspective: none;
  }

  [data-reveal-active="true"] .ai-reveal-card {
    transform:
      scale(calc(0.92 + 0.08 * var(--reveal-progress, 1)))
      translateY(calc(30px * (1 - var(--reveal-progress, 1))));
    opacity: var(--reveal-progress, 1);
  }
}

/* ==========================================
   REDUCED MOTION — no animation at all
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  .ai-reveal-card,
  .ai-reveal-heading {
    transform: none !important;
    opacity: 1 !important;
  }
}