/* ============================================================
   LaSpecial — Motion System
   Variables, easings, utilitaires d'animation réutilisables.
   Inclus globalement via laspecial.js.
   ============================================================ */

:root {
    /* Durées */
    --dur-instant: 80ms;
    --dur-fast: 160ms;
    --dur-base: 260ms;
    --dur-slow: 420ms;
    --dur-xslow: 700ms;

    /* Easings (basés sur les courbes Material + Quint) */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in: cubic-bezier(0.8, 0, 0.85, 0.25);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-snappy: cubic-bezier(0.4, 0, 0.1, 1);

    /* ===== Design tokens (partagés par toutes les pages) ===== */
    /* Couleurs marque */
    --ls-gold: #FFD700;
    --ls-gold-light: #fff3a3;
    --ls-gold-dark: #b8930a;
    --ls-purple: #7000FF;
    --ls-pink: #FF004D;
    --ls-orange: #FF7A00;
    --ls-fire: linear-gradient(135deg, #FF7A00 0%, #FF004D 50%, #7000FF 100%);
    --ls-cool: linear-gradient(135deg, #7000FF 0%, #00D4FF 100%);

    /* Texte */
    --ls-text: #f5f0ff;
    --ls-text-soft: #cab5e6;
    --ls-muted: #907d9e;

    /* Surfaces (cartes) */
    --ls-card-bg: rgba(255, 255, 255, 0.05);
    --ls-card-bg-strong: rgba(255, 255, 255, 0.08);
    --ls-card-border: rgba(255, 255, 255, 0.12);
    --ls-card-border-strong: rgba(255, 255, 255, 0.2);

    /* Rayons */
    --ls-radius-sm: 10px;
    --ls-radius: 16px;
    --ls-radius-lg: 22px;
    --ls-radius-pill: 999px;

    /* Ombres */
    --ls-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ls-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    --ls-shadow-gold: 0 6px 24px rgba(255, 215, 0, 0.35);

    /* Espacements verticaux entre sections */
    --ls-section-gap: 16px;
}

/* ===== Utilitaires harmonisés (opt-in) ===== */
/* À utiliser comme classe additionnelle pour avoir le look "carte LaSpecial" standard */
.ls-card {
    background: var(--ls-card-bg);
    border: 1px solid var(--ls-card-border);
    border-radius: var(--ls-radius);
    padding: 16px;
}
.ls-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ls-radius-pill);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
}
.ls-pill.is-gold {
    background: linear-gradient(135deg, var(--ls-gold), var(--ls-gold-dark));
    color: #1a0e00;
}
.ls-pill.is-muted {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--ls-card-border);
    color: var(--ls-text-soft);
}

/* ============================================================
   1. Reset universel pour éviter les sauts au chargement
   ============================================================ */
html {
    scroll-behavior: smooth;
}

/* Empêche les images / icônes d'être sélectionnables (UX mobile) */
button, .mode-card, .card-slot, .btn-mode, .btn-back, .btn-icon {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================================
   2. Transitions douces par défaut sur les éléments interactifs
   ============================================================ */
button,
.mode-card,
.btn-mode,
.btn-back,
.btn-icon,
a.btn,
.toggle .slider-toggle {
    will-change: auto;
    transition:
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        opacity var(--dur-fast) var(--ease-out);
}

/* Active state (clic) - effet "push" */
button:active,
.mode-card:active,
.btn-mode:active {
    transition-duration: var(--dur-instant);
}

/* ============================================================
   3. Utilitaires d'apparition réutilisables
   ============================================================ */
.fx-fade-in {
    animation: fxFadeIn var(--dur-base) var(--ease-out) both;
}
@keyframes fxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fxFadeOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -8px, 0); }
}

