/* Menu d'accueil (section #menu.home) : vidéo de fond + sprites de boutons à deux états (assets/menu/*-n|-s.webp).
   Mise en page en « unités de conception » : 1 u = 1 px sur un écran de 390×693 (le gabarit 9/16 de la maquette). Le conteneur
   (`container-type: size`) donne la plus petite des deux échelles ; une hauteur en plus ne fait que dégager la scène entre le logo
   et les boutons. Le hall multijoueur garde les styles `.menu` de screens.css. */
.home {
  --u: min(0.25641cqw, 0.1443cqh);
  position: absolute;
  inset: 0;
  z-index: 20; /* au-dessus du HUD et du dock (l'écran de chargement #splash est au-dessus de tout, z-index 1000) */
  container-type: size;
  overflow: hidden;
  background: #4f8fd2;
  font-family: "Trajan Pro", "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
.home[hidden] { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- fond : image fixe tout de suite, la vidéo se fond par-dessus quand elle joue ---- */
.home-bg {
  position: absolute;
  inset: 0;
  background: #4f8fd2 url("../assets/menu/menu-back.webp") center / cover no-repeat;
}
.home-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease-out; }
.home-bg video.ready { opacity: 1; }
.home-bg::after { /* lisibilité du HUD en haut et des boutons en bas */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 18, 40, 0.42), rgba(6, 18, 40, 0) 22%, rgba(6, 18, 40, 0) 50%, rgba(6, 14, 30, 0.34) 74%, rgba(5, 10, 24, 0.66) 100%);
}

.home-ui {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + var(--u) * 8) calc(var(--u) * 8) 0;
}

