/* Fuuka — landings pub : composant « motion » (défilé de vraies cartes + mots courts).
   Utilisé par play.html (intro) et try.html (écran final). JS : FuukaLanding.motion().
   Le conteneur garde le fond de la page (arcade Fuuka assombri) : pas de fond noir ici. */
.fk-motion { position: relative; overflow: hidden; }
.fk-rows { position: absolute; left: -30%; right: -30%; top: 50%; transform: translateY(-50%) rotate(-9deg);
           display: flex; flex-direction: column; gap: 2px; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.fk-rows.shown { opacity: 1; }
/* Vitesse en px/s posée par le JS (--fk-dur par rangée) : toutes les rangées défilent à la même vitesse. */
.fk-row { display: flex; gap: 0; width: max-content; will-change: transform; }
.fk-rows.go .fk-row { animation: fk-scroll var(--fk-dur, 40s) linear infinite; }
/* Sélecteur aussi précis que la règle d'animation, sinon le raccourci « animation »
   remet la direction à normal et toutes les rangées partent dans le même sens. */
.fk-rows.go .fk-row.rev { animation-direction: reverse; }
/* Même hauteur pour toutes les cartes = même échelle de boîte carte (les 3D débordent dans leurs marges). */
.fk-motion { --fk-ch: clamp(180px, 31vh, 360px); }
.fk-row img { height: var(--fk-h, var(--fk-ch)); width: auto; aspect-ratio: 197 / 280; display: block; margin: 0 -18px;
              /* Légèrement flou et sombre : le fond vit, mais le texte et les boutons restent lisibles. */
              filter: blur(1.4px) brightness(.72) saturate(.9); }
@keyframes fk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Voile : léger pendant les mots, plus présent quand les boutons arrivent (lisibilité). */
.fk-veil { position: absolute; inset: 0; pointer-events: none; transition: background .7s ease;
           background: radial-gradient(ellipse 70% 50% at center, rgba(10,7,11,.68) 0%, rgba(10,7,11,.55) 60%, rgba(10,7,11,.7) 100%); }
.fk-motion.fk-calm .fk-veil { background: radial-gradient(ellipse at center, rgba(10,7,11,.72) 0%, rgba(10,7,11,.78) 65%, rgba(10,7,11,.88) 100%); }
/* Les mots : un à la fois, gros, qui claquent. */
.fk-words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
            padding: 24px; pointer-events: none; }
