/* ═══════════════════════════════════════════════════════════════
   GENERATED: css/depth.css — v1.0 — 2026-07-28
   SKYRECORDS 3D DEPTH SYSTEM — professional dimensionality on the
   v11.0 aesthetic. Theme-aware, GPU-friendly, reduced-motion aware.
   Load AFTER css/main.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── theme-aware depth tokens ── */
:root {
  --horizon-line: rgba(10, 94, 168, 0.16);
  --horizon-glow: rgba(10, 94, 168, 0.10);
  --tilt-glare:   rgba(10, 94, 168, 0.18);
  --elev-ambient: rgba(10, 94, 168, 0.05);
  --elev-key:     rgba(10, 94, 168, 0.09);
  --elev-contact: rgba(10, 94, 168, 0.13);
}
[data-theme="dark"] {
  --horizon-line: rgba(59, 130, 246, 0.20);
  --horizon-glow: rgba(59, 130, 246, 0.12);
  --tilt-glare:   rgba(255, 255, 255, 0.22);
  --elev-ambient: rgba(0, 0, 0, 0.35);
  --elev-key:     rgba(0, 0, 0, 0.45);
  --elev-contact: rgba(59, 130, 246, 0.12);
}

/* ── 3D FLIGHT HORIZON ── perspective grid streaming toward viewer ── */
.hero-horizon {
  position: absolute; left: -25%; right: -25%; bottom: -8%; height: 58%;
  perspective: 620px; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 85%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 85%);
  will-change: transform;
}
.hero-horizon::before { /* glow at the vanishing point */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: radial-gradient(ellipse at 50% 100%, var(--horizon-glow) 0%, transparent 70%);
}
.grid-plane {
  position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotateX(62deg);
  background-image:
    linear-gradient(var(--horizon-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--horizon-line) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: horizonScroll 6s linear infinite;
}
@keyframes horizonScroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 0 0; }
}

/* ── 3D TILT CARDS ── cursor-tracked, with specular glare ── */
.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
  will-change: transform;
}
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; z-index: 6;
  transition: opacity 0.35s ease;
  background: radial-gradient(circle at 50% 50%, var(--tilt-glare) 0%, transparent 55%);
  mix-blend-mode: soft-light;
}

/* ── LAYERED ELEVATION ── ambient + key + contact shadows ── */
.elev-1 { box-shadow: 0 1px 2px var(--elev-ambient), 0 4px 12px var(--elev-ambient); }
.elev-2 { box-shadow: 0 2px 4px var(--elev-ambient), 0 8px 24px var(--elev-key), 0 20px 48px -12px var(--elev-contact); }
.elev-3 { box-shadow: 0 4px 8px var(--elev-ambient), 0 16px 40px var(--elev-key), 0 32px 80px -16px var(--elev-contact); }

/* ── TACTILE BUTTON PRESS ── */
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 2px 8px -2px var(--elev-contact);
  transition-duration: 0.08s;
}

/* ── REDUCED MOTION — depth stays, motion goes ── */
@media (prefers-reduced-motion: reduce) {
  .grid-plane { animation: none; }
  .tilt-card, .hero-horizon { transform: none !important; }
}