/* =========================================================
   Mode Ghost — la peau de l'observateur.
   POC validé : design-poc/mode-ghost.html

   Tout est porté par [data-ghost] sur <html> (voir base.html.twig) : on rend
   les surfaces translucides et on pose un filigrane derrière le contenu. Aucun
   composant n'est modifié — le voile passe par les tokens, le filigrane vit
   sous .root-content (qui est déjà en z-index 1).
   ========================================================= */

/* ---- Le voile ----
   Les surfaces deviennent translucides : tout le CSS du site passant par ces
   tokens, le voile se propage à chaque carte, panneau, champ et tableau sans
   les toucher un à un. Valeurs littérales obligatoires : une variable CSS ne
   peut pas se citer elle-même (--surface-1 dérivé de --surface-1 = cycle). */
:root[data-ghost] {
    --surface-1:     rgba(20, 23, 53, 0.88);
    --surface-2:     rgba(27, 31, 65, 0.88);
    --surface-2-hov: rgba(35, 39, 79, 0.92);
    --surface-3:     rgba(15, 18, 46, 0.88);

    /* Encre du filigrane : le gris-bleu du texte secondaire, pas le blanc du texte.
       Posé sur le bleu nuit, le blanc tire un halo laiteux qui écrase la page. */
    --ghost-ink:   #9396b4;
    --ghost-mark:  0.075;
    --ghost-smoke: rgba(233, 234, 243, 0.20);
}

:root[data-ghost][data-theme="light"] {
    --surface-1:     rgba(245, 245, 249, 0.90);
    --surface-2:     rgba(255, 255, 255, 0.90);
    --surface-2-hov: rgba(243, 243, 248, 0.93);
    --surface-3:     rgba(228, 229, 237, 0.90);

    --ghost-ink:   #4a4e70;
    --ghost-mark:  0.08;   /* l'encre sombre sur fond clair a besoin d'un peu plus */
    --ghost-smoke: rgba(19, 22, 53, 0.16);
}

/* ---- Le filigrane : Jigoro Kano devant la lune ----
   Fixe au scroll, derrière tout le contenu, jamais cliquable. Le PNG (blanc sur
   fond transparent) sert de masque dans le SVG : la silhouette se remplit à
   l'encre du texte, donc une seule image pour les deux thèmes. */
.ghost-mark {
    position: fixed;
    top: var(--navbar-height);   /* la silhouette commence sous le bandeau, jamais derrière */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ghost-mark svg {
    position: absolute;
    right: 3%;
    bottom: 0;
    height: 94%;
    width: auto;
    color: var(--ghost-ink);
    opacity: var(--ghost-mark);
    animation: ghost-drift 20s ease-in-out infinite;
}

/* Le filigrane « respire » très lentement : à peine perceptible, mais l'écran
   n'est jamais tout à fait figé. */
@keyframes ghost-drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* Sur mobile, la silhouette mangerait la moitié de l'écran : on la recule. */
@media (max-width: 860px) {
    .ghost-mark svg { height: 56%; right: -4%; bottom: 4%; }
}

/* ---- Le badge du bandeau ----
   Seul texte qui nomme le mode, avec la note de la sidebar. Il vit dans le
   bandeau bleu nuit : il en reprend les tokens (--band-*). */
.ghost-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.25rem;
    padding: 0.22rem 0.6rem 0.22rem 0.5rem;
    border: 1px solid rgba(230, 201, 138, 0.32);
    border-radius: 999px;
    background: var(--band-soft);
    color: var(--band-active);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ghost-badge svg { width: 14px; height: 14px; }

.ghost-badge .ghost-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: ghost-pulse 2.6s ease-in-out infinite;
}

@keyframes ghost-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ---- La note de la sidebar ---- */
.ghost-note {
    margin: 1.1rem 0.4rem 0;
    padding: 0.55rem 0.6rem;
    border: 1px dashed rgba(230, 201, 138, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-size: 0.72rem;
    line-height: 1.4;
}

.ghost-note b {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--gold-strong);
    font-weight: 600;
}

/* ---- La fumée d'apparition ----
   Jouée une fois par session (contrôleur ghost_poof) : le Ghost n'arrive pas,
   il apparaît. Au-dessus du bandeau (z-index 1030) pour couvrir tout l'écran. */
.ghost-poof {
    position: fixed;
    inset: 0;
    z-index: 1040;
    overflow: hidden;
    pointer-events: none;
}

.ghost-poof i {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, var(--ghost-smoke), transparent 70%);
    animation: ghost-poof 1s ease-out forwards;
}

@keyframes ghost-poof {
    from { transform: scale(0.25); opacity: 0.95; }
    to   { transform: scale(1.7) translateY(-38px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ghost-mark svg,
    .ghost-badge .ghost-dot,
    .ghost-poof i { animation: none; }
}