.fk-word { position: absolute; max-width: min(92%, 1100px); font-family: "Baloo 2", -apple-system, "Segoe UI", sans-serif;
           font-size: clamp(46px, 13vw, 124px); line-height: 1; font-weight: 800; letter-spacing: -.5px; opacity: 0;
           color: #fff;
           /* Contour = ombres serrées (un -webkit-text-stroke hachure le dégradé dans Chrome). */
           filter: drop-shadow(0 0 1.5px #14061a) drop-shadow(0 0 1.5px #14061a) drop-shadow(0 0 2px #14061a)
                   drop-shadow(0 8px 16px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(255,111,163,.4)); }
/* Dégradé posé sur CHAQUE ligne (span), jamais sur le bloc : sinon Chrome mélange les
   lignes quand une réponse s'ajoute dessous (texte brouillé). */
.fk-word .fk-line, .fk-word .fk-add { background: linear-gradient(100deg, #ffd166 0%, #ff6fa3 45%, #a98bff 100%);
           -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fk-word.v1 .fk-line { background-image: linear-gradient(100deg, #6ee7ff 0%, #a98bff 50%, #ff6fa3 100%); }
.fk-word.v2 .fk-line { background-image: linear-gradient(100deg, #ffffff 0%, #ffd166 40%, #ff8a4c 100%); }
.fk-word.in, .fk-word.stay { animation: fk-pop .9s cubic-bezier(.2,.8,.2,1) both; }
.fk-word.out { animation: fk-out .35s ease both; }
@keyframes fk-pop { 0% { opacity: 0; transform: scale(.6) translateY(14px); } 40% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fk-out { to { opacity: 0; transform: scale(1.18); filter: blur(6px); } }
.fk-skip { position: absolute; bottom: 58px; left: 0; right: 0; text-align: center; font-size: 13px; color: #cbc4d3; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fk-rows.go .fk-row { animation-duration: 240s; } .fk-word.in, .fk-word.stay { animation-duration: .2s; } }

/* Arrivée des boutons Discord : impact, onde, étincelles, puis reflet qui passe en boucle. */
.fk-slam { animation: fk-slam .7s cubic-bezier(.2,1.4,.3,1) both !important; position: relative; overflow: hidden; }
.fk-slam.fk-live { animation: fk-glow 1.8s ease-in-out infinite !important; }
@keyframes fk-slam { 0% { opacity: 0; transform: scale(1.9); filter: blur(10px) brightness(2); } 60% { opacity: 1; transform: scale(.94); filter: none; } 100% { transform: scale(1); } }
@keyframes fk-glow { 0%,100% { transform: scale(1); box-shadow: 0 10px 30px rgba(88,101,242,.55), 0 0 0 0 rgba(88,101,242,.0); }
                     50% { transform: scale(1.035); box-shadow: 0 14px 44px rgba(88,101,242,.9), 0 0 0 6px rgba(88,101,242,.18); } }
.fk-slam::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; pointer-events: none;
                  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
                  animation: fk-shine 2.6s ease-in-out .8s infinite; }
@keyframes fk-shine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.fk-ring { position: fixed; border-radius: 50%; border: 3px solid rgba(169,139,255,.9); pointer-events: none; z-index: 30;
           transform: translate(-50%,-50%) scale(.2); animation: fk-ring .8s ease-out forwards; }
@keyframes fk-ring { to { transform: translate(-50%,-50%) scale(3.2); opacity: 0; } }
.fk-spark { position: fixed; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 30;
            animation: fk-spark .9s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes fk-spark { to { transform: translate(var(--dx), var(--dy)) rotate(360deg) scale(.4); opacity: 0; } }
.fk-second-in { animation: fk-rise .55s ease .45s both; }
@keyframes fk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fk-slam, .fk-slam.fk-live, .fk-slam::after, .fk-ring, .fk-spark { animation: none !important; } }

/* Texte « choc » plein écran (carte récupérée). */
.fk-shout { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; text-align: center;
            pointer-events: none; background: radial-gradient(ellipse 80% 50% at center, rgba(10,7,11,.72), rgba(10,7,11,.35));
            animation: fk-fadein .25s ease both; }
.fk-shout.bye { animation: fk-fadeout .45s ease both; }
.fk-shout .fk-word { position: relative; opacity: 1; padding: 0 18px; }
.fk-shout-in { animation: fk-slam .75s cubic-bezier(.2,1.4,.3,1) both, fk-wobble 1.6s ease-in-out .8s infinite; }
@keyframes fk-wobble { 0%,100% { transform: rotate(-1.5deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.05); } }
@keyframes fk-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fk-fadeout { to { opacity: 0; } }

/* Phrases longues : plus petites (la 1re phrase était trop grosse). */
.fk-word.long { font-size: clamp(40px, 10.5vw, 100px); }
/* La dernière phrase monte et devient le titre au-dessus des boutons. */

/* Arrivée des boutons : flash, éclats de cartes, lueur qui change de couleur. */
.fk-flash { position: fixed; inset: 0; z-index: 29; pointer-events: none;
            background: radial-gradient(circle at center, rgba(255,255,255,.85), rgba(169,139,255,.35) 40%, rgba(0,0,0,0) 70%);
            animation: fk-flash .6s ease-out forwards; }
@keyframes fk-flash { from { opacity: 1; } to { opacity: 0; } }
.fk-cardbit { position: fixed; width: 54px; aspect-ratio: 233 / 358; border-radius: 6px; background-size: cover; background-position: center;
              z-index: 30; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.6); transform: translate(-50%,-50%);
              animation: fk-cardbit 1.2s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes fk-cardbit { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.6); opacity: 0; } }
/* Lueur sobre : une seule couleur (blurple Discord), respiration lente. */
.fk-slam.fk-live { animation: fk-breathe 2.2s ease-in-out infinite !important; }
@keyframes fk-breathe { 0%,100% { transform: scale(1); box-shadow: 0 10px 28px rgba(88,101,242,.55); }
                        50% { transform: scale(1.035); box-shadow: 0 12px 38px rgba(88,101,242,.8); } }

.fk-motion.fk-calm .fk-skip { display: none; }

/* Éventail de cartes de la série citée, derrière la phrase. */
.fk-fan { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fk-fan img { position: absolute; height: clamp(220px, 42vh, 480px); width: auto; top: 66%; left: 50%;
              transform: translate(calc(-50% + var(--x)), calc(-46% + var(--y))) rotate(var(--r));
              filter: drop-shadow(0 0 18px rgba(255,209,102,.35)) drop-shadow(0 18px 30px rgba(0,0,0,.75));
              animation: fk-fanin .55s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes fk-fanin { from { opacity: 0; transform: translate(-50%, -30%) rotate(0) scale(.6); } }
.fk-fan.out { transition: opacity .4s ease; opacity: 0; }
/* Phrase avec éventail : le texte monte au-dessus des cartes pour rester lisible. */
.fk-words .fk-word.fan-top { top: 21vh; transform-origin: center top; }
@media (min-width: 900px) { .fk-words .fk-word.fan-top { top: 14vh; } }
/* Rangées serrées en hauteur : chaque image a ~14 % de marge transparente en haut et en bas. */
.fk-row + .fk-row { margin-top: calc(var(--fk-ch) * -0.3); }
/* Réponse ajoutée sous la question (« On a ») : elle claque, la question reste. */
.fk-word .fk-add { display: inline-block; animation: fk-pop .7s cubic-bezier(.2,.8,.2,1) both;
                  background-image: linear-gradient(100deg, #ffffff 0%, #ffd166 40%, #ff8a4c 100%); }
/* En-tête final : icône + nom + accroche, au-dessus des boutons. */
.fk-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
.fk-head img { width: clamp(84px, 22vw, 120px); height: auto; aspect-ratio: 1; border-radius: 26px; box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 30px rgba(169,139,255,.35);
               animation: fk-headpop .6s cubic-bezier(.2,1.5,.3,1) both; }
.fk-head .fk-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(54px, 15vw, 96px); line-height: .95; margin-top: 10px;
                    background: linear-gradient(100deg, #ffd166, #ff6fa3 50%, #a98bff); -webkit-background-clip: text; background-clip: text; color: transparent;
                    filter: drop-shadow(0 0 1.5px #14061a) drop-shadow(0 0 2px #14061a) drop-shadow(0 8px 18px rgba(0,0,0,.85));
                    animation: fk-slam .7s cubic-bezier(.2,1.4,.3,1) .12s both; }
.fk-head .fk-sub { font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: clamp(17px, 4.4vw, 24px); line-height: 1.2; color: #f1eef3; margin-top: 6px; max-width: 340px;
                   text-shadow: 0 3px 12px rgba(0,0,0,.9); animation: fk-rise2 .5s ease .3s both; }
@keyframes fk-headpop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes fk-rise2 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Écran de chargement : le logo respire tant que les cartes du fond ne sont pas prêtes. */
.fk-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5;
             pointer-events: none; transition: opacity .35s ease; }
.fk-loader img { width: 72px; height: 72px; border-radius: 18px; opacity: .9; animation: fk-loadpulse 1.2s ease-in-out infinite; }
.fk-loader.out { opacity: 0; }
@keyframes fk-loadpulse { 0%, 100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.04); opacity: 1; } }
/* Rangée pré-générée : une image qui se répète, déplacée d'une boucle exacte (Web Animations). */
.fk-strip { height: var(--fk-ch); display: flex; flex-wrap: nowrap; will-change: transform; backface-visibility: hidden;
             -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); }
.fk-rows .fk-strip img { height: 100%; width: auto; aspect-ratio: auto; flex: none; display: block; margin: 0; filter: none; -webkit-user-drag: none; }
/* Fond vidéo pré-généré : couvre tout le conteneur, sans rotation ni calcul côté navigateur. */
.fk-rows.fk-video { left: 0; right: 0; top: 0; bottom: 0; transform: none; display: block; }
.fk-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Barre « Rejoindre » toujours disponible en bas (06/10). Téléphone : pleine largeur moins 16 px de
   chaque côté, au-dessus de la barre d'accueil ; ordinateur : centrée, 420 px max. */
.fk-sticky { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(34px + env(safe-area-inset-bottom, 0px));
             display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 420px; margin: 0 auto;
             background: #5865F2; color: #fff; text-decoration: none; font: 800 19px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
             padding: 18px 22px; border-radius: 18px; border: 2px solid rgba(255,255,255,.28);
             box-shadow: 0 10px 30px rgba(88,101,242,.6), 0 2px 0 rgba(0,0,0,.25);
             opacity: 0; transform: translateY(24px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,1.2,.3,1); }
.fk-sticky.in { opacity: 1; transform: none; animation: fk-sticky-pulse 2.2s ease-in-out 1.2s infinite; }
.fk-sticky.out { opacity: 0; transform: translateY(24px); pointer-events: none; animation: none; }
.fk-sticky svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.fk-sticky:hover { filter: brightness(1.1); }
.fk-sticky:active { transform: scale(.97); }
@keyframes fk-sticky-pulse { 0%,100% { box-shadow: 0 10px 30px rgba(88,101,242,.6), 0 0 0 0 rgba(88,101,242,.55); }
                             50% { box-shadow: 0 14px 38px rgba(88,101,242,.85), 0 0 0 10px rgba(88,101,242,0); } }
body.fk-has-sticky .fk-skip { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .fk-sticky { bottom: 44px; font-size: 20px; padding: 20px 26px; } }
@media (prefers-reduced-motion: reduce) { .fk-sticky.in { animation: none; } }