/**
 * laser.css — Mobile-first laser effect styles.
 * Laser scan reveal, laser emboss states, spark particles, footnote pop-in.
 */

/* ========== LASER SCAN REVEAL ========== */

.laser-reveal {
  position: relative;
  display: block;
}

.laser-reveal .laser-content {
  clip-path: inset(0 100% 0 0);
  transition: none;
}

.laser-reveal .laser-content.revealed {
  clip-path: inset(0 0 0 0);
}

/* Ensure laser works with feature items */
.features li.laser-reveal .laser-content {
  display: inline;
}

.features li.laser-emboss {
  position: relative;
}

/* ========== LASER LINE (scan bar) ========== */

.laser-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 15%,
    #ffffff 35%,
    var(--accent) 50%,
    #ffffff 65%,
    rgba(255, 255, 255, 0.4) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 10px var(--accent),
    0 0 20px var(--accent),
    0 0 40px rgba(255, 255, 255, 0.5),
    4px 0 15px rgba(255, 255, 255, 0.3);
  opacity: 0;
  pointer-events: none;
}

/* ========== LASER EMBOSS LINE ========== */

.laser-emboss-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 32px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 10;
}

/* ========== EMBOSS WRAPPER ========== */

.emboss-wrapper {
  display: inline;
}

/* ========== EMBOSS CHARACTER STATES ========== */
/* State machine: dormant → burning → hot → warm → cooling → settled */

.emboss-char {
  opacity: 0.1;
  transition: color 60ms ease, text-shadow 60ms ease;
  display: inline;
}

/* Burning — white glow (40ms) */
.emboss-char[data-state="burning"] {
  color: #fff;
  text-shadow: 0 0 20px #fff, 0 0 30px #fff;
  opacity: 1;
}

/* Hot — yellow glow (60ms) */
.emboss-char[data-state="hot"] {
  color: #fbbf24;
  text-shadow: 0 0 12px #fbbf24;
  opacity: 1;
}

/* Warm — orange glow (80ms) */
.emboss-char[data-state="warm"] {
  color: #f97316;
  text-shadow: 0 0 8px #f97316;
  opacity: 1;
}

/* Cooling — red glow (100ms) */
.emboss-char[data-state="cooling"] {
  color: #ef4444;
  text-shadow: 0 0 6px #ef4444;
  opacity: 1;
}

/* Settled — final resting state */
.emboss-char[data-state="settled"] {
  opacity: 1;
  color: var(--text-muted);
  text-shadow: none;
}

/* ========== SPARK PARTICLES ========== */

.emboss-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px #fff, 0 0 6px #fbbf24;
  pointer-events: none;
}

/* ========== FOOTNOTE POP-IN ========== */

.footnote-pop {
  animation: footnote-pop-in 0.3s ease-out;
}

@keyframes footnote-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
}

/* ========== RESPONSIVE: sm (640px+) ========== */

@media (min-width: 640px) {
  .laser-line {
    width: 3px;
    box-shadow:
      0 0 12px var(--accent),
      0 0 25px var(--accent),
      0 0 45px rgba(255, 255, 255, 0.5),
      4px 0 18px rgba(255, 255, 255, 0.3);
  }

  .laser-emboss-line {
    width: 3px;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px rgba(255, 255, 255, 0.8);
  }

  .emboss-spark {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 4px #fff, 0 0 8px #fbbf24;
  }
}

/* ========== RESPONSIVE: lg (1024px+) ========== */

@media (min-width: 1024px) {
  .laser-line {
    width: 4px;
    box-shadow:
      0 0 15px var(--accent),
      0 0 30px var(--accent),
      0 0 50px rgba(255, 255, 255, 0.6),
      5px 0 20px rgba(255, 255, 255, 0.3);
  }

  /* Emboss char text-shadows already match original at base level */
}