/* ---- en-tête : profil, pièces, son, compte ---- */
.home-top { position: relative; display: flex; align-items: flex-start; width: 100%; }
.home-top img { display: block; width: 100%; height: auto; pointer-events: none; }
.home-profile { position: relative; flex: none; width: calc(var(--u) * 160); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4)); }
.home-profile { cursor: pointer; touch-action: manipulation; }
.home-profile:focus-visible { outline: 2px solid #ffd25e; outline-offset: 3px; border-radius: calc(var(--u) * 12); }
.home-profile:active { transform: scale(0.98); }
.home-profile p { z-index: 2; position: absolute; left: 38%; right: 3%; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.home-name { top: 17%; font-size: calc(var(--u) * 13); font-weight: 800; color: #fff; }
.home-name.long { font-size: calc(var(--u) * 11.5); letter-spacing: -0.01em; }
.home-title { top: 49%; left: 39%; display: flex; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 10.5); font-weight: 700; color: #f3d98a; }
.home-title span { overflow: hidden; text-overflow: ellipsis; }
.crown { flex: none; width: calc(var(--u) * 11); height: calc(var(--u) * 11); color: #ffc93d; }

.home-coins, .home-icon, .sprite-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.home-coins { position: absolute; left: calc(var(--u) * 50); top: calc(var(--u) * 55); z-index: 2; flex: none; width: calc(var(--u) * 90); margin: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4)); }
.home-coins span {
  position: absolute; left: 28%; right: 25%; top: 0; bottom: 0; display: grid; place-items: center;
  font-size: calc(var(--u) * 12); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000;
}
#btnSettings { margin-left: auto; } /* la jauge de pièces est posée sous le portrait (hors flux) : les boutons restent à droite */
.home-icon { flex: none; width: calc(var(--u) * 29); margin: calc(var(--u) * 11) 0 0 calc(var(--u) * 3); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4)); }
.home-icon[aria-pressed="true"] img { filter: grayscale(1) brightness(0.7); } /* son coupé */
.home-coins:active, .home-icon:active { transform: scale(0.95); }
/* bouton Amis : pastille rouge (messages non lus + demandes reçues), posée sur le coin du cadre */
.home-friends { position: relative; }
.home-badge {
  position: absolute; right: -10%; top: -10%; min-width: calc(var(--u) * 15); height: calc(var(--u) * 15); padding: 0 calc(var(--u) * 3);
  display: grid; place-items: center; border-radius: 999px; border: calc(var(--u) * 1.5) solid #ffe08a;
  background: radial-gradient(circle at 35% 30%, #ff6b5b, #c41d12); color: #fff; font-size: calc(var(--u) * 9); font-weight: 900; line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); animation: badge-pop 0.3s ease-out;
}
.home-badge[hidden] { display: none; }
@keyframes badge-pop { from { transform: scale(0.4); } }
.home-coins:focus-visible, .home-icon:focus-visible { outline: 2px solid #ffd25e; outline-offset: 3px; border-radius: 10px; }

/* avatar du joueur : recouvre le portrait du sprite (cercle à gauche de la carte) ; l'atlas d'avatars vient de css/hud.css (.avatar-img) */
.home-avatar { position: absolute; z-index: 0; left: 1.3%; top: 4.5%; width: 29.4%; aspect-ratio: 1; pointer-events: none; }
.home-profile-bar { position: relative; z-index: 1; }

/* ---- logo animé : flottement, éclat qui le traverse, gemmes qui pulsent et scintillent ---- */
.home-logo { position: relative; flex: none; width: calc(var(--u) * 238); margin: calc(var(--u) * 6) 0 0; animation: logo-float 5s ease-in-out infinite; }
.home-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.logo-shine { /* bande de lumière découpée dans la silhouette du logo (masque = le sprite) */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat;
  -webkit-mask: url("../assets/menu/logo.webp") center / 100% 100% no-repeat;
  mask: url("../assets/menu/logo.webp") center / 100% 100% no-repeat;
  mix-blend-mode: plus-lighter;
  animation: logo-shine 5.5s 1.2s ease-in-out infinite;
}
.gem { /* halo bleu + étoile à 4 branches sur chaque gemme du logo */
  position: absolute; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; pointer-events: none;
  background: radial-gradient(circle, rgba(170, 235, 255, 0.95) 0 8%, rgba(70, 170, 255, 0.55) 22%, transparent 62%);
  mix-blend-mode: screen; opacity: 0; animation: gem-pulse 2.8s ease-in-out infinite;
}
.gem::after {
  content: ""; position: absolute; inset: 14%; background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: gem-twinkle 2.8s ease-in-out infinite; animation-delay: inherit;
}
@keyframes logo-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(calc(var(--u) * -4)) scale(1.015); } }
@keyframes logo-shine { 0% { background-position: 160% 0; } 35%, 100% { background-position: -60% 0; } }
@keyframes gem-pulse { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes gem-twinkle { 0%, 100% { transform: scale(0) rotate(0); } 50% { transform: scale(1) rotate(45deg); } }

/* sprite de chaque bouton (sert au halo et à l'éclat) — résolu depuis CE fichier, donc `../assets/` */
.home-battle { --sprite: url("../assets/menu/battle.webp"); }
.home-mode { --sprite: url("../assets/menu/ai.webp"); }
.nav-shop { --sprite: url("../assets/menu/shop.webp"); }
.nav-decor { --sprite: url("../assets/menu/nav-decor.webp"); }
.nav-home { --sprite: url("../assets/menu/nav-home.webp"); }
.nav-profile { --sprite: url("../assets/menu/nav-profile.webp"); }

/* ---- boutons-sprites : UN seul sprite (normal). Sélectionné = effets CSS : halo doré (copie floue du sprite), éclat qui le
   traverse, léger agrandissement. Au toucher, au survol et au focus clavier. ---- */
.sprite-btn { position: relative; display: block; flex: none; isolation: isolate; transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.14s; -webkit-user-drag: none; }
.sprite-btn img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.sprite-btn::before { /* halo : copie floue et saturée du sprite, derrière lui */
  content: ""; position: absolute; inset: -5%; z-index: -1; pointer-events: none;
  background: var(--sprite) center / 100% 100% no-repeat; filter: sepia(1) saturate(4) brightness(1.5) blur(calc(var(--u) * 6));
  opacity: 0; transition: opacity 0.18s;
}
.sprite-btn::after { /* éclat : bande claire découpée dans la silhouette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat;
  -webkit-mask: var(--sprite) center / 100% 100% no-repeat; mask: var(--sprite) center / 100% 100% no-repeat;
  mix-blend-mode: plus-lighter; opacity: 0;
}
.sprite-btn:focus-visible, .sprite-btn:active, .sprite-btn[aria-current] { filter: brightness(1.12) saturate(1.15); }
.sprite-btn:focus-visible::before, .sprite-btn:active::before, .sprite-btn[aria-current]::before { opacity: 0.85; }
.sprite-btn:focus-visible::after, .sprite-btn:active::after { opacity: 1; animation: btn-shine 0.7s ease-out; }
@media (hover: hover) {
  .sprite-btn:hover { filter: brightness(1.12) saturate(1.15); transform: scale(1.035); }
  .sprite-btn:hover::before { opacity: 0.85; }
  .sprite-btn:hover::after { opacity: 1; animation: btn-shine 0.7s ease-out; }
}
.sprite-btn:focus-visible { outline: none; }
.sprite-btn:active { transform: scale(0.96); }
@keyframes btn-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }

.home-play { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.home-battle { width: calc(var(--u) * 273); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)); }
.home-mode { width: calc(var(--u) * 199); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
/* appel à l'action : le halo respire et l'éclat repasse de temps en temps */
.home-battle:not(:active):not(:hover):not(:focus-visible)::before { animation: home-breathe 2.8s ease-in-out infinite; }
.home-battle:not(:active):not(:hover):not(:focus-visible)::after { opacity: 1; animation: btn-shine 3.4s 1.5s ease-in-out infinite; }

.home-msg {
  min-height: 2.4em; margin: calc(var(--u) * 2) 0 0; max-width: calc(var(--u) * 330);
  font: 600 calc(var(--u) * 10.5) / 1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.7);
}
.home-msg.warn { color: #ffd25e; }

/* bouton « Installer l'app » : petite plaque de bois à bordure dorée, sous le bouton IA */
.home-install {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 14); margin: 0;
  border: calc(var(--u) * 3) solid #9a7a45; border-radius: calc(var(--u) * 12); cursor: pointer; touch-action: manipulation;
  background: linear-gradient(rgba(255, 220, 150, 0.12), rgba(0, 0, 0, 0.25)), url("../assets/menu/wood.webp") center / 160px;
  box-shadow: inset 0 1px 0 rgba(255, 224, 160, 0.4), 0 3px 8px rgba(0, 0, 0, 0.5);
  color: #fff4d6; font: 800 calc(var(--u) * 12) / 1 inherit; font-family: inherit; text-shadow: 0 1px 0 #2b1707, 0 0 3px #000;
  transition: transform 0.12s, filter 0.14s;
}
.home-install[hidden] { display: none; }
.home-install svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: #ffd25e; filter: drop-shadow(0 1px 1px #000); }
.home-install:active { transform: scale(0.96); }
@media (hover: hover) { .home-install:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 200, 70, 0.7)); } }
.home-install:focus-visible { outline: 2px solid #ffd25e; outline-offset: 2px; }

/* mini-guide d'installation (iOS / navigateurs sans invite native) */
.help-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px; background: rgba(4, 10, 24, 0.72); backdrop-filter: blur(3px); animation: fade-in 0.2s ease-out; }
.help-card {
  width: min(100%, 340px); padding: 18px 18px 16px; text-align: center; color: #f6ecd2; outline: none;
  border: 3px solid #9a7a45; border-radius: 18px; background: linear-gradient(rgba(10, 16, 30, 0.35), rgba(10, 16, 30, 0.55)), url("../assets/menu/stone.webp") center / 200px;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), 0 14px 40px rgba(0, 0, 0, 0.6);
}
.help-card h2 { margin: 0 0 4px; font-size: 22px; color: #ffd25e; text-shadow: 0 2px 0 #4a3000, 0 0 12px rgba(255, 190, 60, 0.5); }
.help-lead { margin: 0 0 12px; font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #cfc4a8; }
.help-card ol { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: step; text-align: left; }
.help-card li { counter-increment: step; position: relative; padding: 9px 10px 9px 44px; border-radius: 10px; font: 600 13.5px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(154, 122, 69, 0.55); }
.help-card li::before { content: counter(step); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 800 13px/1 inherit; font-family: Georgia, serif; color: #2b1707; background: radial-gradient(circle at 35% 30%, #ffe08a, #d79a2b); box-shadow: 0 1px 3px #000; }
.help-card li b { color: #ffd25e; }
.help-card li svg { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin: 0 1px; color: #7fd0ff; }
.help-ok { padding: 10px 28px; border: 3px solid #d9b25a; border-radius: 12px; cursor: pointer; font: 800 15px/1 Georgia, serif; color: #fff; text-shadow: 0 1px 0 #0d3a14, 0 0 3px #0d3a14; background: linear-gradient(#4cc46f, #1f8a3c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 8px rgba(0, 0, 0, 0.5); }
.help-ok:active { transform: scale(0.96); }

/* ---- barre de navigation : socle de pierre + 4 onglets-sprites (l'actif est surélevé) ---- */
.home-nav {
  position: relative;
  width: calc(100% + var(--u) * 16);
  margin: calc(var(--u) * 2) calc(var(--u) * -8) 0;
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 4 + var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.home-nav::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 30) 0 0 0;
  background: linear-gradient(#323b49, #171d28 70%, #10151e);
  border-top: 3px solid #9a7a45;
  box-shadow: inset 0 2px 0 rgba(255, 224, 160, 0.28), 0 -8px 16px rgba(0, 0, 0, 0.35);
}
.home-nav .sprite-btn { z-index: 1; }
.nav-tab { width: calc(var(--u) * 74); }
.nav-home { width: calc(var(--u) * 72); }
.nav-profile { width: calc(var(--u) * 76); }
.nav-shop { width: calc(var(--u) * 99); margin-bottom: calc(var(--u) * 2); }
.nav-tab[aria-current] { transform: translateY(calc(var(--u) * -6)) scale(1.08); transform-origin: 50% 100%; }
.nav-tab[aria-current]::before { animation: home-breathe 2.8s ease-in-out infinite; }
.nav-tab[aria-current]:active { transform: translateY(calc(var(--u) * -6)) scale(1.02); }
.nav-profile { filter: grayscale(0.15); } /* sprite « inactif » fabriqué, déjà assombri */

/* ---- entrée : jouée quand l'écran de chargement se lève (`.reveal`, posé par ui/MainMenu.js) ---- */
.home.reveal .home-logo { animation: home-drop 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.15) both, logo-float 5s 0.65s ease-in-out infinite; }
.home.reveal .home-top { animation: home-rise 0.45s ease-out both; }
.home.reveal .home-play { animation: home-rise 0.5s 0.12s ease-out both; }
.home.reveal .home-nav { animation: home-rise 0.5s 0.2s ease-out both; }
@keyframes home-drop { from { opacity: 0; transform: translateY(-14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes home-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes home-breathe { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* ---------------------------------------------------------------- décor animé (ui/MenuScene.js)
   `.scene` épouse l'image (941×1671) en mode « cover » : tout y est positionné en % de l'image, donc les effets restent alignés
   quel que soit le format d'écran. Que des `transform` / `opacity` (compositeur) ; arrêté onglet caché (`.paused`). */
.scene {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * 0.56314)); aspect-ratio: 941 / 1671;
  transform: translate(-50%, -50%);
}
.scene-in { position: absolute; inset: 0; transform-origin: 50% 58%; }
.fx-on .scene-in { animation: scene-breathe 26s ease-in-out infinite alternate; }
.scene img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.scene .bg, .scene .band { left: 0; top: 0; width: 100%; height: 100%; }
.layer { position: absolute; inset: 0; }
.layer.far { animation: float-far 8s ease-in-out infinite alternate; }
.layer.main { animation: float-main 6.5s ease-in-out infinite alternate; }
.layer.far .band { -webkit-mask-image: linear-gradient(transparent 3%, #000 9%, #000 28%, transparent 34%); mask-image: linear-gradient(transparent 3%, #000 9%, #000 28%, transparent 34%); }
.layer.main .band { -webkit-mask-image: linear-gradient(transparent 26%, #000 31%, #000 93%, transparent 98%); mask-image: linear-gradient(transparent 26%, #000 31%, #000 93%, transparent 98%); }
@keyframes scene-breathe { from { transform: scale(1); } to { transform: scale(1.045) translateY(-0.6%); } }
@keyframes float-far { from { transform: translateY(0.35%); } to { transform: translateY(-0.35%); } }
@keyframes float-main { from { transform: translateY(-0.3%); } to { transform: translateY(0.3%); } }

/* nuages : traversent la scène de gauche à droite (largeur en % de l'image, --to = distance en largeurs de nuage) */
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud { left: 0; transform: translateX(-100%); animation: cloud-drift linear infinite; will-change: transform; }
@keyframes cloud-drift { from { transform: translateX(-100%); } to { transform: translateX(var(--to)); } }

/* braseros : flamme qui vacille (mélange « screen » = lumière), halo, braises */
.flame, .halo, .ember, .portal-glow, .portal-swirl, .crystal-glow, .glint, .mote, .fall { position: absolute; display: block; pointer-events: none; }
.flame { width: 6.2%; aspect-ratio: 0.62; margin: 0; transform-origin: 50% 90%; mix-blend-mode: screen; border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%; animation: flicker var(--d, 0.7s) ease-in-out infinite var(--dl, 0s); }
.flame.fire { background: radial-gradient(ellipse at 50% 72%, #fff7c8 0 16%, #ffbd3a 36%, rgba(255, 96, 24, 0.65) 60%, transparent 76%); }
.flame.blue { background: radial-gradient(ellipse at 50% 72%, #f1fdff 0 16%, #7fdcff 36%, rgba(48, 128, 255, 0.65) 60%, transparent 76%); }
@keyframes flicker {
  0%, 100% { transform: translate(-50%, -78%) scale(1, 1) rotate(0deg); opacity: 0.48; }
  22% { transform: translate(-50%, -78%) scale(0.88, 1.14) rotate(-3deg); opacity: 0.62; }
  50% { transform: translate(-50%, -78%) scale(1.1, 0.9) rotate(1deg); opacity: 0.54; }
  74% { transform: translate(-50%, -78%) scale(0.94, 1.1) rotate(3deg); opacity: 0.62; }
}
.halo { width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; animation: halo-pulse 2.6s ease-in-out infinite var(--dl, 0s); }
.halo.fire { background: radial-gradient(circle, rgba(255, 150, 50, 0.5), rgba(255, 90, 20, 0.18) 45%, transparent 68%); }
.halo.blue { background: radial-gradient(circle, rgba(110, 200, 255, 0.5), rgba(50, 120, 255, 0.18) 45%, transparent 68%); }
@keyframes halo-pulse { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08); } }
.ember { width: 3px; height: 3px; border-radius: 50%; opacity: 0; animation: ember-rise var(--dur, 3s) ease-out infinite var(--dl, 0s); }
.ember.fire { background: #ffc860; box-shadow: 0 0 4px 1px rgba(255, 138, 42, 0.6); opacity: 0.7; }
.ember.blue { background: #bff0ff; box-shadow: 0 0 4px 1px rgba(79, 180, 255, 0.6); }
@keyframes ember-rise { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -62px) scale(0.3); } }

/* portail : halo qui bat + tourbillon (anneau conique qui tourne) */
.portal-glow { width: 15%; aspect-ratio: 0.72; transform: translate(-50%, -50%); mix-blend-mode: screen; border-radius: 50%; background: radial-gradient(ellipse, rgba(170, 240, 255, 0.5), rgba(60, 170, 255, 0.26) 42%, transparent 72%); animation: portal-pulse 2.4s ease-in-out infinite; }
.portal-swirl { width: 7.5%; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; border-radius: 50%; opacity: 0.42; /* rond : un ovale qui tourne se déforme */
  background: conic-gradient(from 0deg, transparent 0, rgba(255, 255, 255, 0.95) 12%, transparent 28%, rgba(150, 230, 255, 0.9) 50%, transparent 66%, rgba(255, 255, 255, 0.8) 84%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 40%, #000 60%, transparent 82%); mask: radial-gradient(circle, transparent 18%, #000 40%, #000 60%, transparent 82%);
  animation: swirl-spin 4.5s linear infinite; }
@keyframes portal-pulse { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 0.65; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes swirl-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* cristaux du portail */
.crystal-glow { width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; background: radial-gradient(circle, rgba(170, 235, 255, 0.9) 0 10%, rgba(70, 170, 255, 0.45) 30%, transparent 62%); animation: halo-pulse 2.2s ease-in-out infinite var(--dl, 0s); }
.glint { width: 6%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); background: #fff; mix-blend-mode: screen;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); animation: glint 2.8s ease-in-out infinite var(--dl, 0s); }
@keyframes glint { 0%, 70%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); } 85% { transform: translate(-50%, -50%) scale(1) rotate(45deg); } }

/* cascades : traînées claires qui descendent */
.fall { width: var(--w, 2%); height: var(--h, 6%); overflow: hidden; opacity: 0.6; mix-blend-mode: screen;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, 0.75) 20px, rgba(255, 255, 255, 0) 28px) 0 0 / 100% 42px;
  animation: fall-flow 1.1s linear infinite var(--dl, 0s); }
@keyframes fall-flow { from { background-position: 0 0; } to { background-position: 0 42px; } }

/* particules : pollen / étincelles qui montent en ondulant */
.mote { width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: radial-gradient(circle, #fffbe0, rgba(255, 240, 160, 0.4) 55%, transparent 70%); opacity: 0; animation: mote-rise var(--dur, 12s) ease-in-out infinite var(--dl, 0s); }
@keyframes mote-rise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 0.9; } 50% { transform: translate(var(--dx, 0), -90px); } 85% { opacity: 0.8; } 100% { opacity: 0; transform: translate(calc(var(--dx, 0) * -0.6), -190px); } }

/* rayons de lumière (venus du haut à gauche) */
.rays { position: absolute; left: -25%; top: -12%; width: 150%; height: 75%; pointer-events: none; mix-blend-mode: screen; opacity: 0.8;
  background: conic-gradient(from 150deg at 18% -8%, transparent 0 3%, rgba(255, 250, 215, 0.28) 5.5%, transparent 9%, transparent 12%, rgba(255, 250, 215, 0.2) 14.5%, transparent 18%, transparent 22%, rgba(255, 250, 215, 0.16) 25%, transparent 30%, transparent 100%);
  -webkit-mask: linear-gradient(#000 20%, transparent 90%); mask: linear-gradient(#000 20%, transparent 90%);
  transform-origin: 18% 0; animation: rays-sway 11s ease-in-out infinite alternate; }
@keyframes rays-sway { from { transform: rotate(-2.5deg); opacity: 0.55; } to { transform: rotate(3deg); opacity: 0.95; } }

/* oiseaux : traversent le ciel en battant des ailes (--span = distance en largeurs d'oiseau) */
.birds { position: absolute; inset: 0; pointer-events: none; }
.bird { position: absolute; left: 0; width: var(--w, 3%); color: #20395f; opacity: 0.75; animation: bird-fly var(--dur, 30s) linear infinite; }
.bird svg { display: block; width: 100%; height: auto; animation: bird-flap var(--flap, 0.5s) ease-in-out infinite alternate; transform-origin: 50% 80%; }
@keyframes bird-fly { 0% { transform: translate(-120%, 0); } 50% { transform: translate(800%, 25%); } 100% { transform: translate(1800%, -10%); } }
@keyframes bird-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }

.home.paused *, .home.paused *::before, .home.paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .home, .home-logo, .home-top, .home-play, .home-nav, .logo-shine, .gem, .gem::after, .sprite-btn::before, .sprite-btn::after { animation: none !important; }
  .gem { opacity: 0.5; }
  .gem::after { transform: scale(0.6); }
  .home-bg video { transition: none; }
}