/* ============================================================
   MELOTURF — INTRO D'OUVERTURE (« mini vidéo » en CSS)
   Séquence ≈ 2,8 s jouée au premier chargement de la session :
     0,0 s  fond vert profond + halo qui respire + lignes de vitesse
     0,2 s  anneau IA qui se trace autour du blason
     0,4 s  blason licorne : net, échelle, lueur lime
     0,9 s  mot-marque MELO (blanc) · TURF (lime), lettres en cascade
     1,5 s  signature + barre de progression lime
     2,4 s  zoom léger + fondu → l'app est déjà rendue derrière
   Peint dès le premier octet (feuille chargée en tête) : couvre le
   chargement des polices/scripts. Un tap saute l'intro. Reduced-motion :
   intro.js ne l'affiche pas.
   ============================================================ */
#mt-intro {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(80% 60% at 50% 38%, rgba(30, 92, 58, .55) 0, transparent 62%),
    linear-gradient(180deg, #071412 0%, #04100c 55%, #020806 100%);
  color: #fff; overflow: hidden; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Sora", "Space Grotesk", "Inter", system-ui, sans-serif;
  will-change: opacity, transform;
  animation: mt-intro-exit .55s cubic-bezier(.4, 0, .2, 1) 2.45s both;
}
#mt-intro[hidden] { display: none; }
#mt-intro.is-skipping { animation: mt-intro-exit .32s ease both; }

/* Halo qui respire derrière le blason */
#mt-intro .mt-intro-halo {
  position: absolute; left: 50%; top: 42%; width: 70vmin; height: 70vmin; max-width: 460px; max-height: 460px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 217, 172, .22) 0, rgba(22, 217, 172, .06) 38%, transparent 68%);
  filter: blur(6px);
  animation: mt-intro-halo 2.6s ease-in-out both;
}

/* Lignes de vitesse (clin d'œil hippique) : traînées lime qui filent de droite à gauche */
#mt-intro .mt-intro-streak {
  position: absolute; left: -40%; width: 38%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 217, 172, .55), transparent);
  opacity: 0;
  animation: mt-intro-streak 1.1s cubic-bezier(.2, .7, .3, 1) both;
}
#mt-intro .mt-intro-streak:nth-child(1) { top: 22%; animation-delay: .15s; }
#mt-intro .mt-intro-streak:nth-child(2) { top: 31%; animation-delay: .35s; width: 28%; }
#mt-intro .mt-intro-streak:nth-child(3) { top: 66%; animation-delay: .25s; }
#mt-intro .mt-intro-streak:nth-child(4) { top: 75%; animation-delay: .5s; width: 24%; }

#mt-intro .mt-intro-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 24px; padding-top: calc(24px + env(safe-area-inset-top, 0px));
}

/* Blason + anneau qui se trace */
#mt-intro .mt-intro-mark { position: relative; width: 40vmin; height: 40vmin; max-width: 230px; max-height: 230px; }
#mt-intro .mt-intro-ring { position: absolute; inset: -12%; width: 124%; height: 124%; transform: rotate(-90deg); }
#mt-intro .mt-intro-ring circle {
  fill: none; stroke: #37F2C5; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 302; stroke-dashoffset: 302; opacity: .85;
  animation: mt-intro-ring 1.1s cubic-bezier(.65, 0, .25, 1) .2s both, mt-intro-ring-fade .5s ease 1.9s both;
}
#mt-intro .mt-intro-ring circle.mt-intro-ring-2 {
  stroke: #FFD54A; stroke-width: 1; stroke-dasharray: 60 242; opacity: .6;
  animation: mt-intro-ring-spin 1.6s cubic-bezier(.3, .6, .2, 1) .35s both, mt-intro-ring-fade .5s ease 1.9s both;
}
/* WebKit (iOS) : ne JAMAIS animer `filter` sur l'image — WKWebView rastérise
   alors le PNG transparent en rectangle opaque. L'ombre est statique ; seuls
   opacity/transform bougent. Le « flou → net » est rendu par le halo. */
#mt-intro .mt-intro-logo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(22, 217, 172, .45)) drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  animation: mt-intro-logo 1s cubic-bezier(.2, .9, .3, 1.15) .4s both;
}