.fx-slide-up {
    animation: fxSlideUp var(--dur-slow) var(--ease-back) both;
}
@keyframes fxSlideUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.fx-slide-down {
    animation: fxSlideDown var(--dur-slow) var(--ease-back) both;
}
@keyframes fxSlideDown {
    from { opacity: 0; transform: translate3d(0, -24px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.fx-pop-in {
    animation: fxPopIn var(--dur-base) var(--ease-back) both;
}
@keyframes fxPopIn {
    0% { opacity: 0; transform: scale(0.85); }
    60% { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

.fx-shake {
    animation: fxShake 0.4s var(--ease-snappy);
}
@keyframes fxShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}

/* ============================================================
   4. Cascade automatique pour grilles / listes
   La page peut tagger un container avec .fx-stagger ; chaque
   enfant direct est révélé en cascade (max 30 enfants).
   ============================================================ */
.fx-stagger > * {
    opacity: 0;
    animation: fxSlideUp var(--dur-slow) var(--ease-back) forwards;
}
.fx-stagger > *:nth-child(1)  { animation-delay: 40ms; }
.fx-stagger > *:nth-child(2)  { animation-delay: 80ms; }
.fx-stagger > *:nth-child(3)  { animation-delay: 120ms; }
.fx-stagger > *:nth-child(4)  { animation-delay: 160ms; }
.fx-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.fx-stagger > *:nth-child(6)  { animation-delay: 240ms; }
.fx-stagger > *:nth-child(7)  { animation-delay: 280ms; }
.fx-stagger > *:nth-child(8)  { animation-delay: 320ms; }
.fx-stagger > *:nth-child(9)  { animation-delay: 360ms; }
.fx-stagger > *:nth-child(10) { animation-delay: 400ms; }
.fx-stagger > *:nth-child(11) { animation-delay: 440ms; }
.fx-stagger > *:nth-child(12) { animation-delay: 480ms; }
.fx-stagger > *:nth-child(13) { animation-delay: 520ms; }
.fx-stagger > *:nth-child(14) { animation-delay: 560ms; }
.fx-stagger > *:nth-child(15) { animation-delay: 600ms; }
.fx-stagger > *:nth-child(n+16) { animation-delay: 640ms; }

/* ============================================================
   5. Transition de page — STRICTEMENT opacity sur body
   (pas de transform/filter/perspective : ils créent un containing
   block qui casse position:fixed de la bottom-nav et la sépare
   du viewport pour la coller à la page).
   ============================================================ */
body {
    animation: pageEnter 0.28s ease-out both;
}
@keyframes pageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Le slide-in se fait sur le contenu interne (#app ou wrapper),
   pas sur body — comme ça la nav reste fixée au viewport. */
#app, [data-page-content] {
    animation: contentEnter 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes contentEnter {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fade out à la navigation : opacity uniquement, idem. */
body.page-leaving {
    animation: pageLeave 0.18s ease-in forwards;
    pointer-events: none;
}
@keyframes pageLeave {
    to { opacity: 0; }
}

/* Accessibilité : respecte la préférence "moins de mouvement" */
@media (prefers-reduced-motion: reduce) {
    body, #app, [data-page-content], body.page-leaving {
        animation: none !important;
    }
}

/* ============================================================
   6. Micro-interactions : ripple/click feedback
   Active sur tout bouton sans opt-out
   ============================================================ */
button:not([data-feedback="none"]):active,
.mode-card:active {
    /* Le scale aide à donner du retour haptique visuel */
    will-change: transform;
}

/* ============================================================
   7. Hover (desktop uniquement, ne pas perturber le tactile)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .mode-card:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 10px 0 #180f21, 0 0 20px rgba(178, 0, 255, 0.15);
    }
    button:hover:not(:disabled) {
        filter: brightness(1.05);
    }
}

/* ============================================================
   8. Accessibilité — prefers-reduced-motion
   Désactive toutes les animations lourdes pour les utilisateurs
   qui ont activé "réduire les animations" dans leur OS.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    body { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   9. Scrollbars cohérentes (look "app")
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

/* ============================================================
   FIX FLIP 3D MOBILE
   Sur mobile (Safari/Chrome), les emojis du DOS de carte
   ignorent parfois backface-visibility et débordent par-dessus
   la face AVANT pendant/après le retournement.
   Solution : on combine backface-visibility + un swap d'opacité
   déclenché juste après le point d'inflexion du flip (~0.38s),
   moment où la carte est de profil (donc invisible) → imperceptible.
   S'applique à tous les jeux qui utilisent .card-3d / .card-face.
   ============================================================ */
.card-3d {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.card-3d .card-face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* État par défaut : le DOS est visible, la FACE avant masquée */
.card-3d .card-back  { opacity: 1; transition: opacity 0.01s linear 0.38s; }
.card-3d .card-front { opacity: 0; transition: opacity 0.01s linear 0.38s; }
/* État retourné : le DOS disparaît (plus de bleed des emojis), la FACE avant apparaît */
.card-3d.flipped .card-back  { opacity: 0; }
.card-3d.flipped .card-front { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .card-3d .card-back, .card-3d .card-front { transition: none !important; }
}