/* cinematic.css — companion styles for static/fx/cinematic.js
   Everything here is additive and safe: it only styles elements/classes
   that cinematic.js itself creates or tags. */

/* ── the fixed 3D background canvas ───────────────────────────────────── */
/* inset:0 fills the viewport EXACTLY. Do NOT use 100vw/100vh here: 100vw
   includes the scrollbar and lets mobile pan sideways, and 100vh jumps when the
   iOS toolbar shows/hides — both read as "the site is unstable / drifts right". */
#fx-cinematic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* Global mobile-stability guard: nothing may create a horizontal scroll. Applied
   here (loaded on every shell via cinematic.css) so all pages are protected, not
   just the landing page. overflow-x:hidden on BOTH html and body is the reliable
   combination on iOS Safari. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── liquid image overlay canvases ────────────────────────────────────── */
.fx-liquid-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  display: block;
}

/* ── magnetic buttons: JS drives transform every frame — kill any CSS
      transform transition that would fight the rAF spring ─────────────── */
.fx-magnetic {
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .25s ease !important;
  will-change: transform;
}
.fx-magnetic:hover {
  box-shadow: 0 6px 28px -6px color-mix(in srgb, var(--yellow, #FFD700) 55%, transparent);
}

/* ── tilting cards + travelling glare ─────────────────────────────────── */
.fx-tilt {
  will-change: transform;
  transform-style: preserve-3d;
}
.fx-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s ease;
  background:
    radial-gradient(340px circle at var(--fx-sx, 50%) var(--fx-sy, 50%),
      color-mix(in srgb, var(--yellow, #FFD700) 14%, transparent) 0%,
      rgba(255, 255, 255, 0.05) 32%,
      transparent 62%);
  mix-blend-mode: screen;
}

/* graceful degradation where color-mix is unsupported */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .fx-shine {
    background:
      radial-gradient(340px circle at var(--fx-sx, 50%) var(--fx-sy, 50%),
        rgba(255, 215, 0, 0.13) 0%,
        rgba(255, 255, 255, 0.05) 32%,
        transparent 62%);
  }
  .fx-magnetic:hover { box-shadow: 0 6px 28px -6px rgba(255, 215, 0, 0.35); }
}

/* the whole system already no-ops in JS under reduced motion; this is the
   belt-and-braces layer in case markup ships with the classes pre-baked */
@media (prefers-reduced-motion: reduce) {
  #fx-cinematic-bg, .fx-liquid-cv, .fx-shine { display: none !important; }
  .fx-magnetic, .fx-tilt { transform: none !important; }
}