/* ============================================================
   Alliant — Cinematic & Interactive layer (no imagery)
   Ambient light · cursor spotlight · depth shadows · tilt · voiceover
   ============================================================ */

/* ---------- Ambient light behind the hero (cinematic depth) ---------- */
.hero-bg { position: relative; isolation: isolate; }
.cine-ambient { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.cine-ambient .orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55; will-change: transform;
  mix-blend-mode: multiply;
}
.cine-ambient .orb.g1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(201,166,70,.42), transparent 68%);
  animation: cineDrift1 22s ease-in-out infinite; }
.cine-ambient .orb.g2 { width: 40vw; height: 40vw; right: -6vw; top: 8vw;
  background: radial-gradient(circle at 50% 50%, rgba(30,37,45,.20), transparent 66%);
  animation: cineDrift2 27s ease-in-out infinite; }
.cine-ambient .orb.g3 { width: 34vw; height: 34vw; left: 30vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(232,200,92,.30), transparent 70%);
  animation: cineDrift3 31s ease-in-out infinite; }
@keyframes cineDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,3vw) scale(1.08)} }
@keyframes cineDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,4vw) scale(1.12)} }
@keyframes cineDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,-3vw) scale(1.06)} }
/* interactive drifting motes canvas */
.cine-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* soft cinematic vignette on the hero */
.hero-bg::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow: inset 0 -120px 140px -80px rgba(30,37,45,.28), inset 0 90px 120px -90px rgba(30,37,45,.18);
}
.hero-bg > *:not(.cine-ambient):not(.cine-motes) { position: relative; z-index: 3; }

/* ---------- Cursor spotlight on dark sections ---------- */
.cine-spot { position: relative; isolation: isolate; }
.cine-spot::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(201,166,70,.16), transparent 60%);
}
.cine-spot.is-live::before { opacity:1; }
.cine-spot > * { position:relative; z-index:1; }

/* ---------- Depth "under-shadows" + tilt on cards ---------- */
.service-card, .brand-card, .vendor-card {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
  transform-style: preserve-3d; will-change: transform;
}
.service-card:hover, .brand-card:hover, .vendor-card:hover {
  box-shadow: 0 28px 50px -22px rgba(30,37,45,.45), 0 6px 14px -8px rgba(30,37,45,.30);
  border-color: var(--border-gold, rgba(201,166,70,.45));
}
/* gold sheen that tracks the cursor over a card */
.tilt-glow { position:relative; }
.tilt-glow::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background: radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),
              rgba(232,200,92,.20), transparent 62%);
}
.tilt-glow:hover::after { opacity:1; }

/* ---------- Voiceover button ---------- */
.cine-listen {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display:inline-flex; align-items:center; gap:8px;
  background: var(--char, #1e252d); color: #f3f0e8;
  border:1px solid rgba(201,166,70,.5); border-radius: 999px;
  padding: 10px 16px; font: 600 13px/1 Arial, sans-serif; letter-spacing:.02em;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); cursor: pointer;
  transition: transform .2s ease, background .2s ease; }
.cine-listen:hover { transform: translateY(-2px); background:#161a20; }
.cine-listen .dot { width:8px; height:8px; border-radius:50%; background:#c9a646; }
.cine-listen.is-playing .dot { animation: cinePulse 1s ease-in-out infinite; }
@keyframes cinePulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cine-ambient .orb { animation: none !important; }
  .cine-motes { display: none; }
  .service-card, .brand-card, .vendor-card { transition: box-shadow .2s ease; }
}
@media (max-width: 640px) { .cine-listen { right:12px; bottom:12px; padding:9px 13px; } }