/* =====================================================================
   Enhancement layer (demo) — word-reveal headings, page transitions,
   custom cursor. Additive only. Fully disabled under reduced motion.
   ===================================================================== */

/* ---------- 1. Word-by-word heading reveal ---------- */
.fx-words .fx-word {
  display: inline-block;
  white-space: pre;
}
.fx-words .fx-word > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(2deg);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-words.is-in .fx-word > span {
  opacity: 1;
  transform: none;
}

/* ---------- 2. Page transition curtain ---------- */
.fx-curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(231, 192, 103, 0.10), transparent 60%),
    linear-gradient(180deg, #060507, #0a0810);
  transition: opacity 0.42s ease;
}
.fx-curtain.is-active {
  opacity: 1;
  pointer-events: all;
}
/* fade the whole page in on arrival */
.fx-page-in {
  animation: fxPageIn 0.55s ease both;
}
@keyframes fxPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 3. Custom cursor (fine pointer only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .fx-cursor-on,
  .fx-cursor-on a,
  .fx-cursor-on button,
  .fx-cursor-on [role="link"] {
    cursor: none;
  }
  .fx-cursor-dot,
  .fx-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
  }
  .fx-cursor-dot {
    width: 5px;
    height: 5px;
    background: var(--accent-strong, #fff1b8);
    opacity: 0.55;
    transition: opacity 0.2s ease, background 0.22s ease;
  }
  .fx-cursor-ring {
    width: 29px;
    height: 29px;
    border: 1px solid rgba(231, 192, 103, 0.28);
    transition:
      width 0.22s ease,
      height 0.22s ease,
      border-color 0.22s ease,
      background 0.22s ease;
  }
  /* Ring grows only over buttons */
  .fx-cursor-ring.is-hot {
    width: 46px;
    height: 46px;
    border-color: rgba(255, 241, 184, 0.55);
    background: rgba(231, 192, 103, 0.05);
  }

  /* Violet accent context (Brotherhood / Reed) */
  .fx-cursor-dot.is-violet {
    background: #d9c4ff;
  }
  .fx-cursor-ring.is-violet {
    border-color: rgba(180, 140, 255, 0.3);
  }
  .fx-cursor-ring.is-hot.is-violet {
    border-color: rgba(205, 175, 255, 0.55);
    background: rgba(150, 110, 255, 0.06);
  }
  .fx-cursor-hidden {
    opacity: 0;
  }
}

/* ---------- 4. Hero embers (floating particles) ---------- */
.fx-embers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
}
.hero-redesign .hero-shell { position: relative; z-index: 2; }

/* ---------- 5. Magnetic buttons / nav ---------- */
@media (hover: hover) and (pointer: fine) {
  .fx-magnetic {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
}

/* ---------- 6. Card tilt on hover ---------- */
@media (hover: hover) and (pointer: fine) {
  .fx-tilt {
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ---------- 7. Brotherhood — violet "Открыть" button ---------- */
.faction-card--brotherhood .faction-button {
  color: #ecddff;
  border-color: rgba(164, 92, 255, 0.55);
  background:
    linear-gradient(90deg, rgba(8, 5, 16, 0.9), rgba(164, 92, 255, 0.22), rgba(8, 5, 16, 0.9)),
    rgba(8, 5, 16, 0.72);
}
.faction-card--brotherhood .faction-button:hover,
.faction-card--brotherhood .faction-button:focus-visible {
  background: rgba(164, 92, 255, 0.34);
  color: #ffffff;
}

/* ---------- 8. Whole faction card is clickable ---------- */
.fx-clickable {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .fx-words .fx-word > span { opacity: 1; transform: none; transition: none; }
  .fx-curtain, .fx-page-in { display: none; animation: none; }
  .fx-cursor-dot, .fx-cursor-ring { display: none; }
  .fx-embers { display: none; }
  .fx-magnetic, .fx-tilt { transition: none; transform: none !important; }
}