/**
 * Ambiance décorative du shell public - reprise sobre de la maintenance.
 *
 * Chargée après style.css par web/templates/web/base.html uniquement.
 * Variantes portées explicitement par <body> :
 *   - `ambient`            : défaut discret (halos statiques, ni étoiles ni grille) ;
 *   - `ambient--showcase`  : étoiles + grille technique + halos (vitrine) ;
 *   - `ambient--reading`   : halos atténués, aucune texture derrière le texte.
 *
 * Contrats : aucun contenu ni point d'interaction, `pointer-events: none` sur
 * toutes les couches, animations limitées à `transform`/`opacity`, neutralisation
 * en reduced-motion (style.css) et à l'impression.
 */

/* ======================================
   DÉFAUT DISCRET - HALOS STATIQUES
====================================== */
body.ambient::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 18%, var(--ambient-halo), transparent 48%),
        radial-gradient(ellipse at 86% 4%, var(--ambient-halo-accent), transparent 44%);
}

body.ambient--reading::before {
    opacity: 0.55;
}

/* ======================================
   VARIANTE VITRINE - ÉTOILES ET GRILLE
====================================== */
body.ambient--showcase::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20px 30px, var(--ambient-star) 98%, transparent),
        radial-gradient(1px 1px at 100px 140px, var(--ambient-star-alt) 98%, transparent),
        radial-gradient(2px 2px at 160px 70px, var(--ambient-star) 98%, transparent),
        linear-gradient(var(--ambient-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ambient-grid-line) 1px, transparent 1px);
    background-size:
        207px 193px,
        311px 293px,
        503px 409px,
        var(--ambient-grid-size) var(--ambient-grid-size),
        var(--ambient-grid-size) var(--ambient-grid-size);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
    opacity: 0.7;
}

body.ambient--reading::after {
    content: none;
}

/* ======================================
   SURFACE COMMUNE DES PAGES VITRINES
====================================== */
/* Une seule source d'ambiance : le <body>. Cette surface translucide est la
   même sur toutes les sections vitrines (accueil, services, contact, CV, blog)
   afin d'éviter les fonds opaques divergents et les coutures entre sections. */
.ambient-surface {
    background: var(--ambient-surface);
}

/* ======================================
   UTILITAIRES OPT-IN
====================================== */

/* Fin liseré cyan/violet sur une carte explicite (pseudo-élément libre). */
.ambient-edge {
    position: relative;
}

.ambient-edge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    border-radius: inherit;
    background: var(--ambient-edge-gradient);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.ambient-edge:hover::after,
.ambient-edge:focus-within::after {
    opacity: 0.9;
}

/* Fondu ponctuel d'un wrapper d'en-tête (jamais un ancêtre sticky/fixed). */
@media (prefers-reduced-motion: no-preference) {
    .ambient-intro {
        animation: ambient-intro 0.5s ease-out both;
    }
}

@keyframes ambient-intro {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Halo statique du badge de pied de page ; anneaux en rotation au hover/focus. */
.footer-badge-halo {
    position: relative;
}

.footer-badge-halo::before,
.footer-badge-halo::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.footer-badge-halo::before {
    inset: -18px;
    border: 1px solid rgba(var(--secondary-rgb), 0.18);
    box-shadow:
        inset 0 0 40px rgba(var(--secondary-rgb), 0.08),
        0 0 48px rgba(var(--accent-rgb), 0.1);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.footer-badge-halo::after {
    inset: -28px;
    border: 1px dashed rgba(var(--accent-rgb), 0.18);
}

.footer-badge-halo:hover::before,
.footer-badge-halo:focus-visible::before {
    border-color: rgba(var(--secondary-rgb), 0.38);
    box-shadow:
        inset 0 0 40px rgba(var(--secondary-rgb), 0.14),
        0 0 60px rgba(var(--accent-rgb), 0.18);
}

.footer-badge-halo:hover::after,
.footer-badge-halo:focus-visible::after {
    animation: ambient-orbit 22s linear infinite;
}

@keyframes ambient-orbit {
    to {
        transform: rotate(360deg);
    }
}

/* ======================================
   IMPRESSION
====================================== */
@media print {
    body.ambient::before,
    body.ambient::after,
    .ambient-edge::after,
    .footer-badge-halo::before,
    .footer-badge-halo::after {
        display: none !important;
    }

    .ambient-intro {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}