/*!
 * LEGEND CRAFT — animation layer.
 *
 * Pure enhancement stylesheet: scroll reveals, button feedback, card lift and
 * the floating ice motes. It never changes layout and it degrades to a static
 * page when the visitor asks for reduced motion.
 *
 * Hooks used by assets/animations.js:
 *   [data-reveal]          an element that fades in when it enters the viewport
 *   .is-revealed           added by the observer once the element is in view
 *   .lc-stagger            staggers its direct children by 70ms each
 *   .lc-glow-pulse         opt-in soft glow pulse
 *   #lc-motes / .lc-floating-mote
 */

/* ------------------------------------------------------------ keyframes -- */

@keyframes lc-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lc-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 24px 3px color-mix(in srgb, var(--accent) 42%, transparent);
  }
}

@keyframes lc-mote-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.75);
  }
  15% {
    opacity: var(--lc-mote-opacity, .55);
  }
  85% {
    opacity: calc(var(--lc-mote-opacity, .55) * .55);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--lc-mote-drift, 12px), -140px, 0) scale(1.15);
  }
}

/* -------------------------------------------------------------- reveal -- */

/* The hidden start state is gated on `html.lc-motion`. assets/animations.js adds
   that class before the first paint, so the transition always runs; if the
   script is blocked or fails, the class is never set and every element stays
   visible instead of collapsing to opacity 0. */
html.lc-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .62s cubic-bezier(.22, .61, .36, 1),
    transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

html.lc-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* -------------------------------------------------------------- button -- */
/* The site already animates .btn with transform, so the hover glow and the
   press feedback are expressed with box-shadow and filter only. */

.btn {
  transition-property: transform, box-shadow, background, filter;
}

.btn:hover {
  filter: brightness(1.06) saturate(1.06);
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn:active {
  filter: brightness(.95);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--primary) 26%, transparent),
    inset 0 2px 6px rgba(2, 16, 34, .26);
}

/* --------------------------------------------------------------- cards -- */

.glass.card,
.rank,
.v5-weapon-card,
.lc-module-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.glass.card:hover,
.rank:hover,
.v5-weapon-card:hover,
.lc-module-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

/* --------------------------------------------------------------- motes -- */

#lc-motes {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 38%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--muted) 12%, transparent), transparent 42%);
}

.lc-floating-mote {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--text) 12%, #fff) 0%,
    var(--accent) 45%,
    transparent 74%
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
  will-change: transform, opacity;
  animation: lc-mote-float var(--lc-mote-duration, 16s) linear infinite;
  animation-delay: var(--lc-mote-delay, 0s);
}

/* ------------------------------------------------------------- stagger -- */
/* Delays every direct child of .lc-stagger by 70ms per index. */

.lc-stagger > * {
  animation: lc-fade-in-up .62s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--lc-stagger-step, 70ms) * 0);
}

.lc-stagger > *:nth-child(2) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 1); }
.lc-stagger > *:nth-child(3) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 2); }
.lc-stagger > *:nth-child(4) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 3); }
.lc-stagger > *:nth-child(5) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 4); }
.lc-stagger > *:nth-child(6) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 5); }
.lc-stagger > *:nth-child(7) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 6); }
.lc-stagger > *:nth-child(8) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 7); }
.lc-stagger > *:nth-child(9) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 8); }
.lc-stagger > *:nth-child(10) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 9); }
.lc-stagger > *:nth-child(11) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 10); }
.lc-stagger > *:nth-child(12) { animation-delay: calc(var(--lc-stagger-step, 70ms) * 11); }

/* ------------------------------------------------------------- helpers -- */

.lc-glow-pulse {
  border-radius: var(--radius, 16px);
  animation: lc-glow-pulse 3.4s ease-in-out infinite;
}

/* ------------------------------------------------------ reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html.lc-motion [data-reveal],
  html.lc-motion [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .glass.card:hover,
  .rank:hover,
  .v5-weapon-card:hover,
  .lc-module-card:hover {
    transform: none;
  }

  .glass.card,
  .rank,
  .v5-weapon-card,
  .lc-module-card,
  .btn,
  .lc-stagger > * {
    transition-duration: .01ms;
    animation: none;
  }

  .btn:hover,
  .btn:active {
    filter: none;
    box-shadow: var(--shadow);
  }

  .lc-stagger > * {
    opacity: 1;
    transform: none;
  }

  .lc-glow-pulse {
    animation: none;
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  #lc-motes,
  .lc-floating-mote {
    display: none;
    animation: none;
  }
}