/* ============================================================
   Vi2ionai — Premium 3D homepage layer (Phase 1)
   Additive component classes only. Loaded after the page's inline
   <style> block so these rules win on shared selectors (.pcard,
   .hero-prod-card, .sol-card, etc). Nothing here touches JS-owned
   DOM contracts (#hero-products, #product-grid ids stay put).
   ============================================================ */

/* ── Scroll reveal ─────────────────────────────────────────────── */
/* No will-change here on purpose — it's applied to dozens of elements
   sitewide, and a blanket will-change hint promotes every one of them
   to its own compositor layer for the page's whole life. Cheap for a
   couple of elements, expensive at this scale (and on low-end/mobile
   GPUs). The transition is short-lived, so the browser's own
   heuristics handle layer promotion fine without the hint. */
/* Uses the standalone `translate` property (not `transform`) for the
   slide-up, specifically so it composes independently with elements
   that are ALSO .tilt-card (which uses `transform` for rotation) —
   otherwise .reveal.is-visible's higher-specificity `transform: none`
   would silently cancel the tilt's rotation once revealed. */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity var(--dur-mid) var(--ease-premium),
              translate var(--dur-mid) var(--ease-premium);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--stagger-i, 0) * 60ms); }

/* ── Tilt cards ───────────────────────────────────────────────────
   Cards sit at a small resting 3D tilt by default (not flat) so the
   depth reads even without a hover interaction, with a click/touch,
   or under prefers-reduced-motion. JS pointermove increases the tilt
   toward the cursor on fine-pointer devices; leaving the pointer (or
   never having one) falls back to this resting angle, never to flat.
   No transform-style: preserve-3d — these cards have no 3D-positioned
   children, so it bought nothing and only added compositing cost. */
.tilt-card {
  --tiltX: -2.5deg;
  --tiltY: 3deg;
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) ease;
}
.tilt-card:nth-child(3n+2) { --tiltY: -3deg; }
.tilt-card:nth-child(3n+3) { --tiltX: 2.5deg; --tiltY: 2deg; }

/* ── Glass surface ────────────────────────────────────────────── */
.glass-card {
  background: linear-gradient(160deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--depth-2);
}
.glass-card:hover { border-color: var(--glass-border-strong); }

/* ================================================================
   HERO — dark 3D stage
   ================================================================ */
#hero {
  position: relative;
  background: radial-gradient(ellipse 900px 500px at 15% 0%, rgba(56,189,248,.14), transparent 60%),
              radial-gradient(ellipse 700px 500px at 100% 20%, rgba(129,140,248,.16), transparent 55%),
              linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  perspective: 1400px;
}
#hero::before {
  /* faint grid, echoes the product SVG grid motif for continuity */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
  pointer-events: none;
}
#hero .hero-eyebrow { color: rgba(255,255,255,.55); }
#hero .hero-eyebrow-dot { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }
#hero h1 { color: #fff; }
#hero .hero-sub { color: rgba(255,255,255,.6); }
#hero .btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  color: #04070f; box-shadow: var(--glow-cyan);
}
#hero .btn-primary:hover { opacity: 1; filter: brightness(1.08); }
#hero .btn-ghost {
  background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.22);
}
#hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }
#hero .trust-item { color: rgba(255,255,255,.45); }
#hero .trust-icon { color: var(--accent-cyan); }
#hero .hero-inner { position: relative; z-index: 2; }

