/* ==========================================================================
   fx.css — 2026-06-05 cinematic "wow" layer (ADDITIVE / NON-DESTRUCTIVE)
   Everything here is gated behind html.fx (added by fx.js). If JS never runs,
   none of these rules apply and the site renders exactly as before — so this
   layer can never hide content. Fully respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- scroll-reveal (only active when JS is alive) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx [data-fx] {
    opacity: 0;
    transform: translateY(38px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--fxd, 0s);
    will-change: opacity, transform;
  }
  html.fx [data-fx="left"]  { transform: translateX(-44px); }
  html.fx [data-fx="right"] { transform: translateX(44px); }
  html.fx [data-fx="zoom"]  { transform: scale(0.94); }
  html.fx [data-fx="rise"]  { transform: translateY(56px); }

  html.fx [data-fx].fx-in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- scroll progress (film red line) ---------- */
.fx-progress {
  position: fixed;
  top: 0; inset-inline: 0;
  height: 3px;
  z-index: 9000;
  background: rgba(247, 241, 220, 0.06);
  pointer-events: none;
}
.fx-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  box-shadow: 0 0 14px rgba(201, 58, 50, 0.65);
  transition: width 0.08s linear;
}

/* ---------- cinematic intro wipe ---------- */
.fx-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050505;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.fx-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
}
.fx-intro-inner {
  display: grid;
  justify-items: center;
  gap: 1.3rem;
  text-align: center;
}
.fx-intro img {
  width: clamp(96px, 12vw, 150px);
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  animation: fxIntroLogo 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.6));
}
.fx-intro span {
  font-family: var(--font-latin);
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  color: rgba(247, 241, 220, 0.55);
  opacity: 0;
  animation: fxIntroText 0.7s ease 0.5s forwards;
}
.fx-intro-bar {
  width: clamp(150px, 22vw, 240px);
  height: 2px;
  background: rgba(247, 241, 220, 0.15);
  overflow: hidden;
}
.fx-intro-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  animation: fxIntroBar 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
.fx-intro.done { transform: translateY(-101%); }
@keyframes fxIntroLogo { to { opacity: 1; transform: scale(1); } }
@keyframes fxIntroText { to { opacity: 1; } }
@keyframes fxIntroBar { to { width: 100%; } }

/* ---------- custom cursor (desktop fine-pointer only) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.fx-cursor, html.fx-cursor * { cursor: none !important; }
  .fx-cur {
    position: fixed;
    top: 0; left: 0;
    z-index: 9500;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
  }
  .fx-cur-dot {
    width: 7px; height: 7px;
    background: var(--red);
  }
  .fx-cur-ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(247, 241, 220, 0.55);
    transition: width 0.25s var(--ease), height 0.25s var(--ease),
                border-color 0.25s var(--ease), background 0.25s var(--ease);
  }
  .fx-cur-ring.is-hover {
    width: 62px; height: 62px;
    border-color: var(--yellow);
    background: rgba(255, 183, 0, 0.08);
  }

  /* the "watch" chip over film posters */
  .fx-cur-tag {
    display: none;
    position: absolute;
    inset: 0;
    place-items: center;
    font-family: var(--font-ar, sans-serif);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--paper-3, #F7F1DC);
  }
  .fx-cur-ring.is-watch {
    width: 76px; height: 76px;
    border-color: transparent;
    background: rgba(201, 58, 50, 0.92);
  }
  .fx-cur-ring.is-watch .fx-cur-tag { display: grid; }

  /* hero pieces drift with the mouse (separate `translate` channel —
     never touches their rotate/transform) */
  html.fx .poster-hero .paper-note,
  html.fx .poster-hero .bts-card {
    translate: var(--fxmx, 0px) var(--fxmy, 0px);
    transition: translate 0.4s var(--ease);
    will-change: translate;
  }
}

/* ---------- 3D tilt + magnetic helpers ---------- */
html.fx .fx-tilt {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  transform-style: preserve-3d;
}
html.fx .fx-mag {
  transition: transform 0.25s var(--ease);
  will-change: transform;
}

/* ---------- subtle floating film-grain pulse on hero rails ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx .ip-hero-rail,
  html.fx .film-rail { animation: fxDrift 9s ease-in-out infinite alternate; }
}
@keyframes fxDrift { from { opacity: 0.5; } to { opacity: 0.95; } }

/* ---------- typewriter caret ---------- */
.fx-typing::after {
  content: '▍';
  color: var(--red, #C93A32);
  animation: fxCaret 0.7s steps(1) infinite;
}
@keyframes fxCaret { 50% { opacity: 0; } }

/* ---------- reduced motion: nuke everything fancy ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-intro { display: none !important; }
  html.fx [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; }
}