/* XDRAKO shared motion layer — transform/opacity only for stable frame pacing. */
:root {
  --xd-fx-violet: #a855f7;
  --xd-fx-magenta: #d946ef;
  --xd-fx-ice: #e9d5ff;
}

.xd-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

.xd-fire-orb {
  --orb-size: 10px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 38% 34%, #fff 0 7%, #f5d0fe 15%, #c084fc 34%, #9333ea 58%, rgba(88, 28, 135, .12) 76%, transparent 78%);
  box-shadow:
    0 0 8px rgba(233, 213, 255, .92),
    0 0 20px rgba(168, 85, 247, .82),
    0 0 42px rgba(126, 34, 206, .52);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translate3d(-60px, 110vh, 0);
}

.xd-fire-orb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 68%;
  height: 280%;
  border-radius: 50% 50% 70% 70%;
  background: linear-gradient(180deg, rgba(192, 132, 252, .5), rgba(126, 34, 206, .12), transparent);
  filter: blur(3px);
  transform: translateX(-50%);
}

.xd-energy-line {
  --line-height: 220px;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--line-height);
  opacity: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent 0%, rgba(245, 232, 255, .86) 38%, rgba(192, 132, 252, .72) 62%, transparent 100%);
  box-shadow: 0 0 7px rgba(233, 213, 255, .7), 0 0 18px rgba(168, 85, 247, .56);
  mix-blend-mode: screen;
  transform: translate3d(-30px, 120vh, 0) rotate(14deg);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.xd-energy-line::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 46%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #e9d5ff, 0 0 24px #a855f7;
}

.xd-energy-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  opacity: 0;
  border: 1px solid rgba(233, 213, 255, .24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 180, 254, .16), rgba(168, 85, 247, .055) 52%, transparent 72%);
  box-shadow: 0 0 24px rgba(168, 85, 247, .18), inset 0 0 18px rgba(233, 213, 255, .08);
  will-change: transform, opacity;
}

.xd-hdr-star {
  --star-size: 3px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow:
    0 0 5px rgba(255, 255, 255, .98),
    0 0 13px rgba(216, 180, 254, .88),
    0 0 28px rgba(168, 85, 247, .62),
    0 0 48px rgba(59, 130, 246, .24);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.xd-hdr-star::before,
.xd-hdr-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: translate(-50%, -50%);
}

.xd-hdr-star::before { width: 22px; height: 1px; }
.xd-hdr-star::after { width: 1px; height: 22px; }

.xd-scroll-reveal {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.xd-scroll-revealed {
  will-change: auto;
}

.xd-fx-interactive {
  transform: translateZ(0);
  transition: border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .xd-fx-interactive:hover {
    border-color: rgba(192, 132, 252, .34) !important;
    box-shadow: 0 18px 52px rgba(49, 12, 78, .42), 0 0 28px rgba(168, 85, 247, .13) !important;
  }
}

.xd-fx-ripple {
  position: fixed;
  z-index: 99998;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1px solid rgba(233, 213, 255, .7);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 180, 254, .38), rgba(168, 85, 247, .1) 52%, transparent 70%);
  box-shadow: 0 0 24px rgba(168, 85, 247, .72);
  pointer-events: none;
  will-change: transform, opacity;
}

@media (max-width: 720px) {
  .xd-fx-layer { z-index: 2; }
  .xd-fire-orb {
    filter: none;
    box-shadow: 0 0 7px rgba(233, 213, 255, .84), 0 0 17px rgba(168, 85, 247, .66), 0 0 28px rgba(126, 34, 206, .34);
  }
  .xd-fire-orb::after { filter: blur(2px); }
  .xd-energy-line { box-shadow: 0 0 6px rgba(233, 213, 255, .56), 0 0 14px rgba(168, 85, 247, .4); }
  .xd-energy-node { width: 42px; height: 42px; box-shadow: 0 0 16px rgba(168, 85, 247, .14); }
  .xd-hdr-star { box-shadow: 0 0 5px #fff, 0 0 11px rgba(216, 180, 254, .76), 0 0 22px rgba(168, 85, 247, .46); }
  .xd-hdr-star::before { width: 16px; }
  .xd-hdr-star::after { height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .xd-fx-layer,
  .xd-fx-ripple { display: none !important; }
  .xd-fx-interactive,
  .xd-scroll-reveal { transform: none !important; opacity: 1 !important; visibility: visible !important; }
}