/* ===========================================================================
   Roosterflyt — fx layer
   Shared effect machinery. Everything here is inert until the active theme
   opts in through <html data-fx="…">. The "original" theme never loads it.
   =========================================================================== */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

.hero-fx, .marquee, .fx-progress, .fx-cursor { display: none; }

/* --- Scroll progress ---------------------------------------------------- */
html[data-fx~="progress"] .fx-progress {
  display: block;
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 2px;
  z-index: 200;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--progress, var(--amber));
  pointer-events: none;
}

/* --- Scroll reveal ------------------------------------------------------ */
html[data-fx~="reveal"].js .fx-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--fx-d, 0ms);
  will-change: opacity, transform;
}
html[data-fx~="reveal"].js .fx-reveal.is-in { opacity: 1; transform: none; }

/* --- Split headline ----------------------------------------------------- */
.fx-w { display: inline-block; }
html.js .is-split .fx-w {
  opacity: 0;
  transform: translate3d(0, 0.4em, 0);
  animation: fx-rise 1s var(--ease-out) forwards;
  animation-delay: calc(var(--wi, 0) * 55ms + 120ms);
}
@keyframes fx-rise { to { opacity: 1; transform: none; } }

/* --- Hero layer (orbs + spotlight), enabled per theme --------------------- */
html[data-fx~="spotlight"] .hero-fx {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-fx .spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(640px circle at var(--mx, 72%) var(--my, 28%), var(--spot, rgba(255,255,255,0.08)), transparent 62%);
}
.hero-fx .o1, .hero-fx .o2, .hero-fx .o3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--orb-o, 0);
  will-change: transform;
}

/* --- Marquee ------------------------------------------------------------ */
.marquee__track { display: flex; width: max-content; animation: fx-marquee var(--marquee-t, 46s) linear infinite; }
.marquee__group { display: flex; flex: none; align-items: center; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes fx-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* --- Cursor follower ---------------------------------------------------- */
html[data-fx~="cursor"] .fx-cursor {
  display: block;
  position: fixed;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--cursor, #fff);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s, width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out);
}
html[data-fx~="cursor"] .fx-cursor.is-on { opacity: 1; }
html[data-fx~="cursor"] .fx-cursor.is-big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
@media (pointer: coarse) { .fx-cursor { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html.js .is-split .fx-w { opacity: 1; transform: none; animation: none; }
  html[data-fx~="reveal"].js .fx-reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}