/* fonctions/intro/intro.css — animation d'ouverture
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
/* ================= INTRO « CARTES AIMANTÉES — SIGNATURE COLORKANVA » =================
   Variante plus proche du prototype 23 : impact très rapide, cartes aimantées puis
   apparition quasi immédiate du nom ColorKanva en dégradé. L'intro reste volontairement
   courte (~2,9 s, fondu compris) afin de donner une signature au lancement sans ralentir l'accès au tableau.
   Elle se joue JUSTE APRÈS la connexion (porte #authGate) ; sans porte (module Supabase retiré ou
   désactivé), elle se joue au lancement. Pilotage : ckIntroCtl (section INIT). */
.ck-intro{
 position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;pointer-events:auto;
 background:
   radial-gradient(circle at 50% 44%,rgb(40,48,76) 0,rgb(18,20,30) 38%,#090a0f 78%,#06070b 100%);
 /* Sortie pilotée par le script (voir « finishIntro ») : le fondu ne démarre qu'une fois
    le tableau construit ET peint, puis tourne sur le compositeur (opacité seule).
    L'animation CSS ci-dessous n'est qu'un filet de sécurité si le script plantait :
    le script l'annule dès qu'il prend la main. */
 opacity:1;
 animation:ckIntroOut .9s cubic-bezier(.4,0,.2,1) 5s forwards;
 will-change:opacity;
 contain:strict;
 isolation:isolate;
 --k:1;
}
.ck-intro.is-leaving{pointer-events:none;}
/* Intro terminée : calque retiré de l'affichage mais gardé dans le DOM, pour pouvoir être rejouée à la
   connexion suivante (déconnexion puis nouvelle connexion dans le même onglet). */
.ck-intro.is-done{display:none;}
.ck-intro-stage{will-change:transform;position:relative;width:0;height:0;z-index:2;}
/* Halos très discrets : ils reprennent les couleurs de ColorKanva sans transformer
   l'écran en arc-en-ciel. */
.ck-intro::before{
 content:"";position:absolute;inset:-22%;pointer-events:none;opacity:.34;filter:blur(64px);
 background:
   radial-gradient(circle at 27% 36%,#ff356d 0 4%,transparent 20%),
   radial-gradient(circle at 72% 33%,#715cff 0 5%,transparent 22%),
   radial-gradient(circle at 63% 72%,#29d4d0 0 5%,transparent 21%),
   radial-gradient(circle at 36% 72%,#ffd63d 0 4%,transparent 19%);
 animation:ckIntroAura 1.1s cubic-bezier(.2,.8,.2,1) both;
}
/* La transition finale est volontairement sobre : aucun trait ni découpe,
   seulement un fondu propre pour ne pas concurrencer le logo multicolore. */
.ck-intro::after{content:none;}
.ck-intro-card{
 position:absolute;left:-65px;top:-39px;width:130px;height:78px;border-radius:15px;
 background:linear-gradient(160deg,rgba(35,40,55,.96),rgba(17,21,34,.97));
 border:1px solid rgba(255,255,255,.18);
 box-shadow:0 18px 50px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.07) inset;
 opacity:0;will-change:transform,opacity;
 animation:ckIntroCard .85s cubic-bezier(.15,1.2,.3,1) forwards;
 animation-delay:calc(var(--n) * 60ms);
}
.ck-intro-card::before{
 content:"";position:absolute;left:10px;right:10px;top:10px;height:5px;border-radius:5px;
 background:var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 58%,transparent);
}
.ck-intro-card::after{
 content:"";position:absolute;left:10px;top:28px;width:65%;height:6px;border-radius:5px;
 background:rgba(255,255,255,.15);box-shadow:0 13px 0 rgba(255,255,255,.075),0 26px 0 rgba(255,255,255,.045);
}
/* Le nom est le point d'impact de l'animation 23 : il apparaît pendant que les cartes
   terminent encore leur aimantation, comme dans le prototype de test. */
.ck-intro-logo{
 position:absolute;left:0;top:0;z-index:8;white-space:nowrap;
 transform:translate(-50%,-50%);
 font:900 82px/1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 letter-spacing:-.065em;
 background:linear-gradient(90deg,#ff356d 0%,#ff8f36 15%,#ffd63d 29%,#3cde8f 44%,#29d4d0 59%,#31adff 73%,#725cff 87%,#d64fff 100%);
 background-size:135% 100%;background-position:50% 50%;
 -webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 8px 24px rgba(0,0,0,.48));
 opacity:0;
 animation:ckIntroLogo .5s cubic-bezier(.2,.9,.2,1) .5s forwards;
}
.ck-intro-logo::after{
 content:"";position:absolute;left:3%;right:1%;bottom:-13px;height:1px;border-radius:50%;
 background:linear-gradient(90deg,transparent,#ff356d,#ffd63d,#29d4d0,#31adff,#725cff,transparent);
 opacity:0;transform:scaleX(.25);filter:blur(.2px);
 animation:ckIntroAccent .5s cubic-bezier(.2,.9,.2,1) .72s forwards;
}
@keyframes ckIntroCard{
 from{opacity:0;transform:translate(calc(var(--x) * var(--k)),calc(var(--y) * var(--k))) rotate(var(--r)) scale(.4);}
 to{opacity:.92;transform:translate(calc(var(--tx) * var(--k)),calc(var(--ty) * var(--k))) rotate(var(--rr));}
}
@keyframes ckIntroLogo{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.82);filter:blur(8px) drop-shadow(0 8px 24px rgba(0,0,0,.48));}
 72%{opacity:1;transform:translate(-50%,-50%) scale(1.035);filter:blur(0) drop-shadow(0 8px 24px rgba(0,0,0,.48));}
 100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0) drop-shadow(0 8px 24px rgba(0,0,0,.48));}
}
@keyframes ckIntroAccent{to{opacity:.72;transform:scaleX(1);}}
@keyframes ckIntroAura{from{opacity:0;transform:scale(.78)}to{opacity:.34;transform:scale(1)}}

/* Fondu de secours (utilisé seulement si le script ne prend pas la main) : deux images
   clés seulement, pour une courbe d'opacité continue, sans cassure de vitesse. */
@keyframes ckIntroOut{
 from{opacity:1;visibility:visible;}
 to{opacity:0;visibility:hidden;}
}
@media (max-width:900px){.ck-intro{--k:.72}.ck-intro-logo{font-size:66px;}}
@media (max-width:600px){.ck-intro{--k:.46}.ck-intro-logo{font-size:46px;}}
@media (prefers-reduced-motion:reduce){.ck-intro{display:none;}}