/* ============================================
   TRANSITIONS FLUIDES — Guess My Word
   Transitions simples et cohérentes sur tout le site
   ============================================ */

:root {
    --transition-fast: 0.2s;
    --transition-normal: 0.25s;
    --transition-slow: 0.35s;
    --ease-default: ease;
    --ease-out: ease-out;
}

/* Scroll fluide */
html {
    scroll-behavior: smooth;
}

/* Transition page lobby -> game (iframe) */
#game-iframe-wrapper {
    animation: pageFadeIn var(--transition-slow) var(--ease-out) forwards;
}
#game-iframe-wrapper iframe {
    animation: pageFadeIn var(--transition-normal) 0.1s var(--ease-out) forwards;
}
@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Overlays créés dynamiquement : fade-in à l'apparition */
.custom-popup-overlay,
.game-details-overlay {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
.custom-popup-overlay .custom-popup,
.game-details-overlay .game-details-modal {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Rules modal : animation à l'ouverture */
.rules-modal[style*="flex"] {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
.rules-modal[style*="flex"] .rules-content {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}

/* Credits overlay */
.credits-overlay[style*="block"] {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}

/* Account modal (index) */
#account-modal[style*="flex"] {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
#account-modal[style*="flex"] .modal {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}

/* Leaderboard overlay (créé dynamiquement) */
.leaderboard-overlay {
    animation: overlayFadeIn var(--transition-normal) var(--ease-default);
}
.leaderboard-overlay .leaderboard-modal {
    animation: modalSlideIn var(--transition-normal) var(--ease-out);
}