/* ════════════════════════════════════════════
   Blitz — shared premium interaction layer
   Custom cursor · magnetic · 3D tilt · parallax
   (loaded on every page; all guarded for touch
   and reduced-motion in effects.js)
   ════════════════════════════════════════════ */

/* ── Custom cursor ── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 9999px; transform: translate(-50%, -50%); will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--brand-bright, #A88BCC); }
.cursor-ring {
  width: 34px; height: 34px; border: 1.5px solid rgba(168,139,204,0.55);
  transition: width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.cursor-ring.is-hover { width: 56px; height: 56px; background: rgba(139,107,174,0.12); border-color: rgba(168,139,204,0.9); }
.cursor-ring.is-down  { width: 26px; height: 26px; }

/* Hide native cursor only once JS confirms it's running (graceful fallback) */
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto !important; }

/* ── 3D tilt ── */
[data-tilt-on] { transform-style: preserve-3d; will-change: transform; }

/* ── Smooth scroll: stop native CSS smooth from fighting the JS scroll ── */
html.has-smooth { scroll-behavior: auto !important; }

/* ── Scroll progress bar ── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9998; pointer-events: none;
  background: linear-gradient(90deg, var(--brand, #8B6BAE), var(--brand-bright, #A88BCC));
  box-shadow: 0 0 12px rgba(168,139,204,0.6); transition: width .1s linear; }

/* ── Scroll reveal (dramatic; :not(.fx-in) wins over page .reveal even under reduced-motion) ── */
.fx:not(.fx-in) {
  opacity: 0 !important; transform: translateY(42px) scale(.985) !important; filter: blur(5px) !important;
  will-change: opacity, transform, filter;
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1), filter .85s ease !important;
}
.fx.fx-in {
  opacity: 1 !important; transform: none !important; filter: none !important;
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1), filter .85s ease !important;
}
/* reduced-motion: still reveal, but as a gentle fade with no movement/blur */
@media (prefers-reduced-motion: reduce) {
  .fx:not(.fx-in) { transform: none !important; filter: none !important; transition: opacity .6s ease !important; }
  .fx.fx-in { transition: opacity .6s ease !important; }
}

/* ── Film grain texture ── */
.grain { position: fixed; inset: 0; z-index: 9997; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Page transition (subtle fade) ── */
.page-curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: #050506; }
.page-curtain.anim { transition: opacity .3s ease; }
.page-curtain.is-covering { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page-curtain { display: none !important; } }

/* ── Hero kinetic word reveal ── */
.fxw { display: inline-block; opacity: 0; transform: translateY(28px); filter: blur(10px); will-change: opacity, transform, filter;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.fxw.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .fxw { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ── Hero cursor spotlight ── */
.hero-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 40%), rgba(139,107,174,0.18), transparent 70%); }

/* Disable everything for touch / reduced-motion */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .grain { display: none; }
}