/* ==========================================================================
   Motion
   All the decorative animation of the site lives here, loaded LAST on every
   page. Rules:
     - Animate only transform and opacity (smooth, no layout work).
     - Entrance animations use fill-mode "backwards", never "both": the end
       state must not freeze, or it would block hover/press transforms.
     - Everything is switched off for people who ask for reduced motion
       (see the last block).
   Easing tokens (--ease-out, --ease-bounce) are defined in styles.css.
   ========================================================================== */

@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: none; }
}

@keyframes correct-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-3deg) scale(1.04); }
    75%      { transform: rotate(3deg) scale(1.04); }
}

/* ---- Page entrance: the main blocks rise in one after another ---- */

.header,
.learning-language,
.tag-filter,
.content-card,
.quiz-card,
.game-card {
    animation: rise-in 0.5s var(--ease-out) backwards;
}

.learning-language { animation-delay: 0.05s; }
.tag-filter        { animation-delay: 0.1s; }
.content-card,
.quiz-card,
.game-card         { animation-delay: 0.15s; }

/* Cards of a grid (games, tests, results), whatever element wraps each one.
   The grid is redrawn on every page or filter change, so the cards enter each time. */
.card-grid > * { animation: rise-in 0.45s var(--ease-out) backwards; }
.card-grid > :nth-child(2) { animation-delay: 0.06s; }
.card-grid > :nth-child(3) { animation-delay: 0.12s; }
.card-grid > :nth-child(n+4) { animation-delay: 0.18s; }

/* ---- Inside a game ---- */

/* Tiles pop in with a small stagger every round (they are new elements). */
.game-choice { animation: pop-in 0.35s var(--ease-bounce) backwards; }
.game-choice:nth-child(2) { animation-delay: 0.04s; }
.game-choice:nth-child(3) { animation-delay: 0.08s; }
.game-choice:nth-child(4) { animation-delay: 0.12s; }
.game-choice:nth-child(5) { animation-delay: 0.16s; }
.game-choice:nth-child(6) { animation-delay: 0.2s; }
.game-choice:nth-child(7) { animation-delay: 0.24s; }
.game-choice:nth-child(8) { animation-delay: 0.28s; }

/* game-kit.js adds .is-entering to the prompt at the start of each round. */
.game-prompt.is-entering { animation: pop-in 0.4s var(--ease-bounce); }

/* Right answer: a quick bounce (the wrong one shakes, see games.css). */
.game-choice.is-correct { animation: correct-pop 0.45s var(--ease-bounce); }

/* A quick, tight shake (used by vibrate-on-view.js). */
@keyframes vibrate {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-3px, 1px) rotate(-6deg); }
    20% { transform: translate(3px, -1px) rotate(6deg); }
    30% { transform: translate(-3px, -1px) rotate(-5deg); }
    40% { transform: translate(3px, 1px) rotate(5deg); }
    50% { transform: translate(-2px, 1px) rotate(-4deg); }
    60% { transform: translate(2px, -1px) rotate(4deg); }
    70% { transform: translate(-2px, 0) rotate(-3deg); }
    80% { transform: translate(2px, 0) rotate(3deg); }
    90% { transform: translate(-1px, 0) rotate(-1deg); }
}

.is-vibrating { animation: vibrate 0.7s linear; }

@keyframes heart-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ---- Small touches ---- */

/* home.js adds .is-popping when a heart is pressed. */
.favorite-btn.is-popping svg,
.game-btn-favorite.is-popping svg { animation: heart-pop 0.4s var(--ease-bounce); }

@media (hover: hover) {
    .site-logo:hover { animation: wiggle 0.5s ease-in-out; }
}

.tag-filter-btn:active { transform: scale(0.94); }

/* ---- Celebration: confetti falling when a game is finished (js/components/celebration.js) ---- */

@keyframes confetti-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); opacity: 0; }
}

.celebration-piece {
    animation: confetti-fall var(--duration) var(--delay) linear both;
    will-change: transform;
}

/* ---- Reduced motion: no movement at all ---- */

/* The avatar blinks (eyelids of the drawings, js/core/egg-progress.js): closed for about a tenth of a second every 5 s.
   The two eyes share the animation; reduced motion leaves them open (the last keyframe). */
.avatar-lid {
    animation: avatar-blink 5s ease-in-out infinite;
}

@keyframes avatar-blink {
    0%, 93%, 100% { transform: scaleY(0); }
    95.5%         { transform: scaleY(1); }
}

/* The golden egg (js/components/gold-egg.js): it floats and rocks, its shine comes and goes, and the stars turn around it
   and twinkle. A still egg (.is-still: the thumbnail of My collection) does not move at all. */
.gold-egg-svg   { animation: gold-egg-float 2.8s ease-in-out infinite; }
.gold-egg-shine { animation: gold-egg-shine 3s ease-in-out infinite; }
.gold-egg-orbit { animation: gold-egg-orbit 9s linear infinite; }
.gold-egg-star  { animation: gold-egg-twinkle 1.8s ease-in-out infinite; }
.gold-egg-star--2 { animation-delay: -0.45s; }
.gold-egg-star--3 { animation-delay: -0.9s; }
.gold-egg-star--4 { animation-delay: -1.35s; }
.gold-egg-anim.is-still .gold-egg-svg,
.gold-egg-anim.is-still .gold-egg-shine,
.gold-egg-anim.is-still .gold-egg-orbit,
.gold-egg-anim.is-still .gold-egg-star { animation: none; }

