/* fx.css — cursor, section reveals, page-transition curtain, preloader
   ---------------------------------------------------------------- */

/* ── Custom cursor (desktop / fine-pointer only) ─────────────── */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }

  #cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
  }

  #cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #EA1821;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width 0.2s, height 0.2s, opacity 0.2s;
  }

  #cursor-ring.is-hovering {
    width: 56px;
    height: 56px;
    opacity: 0.6;
  }
}

/* ── Section scroll reveals ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Page-transition curtain (left → right scaleX) ───────────── */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 8000;   /* below preloader (9000) so the home preloader shows; grain sits above all of this (9997) */
  pointer-events: none;
  display: flex;
}

#page-curtain .curtain-panel {
  flex: 1;
  transform-origin: left center;
  transform: scaleX(1); /* rest covered: every fresh load paints covered, no JS race */
  will-change: transform;
}

#page-curtain .curtain-panel-red   { background: #EA1821; }
#page-curtain .curtain-panel-black {
  background: #000000;
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(1);
  z-index: 1;
}

/* Reduced motion / no-JS safety: rest revealed so the page is never stuck covered */
@media (prefers-reduced-motion: reduce) {
  #page-curtain .curtain-panel { transform: scaleX(0); }
}

/* ── Homepage preloader (upward curtain) ──────────────────────── */
#preloader-new {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #05030a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

#preloader-new .pl-wordmark {
  font-family: 'Boska', serif;
  font-size: clamp(36px, 8vw, 80px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1;
}

#preloader-new .pl-bar-track {
  width: min(320px, 70vw);
  height: 1px;
  background: rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}

#preloader-new .pl-bar-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: #EA1821;
  transition: none;
}

/* Curtain panels that wipe upward */
#preloader-curtain {
  position: fixed;
  inset: 0;
  z-index: 9100;
  pointer-events: none;
}

#preloader-curtain .pc-red,
#preloader-curtain .pc-black {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  transform: scaleY(0);
  will-change: transform;
}

#preloader-curtain .pc-red   { background: #EA1821; }
#preloader-curtain .pc-black { background: #000000; }