/* =====================================================================
 * ZZL — Immersive subpage layer (drop-in)
 * Adds the real cinematic-space backdrop + reveal/parallax to ANY page.
 * Include AFTER the page's own stylesheet so these overrides win. Pairs
 * with assets/zzl-immersive.js (injects the backdrop DOM + wires motion).
 * ===================================================================== */

/* float the page over the fixed backdrop */
html.zx-imm { background: #040507; }
html.zx-imm body { background: transparent !important; }

/* fixed real-space backdrop (photoreal scenes cross-fade; dust/warp canvas on top) */
.zxi-sky { position: fixed; inset: 0; z-index: 0; background: #040507; overflow: hidden; pointer-events: none; }
.zxi-scene {
  position: absolute; inset: -3%; background-size: cover; background-position: center;
  opacity: 0; filter: brightness(.42) saturate(1.05);
  will-change: opacity, transform; transform: scale(1.06);
  animation: zxiKen 60s ease-in-out infinite alternate;
}
.zxi-scene.on { opacity: 1; }
.zxi-scene:nth-child(2) { animation-duration: 72s; animation-direction: alternate-reverse; }
.zxi-scene:nth-child(3) { animation-duration: 66s; }
.zxi-cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.zxi-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,5,7,.62) 0%, rgba(4,5,7,.5) 42%, rgba(4,5,7,.66) 100%);
}
@keyframes zxiKen { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.16) translate(-1.6%,-1.2%); } }

/* everything the page renders sits above the backdrop */
.zx-imm body > *:not(.zxi-sky):not(.zxi-cosmos):not(.zxi-veil) { position: relative; z-index: 2; }

/* scroll reveal + morph (JS toggles .zx-in when the block enters) */
.zx-rev { opacity: 0; transform: translateY(40px) scale(.985); filter: blur(8px);
  transition: opacity .7s cubic-bezier(.22,.85,.3,1), transform .7s cubic-bezier(.22,.85,.3,1), filter .7s cubic-bezier(.22,.85,.3,1); }
.zx-rev.zx-in { opacity: 1; transform: none; filter: blur(0); }

/* cursor parallax float (JS sets the transform) */
.zx-par { transition: transform .5s cubic-bezier(.22,.85,.3,1); will-change: transform; }

/* tactile press + neon ripple on controls, matching the homepage */
.zx-imm a[href], .zx-imm button, .zx-imm .btn { position: relative; }
.zxi-rip { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(198,255,61,.5), transparent 70%);
  transform: translate(-50%,-50%) scale(0); pointer-events: none; z-index: 4; }
.zxi-rip.go { animation: zxiRip .6s ease-out forwards; }
@keyframes zxiRip { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .zxi-scene { animation: none; transform: none; }
  .zx-rev { opacity: 1; transform: none; filter: none; transition: none; }
  .zx-par { transition: none; transform: none !important; }
}