/* Hero right: 3D stage + floating product cards */
.hero-right { position: relative; min-height: 360px; }
.hero-3d-stage {
  position: absolute; inset: -40px -20px auto -20px; height: 420px;
  pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity 1s ease;
  /* Gentle scroll-linked parallax, set by JS on every scroll frame.
     Small amplitude by design — kept even under reduced-motion since
     it's user-driven (tied directly to scrolling, not autoplay). */
  transform: translateY(var(--parallax-y, 0px));
}
.hero-3d-stage.is-ready { opacity: 1; }
.hero-3d-stage canvas { width: 100%; height: 100%; display: block; }
/* CSS-only fallback orb, shown until/unless the WebGL layer mounts */
.hero-3d-fallback {
  position: absolute; top: 10%; right: 4%; width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(56,189,248,.35), rgba(129,140,248,.12) 55%, transparent 75%);
  filter: blur(2px);
  animation: orbFloat 7s var(--ease-premium) infinite alternate;
}
@keyframes orbFloat { from { transform: translateY(0) scale(1); } to { transform: translateY(-18px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero-3d-fallback { animation: none; } }

.hero-products { position: relative; z-index: 2; }
.hero-prod-card {
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--depth-2);
}
.hero-prod-card:hover {
  border-color: rgba(56,189,248,.4);
  box-shadow: var(--depth-2), var(--glow-cyan);
}
.hero-prod-name { color: #fff; }
.hero-prod-cat { color: rgba(255,255,255,.45); }
.hero-prod-price { color: var(--accent-cyan); }
.hero-prod-icon { background: rgba(255,255,255,.06); }

@media (max-width: 768px) {
  .hero-3d-stage { display: none; }
}

/* ================================================================
   PRODUCTS — dark glass showcase (matches the navy product SVGs)
   ================================================================ */
#products {
  background:
    radial-gradient(ellipse 800px 400px at 85% 0%, rgba(129,140,248,.12), transparent 55%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}
#products .section-label { color: rgba(255,255,255,.4); }
#products .section-label::before { background: var(--accent-cyan); }
#products h2 { color: #fff; }
#products .section-desc { color: rgba(255,255,255,.55); }

.pcard {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--depth-2);
}
.pcard:hover {
  border-color: rgba(56,189,248,.45);
  box-shadow: var(--depth-3), var(--glow-cyan);
  transform: translateY(-6px);
}
.pcard-image { transition: transform var(--dur-mid) var(--ease-premium); }
.pcard:hover .pcard-image { transform: translateZ(24px) scale(1.02); }
.pcard-brand { color: rgba(255,255,255,.4); }
.pcard-name { color: #fff; }
.pcard-desc { color: rgba(255,255,255,.55); }
.pcard-price { color: #fff; }
.pcard-price-sub { color: rgba(255,255,255,.4); }
.pcard-trust { color: rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.08); }
.add-btn {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  color: #04070f;
}
.add-btn:hover { opacity: 1; filter: brightness(1.08); }
.badge-dark { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)); color: #04070f; }
.badge-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.products-loading { color: rgba(255,255,255,.45); }

/* ================================================================
   SOLUTIONS — light section, cards get depth + tilt (no glass,
   keeps the alternating light/dark rhythm of the page)
   ================================================================ */
.sol-card {
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.sol-card:hover { box-shadow: var(--depth-2); transform: translateY(-4px) perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); }
.sol-icon {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  transition: transform var(--dur-fast) var(--ease-premium);
}
.sol-card:hover .sol-icon { transform: translateZ(18px) scale(1.06); }

/* ================================================================
   Dark-section cohesion touches (why-visual / demo / roi / footer
   already exist as dark panels — small glow/depth upgrades only)
   ================================================================ */
.why-visual { box-shadow: var(--depth-3); border: 1px solid rgba(255,255,255,.08); }
.demo-screen { box-shadow: var(--depth-3); }
.demo-vehicle-dot { box-shadow: 0 0 10px currentColor; }
.roi-calc, .roi-card { transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-premium); }
.roi-card:hover { border-color: rgba(56,189,248,.3); transform: translateY(-3px); }

footer { position: relative; }
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-violet), transparent);
  opacity: .5;
}

/* ── Reduced motion: keep resting 3D depth, drop continuous/large
   motion. Static tilt, glass, and glow all stay — only autoplay-style
   animation (orbFloat, hero autorotate) and snappy hover pop-outs are
   removed. Content is also revealed immediately with no transition. ── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .tilt-card { transition: none; }
  .pcard:hover, .sol-card:hover, .roi-card:hover { transform: none; }
  .pcard:hover .pcard-image, .sol-card:hover .sol-icon { transform: none; }
}