/* Mot-marque : MELO blanc, TURF lime, lettre par lettre */
#mt-intro .mt-intro-word {
  display: flex; font-weight: 800; font-size: clamp(38px, 11vmin, 64px); line-height: 1;
  letter-spacing: -.02em; margin-top: 6px;
}
#mt-intro .mt-intro-word span {
  display: inline-block; opacity: 0; transform: translateY(.45em);
  animation: mt-intro-letter .55s cubic-bezier(.2, .9, .3, 1.1) both;
}
#mt-intro .mt-intro-word .is-lime { color: #37F2C5; text-shadow: 0 0 24px rgba(22, 217, 172, .5); }
#mt-intro .mt-intro-word span:nth-child(1) { animation-delay: .9s; }
#mt-intro .mt-intro-word span:nth-child(2) { animation-delay: .96s; }
#mt-intro .mt-intro-word span:nth-child(3) { animation-delay: 1.02s; }
#mt-intro .mt-intro-word span:nth-child(4) { animation-delay: 1.08s; }
#mt-intro .mt-intro-word span:nth-child(5) { animation-delay: 1.18s; }
#mt-intro .mt-intro-word span:nth-child(6) { animation-delay: 1.24s; }
#mt-intro .mt-intro-word span:nth-child(7) { animation-delay: 1.30s; }
#mt-intro .mt-intro-word span:nth-child(8) { animation-delay: 1.36s; }

#mt-intro .mt-intro-tagline {
  margin: 0; font-size: clamp(12px, 3.4vmin, 15px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #A5B4B7; text-align: center;
  animation: mt-intro-fade .6s ease 1.5s both;
}
#mt-intro .mt-intro-tagline b { color: #37F2C5; font-weight: 700; }

/* Barre de progression lime */
#mt-intro .mt-intro-bar {
  width: min(58vw, 240px); height: 2px; border-radius: 2px; overflow: hidden; margin-top: 14px;
  background: rgba(22, 217, 172, .14);
  animation: mt-intro-fade .4s ease 1.3s both;
}
#mt-intro .mt-intro-bar i {
  display: block; height: 100%; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, #16D9AC, #37F2C5);
  box-shadow: 0 0 12px rgba(22, 217, 172, .6);
  animation: mt-intro-bar 1.1s cubic-bezier(.4, 0, .2, 1) 1.35s both;
}

#mt-intro .mt-intro-skip {
  position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
  animation: mt-intro-fade .6s ease 1.6s both;
}

@keyframes mt-intro-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.06); }
}
@keyframes mt-intro-halo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  45%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .75; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes mt-intro-streak {
  0%   { left: 110%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: -40%; opacity: 0; }
}
@keyframes mt-intro-ring { to { stroke-dashoffset: 0; } }
@keyframes mt-intro-ring-spin {
  from { stroke-dashoffset: 302; transform: rotate(0); }
  to   { stroke-dashoffset: 0; }
}
@keyframes mt-intro-ring-fade { to { opacity: 0; } }
@keyframes mt-intro-logo {
  0%   { opacity: 0; transform: scale(.55); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mt-intro-letter { to { opacity: 1; transform: translateY(0); } }
@keyframes mt-intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-intro-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pendant l'intro, le fond de l'app ne scrolle pas (évite un saut au fondu). */
html.mt-intro-playing, html.mt-intro-playing body { overflow: hidden; }

/* ---------- Vidéo d'ouverture (media/intro.mp4) ----------
   Ajoutée par intro.js quand la connexion le permet. Dès qu'elle peut jouer,
   elle remplace la séquence animée ci-dessus ; sinon la séquence reste. */
#mt-intro .mt-intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #03110d; opacity: 0;
  transition: opacity .35s ease;
}
@media (orientation: portrait) { #mt-intro .mt-intro-video { object-fit: contain; } }
/* Pas de lissage parasite : la vidéo est affichée à sa définition native ou réduite, jamais floutée. */
#mt-intro .mt-intro-video { image-rendering: auto; backface-visibility: hidden; transform: translateZ(0); }
#mt-intro.has-video { animation: none; background: #03110d; }
#mt-intro.has-video.is-live .mt-intro-video { opacity: 1; }
#mt-intro.has-video .mt-intro-halo,
#mt-intro.has-video .mt-intro-streak,
#mt-intro.has-video .mt-intro-stage { display: none; }
#mt-intro.has-video .mt-intro-skip { z-index: 2; }
#mt-intro.has-video.is-skipping { animation: mt-intro-exit .32s ease both; }