/* NOSK8 — Énergie futuriste light (2026-05-12)
   À ajouter aux 3 templates : standard, portrait, spots.
   Pas de dark mode — light gardé. */

:root {
    --fx-glow: rgba(26, 39, 68, 0.18);
    --fx-glow-strong: rgba(26, 39, 68, 0.35);
    --fx-shadow-card: 0 12px 32px -8px rgba(10,15,26,0.12), 0 2px 6px rgba(10,15,26,0.06);
    --fx-shadow-card-hover: 0 24px 60px -12px rgba(26,39,68,0.25), 0 4px 10px rgba(10,15,26,0.1);
    --fx-shadow-glow-hover: 0 0 0 1px rgba(26,39,68,0.2), 0 16px 40px -8px rgba(26,39,68,0.3);
    --fx-trans: cubic-bezier(.34,1.56,.64,1);
}

/* Mouse-glow background subtil (light) */
.fx-glow-bg {
    position: fixed;
    pointer-events: none;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,39,68,0.06) 0%, rgba(26,39,68,0) 65%);
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: opacity .3s;
    will-change: transform;
}
@media (max-width: 880px) { .fx-glow-bg { display: none; } }

/* Parallax hero image — réutilisable */
[data-fx-parallax] {
    will-change: transform;
    transition: transform 0s linear;
}

/* Reveal on scroll — apparition fade + slide up */
.fx-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.fx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .fx-reveal { opacity: 1; transform: none; transition: none; }
    [data-fx-parallax] { transform: none !important; }
}

/* Hover bumps sur les cards existantes — énergie futuriste */
.nosk8-related__card,
.nosk8-shop-card,
.nosk8-shop-strip-card,
.spot-card,
.timeline-card {
    transition: transform .25s var(--fx-trans), box-shadow .25s var(--fx-trans), border-color .25s var(--fx-trans);
}
.nosk8-related__card:hover,
.nosk8-shop-card:hover,
.spot-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fx-shadow-card-hover);
    border-color: rgba(26,39,68,0.2);
}

/* Hover bump CTA newsletter (sidebar) */
.nosk8-cta-newsletter {
    transition: transform .25s var(--fx-trans), box-shadow .25s var(--fx-trans);
    box-shadow: 0 8px 24px -6px rgba(10,15,26,0.25);
}
.nosk8-cta-newsletter:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(10,15,26,0.4);
}

/* Glow subtle sur le hero featured image au load */
.nosk8-article__hero-img {
    box-shadow: 0 20px 50px -12px rgba(10,15,26,0.18), 0 0 0 1px rgba(10,15,26,0.05);
    transition: box-shadow .4s var(--fx-trans);
}
.nosk8-article__hero-img:hover {
    box-shadow: 0 32px 80px -14px var(--fx-glow-strong), 0 0 0 1px rgba(26,39,68,0.15);
}

/* Title accent gradient subtle (sur le H1 hero) */
.nosk8-article__title {
    background: linear-gradient(180deg, #0a0f1a 0%, #1a2744 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Pull quote en glassmorphism */
.nosk8-pullquote {
    background: linear-gradient(135deg, rgba(26,39,68,0.04) 0%, rgba(26,39,68,0) 100%);
    border-top: 2px solid var(--n8-ink) !important;
    border-bottom: 2px solid var(--n8-ink) !important;
    border-left: none !important;
    padding: 28px 24px !important;
    border-radius: 0;
    position: relative;
}

/* Progress bar améliorée (glow accent) */
.nosk8-progress::before {
    background: linear-gradient(90deg, var(--n8-ink), var(--n8-ink-2));
    box-shadow: 0 0 8px rgba(26,39,68,0.4);
}

/* Tabs Shop : énergie sur clic actif */
.nosk8-shop__tab {
    transition: all .25s var(--fx-trans);
}
.nosk8-shop__tab.is-active {
    box-shadow: 0 4px 14px -2px rgba(10,15,26,0.4);
    transform: translateY(-1px);
}

/* FAB Shop flottant (bas-droite, apparaît au scroll) */
.fx-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    background: linear-gradient(135deg, #1a2744 0%, #0a0f1a 100%);
    color: #fff;
    padding: 14px 22px;
    border-radius: 100px;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow:
        0 12px 32px -8px rgba(26,39,68,0.5),
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 -2px 6px rgba(0,0,0,0.3) inset;
    display: inline-flex; align-items: center; gap: 10px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all .35s var(--fx-trans);
    pointer-events: none;
}
.fx-fab.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.fx-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 20px 48px -8px rgba(26,39,68,0.7),
        0 0 0 1px rgba(255,255,255,0.15) inset;
}
.fx-fab__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4cd964;
    box-shadow: 0 0 10px #4cd964, 0 0 0 4px rgba(76,217,100,0.2);
    animation: fxPulse 2s infinite;
}
@keyframes fxPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}
@media (max-width: 720px) {
    .fx-fab {
        bottom: 16px; right: 16px;
        padding: 12px 18px;
        font-size: 11px;
    }
}

/* Drop cap gradient (renforce le drop cap déjà présent) */
.nosk8-article__content > p:first-of-type::first-letter {
    background: linear-gradient(135deg, #0a0f1a 0%, #1a2744 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 14px rgba(26,39,68,0.15);
}

/* H2 dans le contenu : barre accent avec glow */
.nosk8-article__content h2::before {
    background: linear-gradient(90deg, var(--n8-ink), var(--n8-ink-2));
    box-shadow: 0 2px 6px rgba(26,39,68,0.3);
}

/* Continue ta lecture : effet hover dramatique */
.nosk8-continue {
    position: relative;
    overflow: hidden;
}
.nosk8-continue::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(101,128,196,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
.nosk8-continue:hover::before { opacity: 1; }
.nosk8-continue__cta {
    transition: all .25s var(--fx-trans);
}
.nosk8-continue__cta:hover {
    transform: translateX(2px);
    background: #fff !important;
    color: #0a0f1a !important;
    box-shadow: 0 8px 24px rgba(255,255,255,0.2);
}

/* Sidebar sticky : ombre subtile pour le détacher */
@media (min-width: 1000px) {
    .nosk8-toc,
    .nosk8-side-mini {
        background: #fff;
        box-shadow: 0 4px 14px -4px rgba(10,15,26,0.06);
        border-radius: var(--n8-radius);
        border: 1px solid rgba(10,15,26,0.04);
        padding: 16px 18px !important;
    }
    .nosk8-toc[hidden] { display: none; }
}