@keyframes gold-egg-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-7%) rotate(2deg); }
}

@keyframes gold-egg-shine {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.85; }
}

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

@keyframes gold-egg-twinkle {
    0%, 100% { transform: scale(0.6); opacity: 0.55; }
    50%      { transform: scale(1.1); opacity: 1; }
}

/* "Love" (js/components/love-heart.js): the heart beats twice and rests, two rings of light grow and fade, little hearts
   rise and fade like bubbles (each one at its own time), and the sparkles twinkle. A still one (.is-still: the
   thumbnail of My collection) does not move. */
.love-heart  { animation: love-beat 1.3s ease-in-out infinite; }
.love-ring   { animation: love-ring 2.6s ease-out infinite; opacity: 0; }
.love-ring--late { animation-delay: 1.3s; }
.love-bubble { animation: love-rise 4.2s ease-in infinite; opacity: 0; }
.love-bubble--2 { animation-delay: -0.7s; animation-duration: 4.8s; }
.love-bubble--3 { animation-delay: -1.4s; animation-duration: 3.9s; }
.love-bubble--4 { animation-delay: -2.1s; animation-duration: 4.5s; }
.love-bubble--5 { animation-delay: -2.8s; animation-duration: 5.2s; }
.love-bubble--6 { animation-delay: -3.5s; animation-duration: 4.4s; }
.love-spark  { animation: love-twinkle 2s ease-in-out infinite; }
.love-spark--2 { animation-delay: -0.5s; }
.love-spark--3 { animation-delay: -1s; }
.love-spark--4 { animation-delay: -1.5s; }
.love-anim.is-still .love-heart,
.love-anim.is-still .love-ring,
.love-anim.is-still .love-bubble,
.love-anim.is-still .love-spark { animation: none; }
.love-anim.is-still .love-bubble { opacity: 0.9; }
.love-anim.is-still .love-ring { opacity: 0.5; }

@keyframes love-beat {
    0%, 42%, 100% { transform: scale(1); }
    12%           { transform: scale(1.16); }
    24%           { transform: scale(0.98); }
    32%           { transform: scale(1.09); }
}

@keyframes love-ring {
    0%   { transform: scale(0.85); opacity: 0.8; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes love-rise {
    0%   { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translate(6px, -60px) rotate(8deg); }
    100% { transform: translate(-4px, -130px) rotate(-6deg); opacity: 0; }
}

@keyframes love-twinkle {
    0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.5; }
    50%      { transform: scale(1.1) rotate(20deg); opacity: 1; }
}

/* "Magic Christmas" (js/components/xmas-tree.js): the tree sways, its star turns and glows, the lights pulse, the
   baubles swing, the gifts bounce, the stars of the sky twinkle, the moon glows and the snow falls (each flake at its own
   speed, from the custom properties of the component). A still one (.is-still) does not move. */
.xmas-sway    { animation: xmas-sway 4s ease-in-out infinite; }
.xmas-topstar { animation: xmas-spin 10s linear infinite, xmas-glow 1.4s ease-in-out infinite alternate; }
.xmas-garland { animation: xmas-glow 1.4s ease-in-out infinite alternate; }
.xmas-bulb    { animation: xmas-pulse var(--p, 1.5s) ease-in-out var(--d, 0s) infinite alternate; }
.xmas-bauble  { animation: xmas-swing var(--s, 2.6s) ease-in-out var(--d, 0s) infinite alternate; }
.xmas-twinkle { animation: xmas-twinkle 2s ease-in-out var(--d, 0s) infinite; }
.xmas-gift    { animation: xmas-bob 2.5s ease-in-out var(--d, 0s) infinite; }
.xmas-star    { animation: xmas-star var(--dur, 2s) ease-in-out var(--delay, 0s) infinite alternate; }
.xmas-moon-glow { animation: xmas-moon 4s ease-in-out infinite alternate; }
.xmas-flake   { animation: xmas-fall var(--fall, 7s) linear var(--delay, 0s) infinite; }
.xmas-anim.is-still .xmas-svg * { animation: none; }

@keyframes xmas-sway {
    0%, 100% { transform: rotate(-1.3deg); }
    50%      { transform: rotate(1.3deg); }
}

@keyframes xmas-spin { to { rotate: 360deg; } }

@keyframes xmas-glow {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}

@keyframes xmas-pulse {
    from { transform: scale(0.75); opacity: 0.65; }
    to   { transform: scale(1.2); opacity: 1; }
}

@keyframes xmas-swing {
    from { transform: rotate(-11deg); }
    to   { transform: rotate(11deg); }
}

@keyframes xmas-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.3) rotate(45deg); }
}

@keyframes xmas-bob { 50% { transform: translateY(-6px); } }

@keyframes xmas-star {
    from { opacity: 0.15; }
    to   { opacity: 1; }
}

@keyframes xmas-moon {
    from { opacity: 0.35; }
    to   { opacity: 0.75; }
}

@keyframes xmas-fall {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 0.85; }
    100% { transform: translate(var(--drift, 30px), 460px) rotate(220deg); opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}