/* ==========================================================================
   Laser text — gravure au scan rouge (inspiré Bennett Feely / CodeMyUI)
   ========================================================================== */

.ns-laser-text {
    --laser-char-delay: 0.042s;
    --laser-red: var(--ns-red, #ff2d3a);
    position: relative;
}

.ns-laser-text .ns-laser-char {
    display: inline;
    position: relative;
    color: rgba(244, 247, 255, 0.14);
    opacity: 0;
    will-change: color, text-shadow, opacity;
}

/* Avant le scan : titre invisible (pas de gros bloc gris) */
.ns-laser-text:not(.is-laser-playing):not(.is-laser-done) .ns-laser-char {
    opacity: 0;
}

.ns-laser-text .ns-laser-word {
    display: inline-block;
    white-space: nowrap;
}

.ns-laser-text .ns-laser-char--space {
    display: inline-block;
    min-width: 0.28em;
}

/* Faisceau laser horizontal */
.ns-laser-text.is-laser-playing::after {
    content: '';
    position: absolute;
    top: -6%;
    bottom: -6%;
    left: 0;
    width: 4px;
    margin-left: -2px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 45, 58, 0.35) 18%,
        #fff 48%,
        var(--laser-red) 52%,
        rgba(255, 45, 58, 0.35) 82%,
        transparent 100%
    );
    box-shadow:
        0 0 10px var(--laser-red),
        0 0 26px rgba(255, 45, 58, 0.75),
        0 0 48px rgba(255, 45, 58, 0.35);
    animation: ns-laser-beam var(--laser-beam-dur, 1.8s) linear forwards;
}

@keyframes ns-laser-beam {
    0%   { left: -4%; opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { left: 104%; opacity: 0; }
}

.ns-laser-text.is-laser-playing .ns-laser-char {
    animation: ns-laser-engrave 0.14s ease forwards;
    animation-delay: calc(var(--i) * var(--laser-char-delay));
}

@keyframes ns-laser-engrave {
    0% {
        opacity: 0;
        color: rgba(244, 247, 255, 0.14);
        text-shadow: none;
    }
    20% {
        opacity: 1;
    }
    38% {
        color: var(--laser-red);
        text-shadow:
            0 0 6px var(--laser-red),
            0 0 14px rgba(255, 45, 58, 0.85),
            0 0 28px rgba(255, 45, 58, 0.45);
    }
    100% {
        opacity: 1;
        color: #f4f7ff;
        text-shadow: none;
    }
}

/* État final — blanc net */
.ns-laser-text.is-laser-done .ns-laser-char {
    opacity: 1;
    color: #f4f7ff;
    animation: none;
    text-shadow: none;
}

.ns-laser-text.is-laser-done::after {
    display: none;
}

/* Hero : remplace l’ancienne anim scoreboard quand laser actif */
.ns-hero__title.ns-laser-text {
    overflow: visible;
    padding-right: 0.4em;
}

.ns-hero__title.ns-laser-text .line {
    overflow: visible;
}

.ns-hero__title.ns-laser-text .line > span {
    display: inline-block;
    white-space: nowrap;
    transform: none;
    opacity: 1;
    filter: none;
    animation: none !important;
    max-width: none;
}

.ns-hero__title.ns-laser-text:not(.is-laser-playing):not(.is-laser-done) .ns-laser-char {
    opacity: 0;
}

.ns-hero__title.ns-laser-text.is-laser-done .line--accent .ns-laser-char {
    color: var(--laser-red);
    text-shadow: 0 0 24px rgba(255, 45, 58, 0.45);
}

.ns-hero__tagline.ns-laser-text {
    opacity: 1;
    transform: skewX(-6deg) translateY(0);
}

.ns-hero__tagline.ns-laser-text.is-laser-playing,
.ns-hero__tagline.ns-laser-text.is-laser-done {
    animation: none;
}

.ns-hero__tagline.ns-laser-text.is-laser-done::after {
    width: 90px;
}

/* Titres de section — laser au scroll */
.ns-section-title.ns-laser-text,
.ns-final__title.ns-laser-text {
    transform: skewX(-6deg);
}

.ns-section-title.ns-laser-text.is-laser-playing,
.ns-section-title.ns-laser-text.is-laser-done,
.ns-final__title.ns-laser-text.is-laser-playing,
.ns-final__title.ns-laser-text.is-laser-done {
    opacity: 1;
    transform: skewX(-6deg) translateY(0);
}

.ns-card__title.ns-laser-text,
.ns-event__title.ns-laser-text,
.nss-profile__title.ns-laser-text {
    --laser-char-delay: 0.034s;
}

.ns-card__title.ns-laser-text.is-laser-playing,
.ns-card__title.ns-laser-text.is-laser-done,
.ns-event__title.ns-laser-text.is-laser-playing,
.ns-event__title.ns-laser-text.is-laser-done,
.nss-profile__title.ns-laser-text.is-laser-playing,
.nss-profile__title.ns-laser-text.is-laser-done {
    opacity: 1;
    transform: skewX(-6deg) translateY(0);
}

.nss-hero__title.ns-laser-text,
.nss-hero__tagline.ns-laser-text {
    opacity: 1;
    transform: skewX(-6deg) translateY(0);
}

.nss-hero__title.ns-laser-text.is-laser-done em .ns-laser-char {
    color: var(--laser-red);
    text-shadow: 0 0 20px rgba(255, 45, 58, 0.4);
}

.nss-hero__tagline.ns-laser-text.is-laser-playing,
.nss-hero__tagline.ns-laser-text.is-laser-done {
    animation: none;
}

/* Re-scan discret en boucle (hero uniquement) */
.ns-laser-text[data-laser-loop].is-laser-done.is-laser-idle .ns-laser-char {
    color: rgba(244, 247, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .ns-laser-text::after {
        display: none !important;
    }

    .ns-laser-text .ns-laser-char {
        opacity: 1 !important;
        color: #f4f7ff !important;
        animation: none !important;
        text-shadow: none !important;
    }

    .ns-hero__title.ns-laser-text.is-laser-done .line--accent .ns-laser-char {
        color: var(--laser-red) !important;
    }
}