/* ==========================================================================
   YUL FX · couche "spectacle" pour YUL FC Digital Stadium
   Additive : ne modifie aucune règle existante, ne fait qu'ajouter.
   Désactivable en retirant les 2 balises dans index.html.
   ========================================================================== */

:root{
  --fx-gold:#F0B429;
  --fx-blue:#2F6BFF;
  --fx-dock-h:64px;
}

/* ---------- 1. Barre de progression de lecture ---------- */
.fx-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:501; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--fx-blue), var(--fx-gold) 60%, #FCE7A6);
  box-shadow:0 0 12px rgba(240,180,41,.7);
}

/* ---------- 2. Hero : projecteurs + particules + parallax ---------- */
.hero{ isolation:isolate; }
.fx-hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;
  mix-blend-mode:screen;
}
.hero .hero-content{ position:relative; z-index:3; }
.hero .hero-photo-img{
  will-change:transform;
  transform:translate3d(var(--fx-px,0px), calc(var(--fx-py,0px) + var(--fx-sy,0px)), 0) scale(var(--fx-sc,1.08));
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.hero .hero-content{
  transform:translate3d(0, var(--fx-cy,0px), 0);
  opacity:var(--fx-co,1);
}

/* Motto : lettres qui montent une à une */
.fx-split .fx-ch{
  display:inline-block; opacity:0; transform:translateY(.55em) rotateX(-80deg);
  transform-origin:50% 100%;
  animation:fxCharIn .7s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay:calc(var(--i) * 35ms + var(--d, 0ms));
}
.fx-split .fx-sp{ display:inline-block; width:.28em; }
@keyframes fxCharIn{ to{ opacity:1; transform:none; } }

/* Lueur dorée qui parcourt "ON GAGNE." lettre par lettre */
.hero-motto .g .fx-ch{
  animation:fxCharIn .7s cubic-bezier(.2,.9,.2,1) forwards, fxGlow 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 35ms + var(--d, 0ms)), calc(2.2s + var(--i) * 70ms);
}
@keyframes fxGlow{
  0%,18%,100%{ text-shadow:none; color:var(--fx-gold); }
  8%{ text-shadow:0 0 18px rgba(252,231,166,.95), 0 0 42px rgba(240,180,41,.6); color:#FFF6D6; }
}

/* ---------- 3. Bandeau défilant (vitesse liée au scroll) ---------- */
.fx-marquee{
  position:relative; overflow:hidden; white-space:nowrap; z-index:2;
  border-top:1px solid rgba(240,180,41,.25); border-bottom:1px solid rgba(240,180,41,.25);
  background:linear-gradient(90deg, #070D1C, #0C1730 50%, #070D1C);
  padding:1rem 0; transform:rotate(-1.2deg) scale(1.02); margin:-.4rem 0;
}
.fx-marquee-track{ display:inline-flex; will-change:transform; }
.fx-marquee span{
  font-family:var(--ff-display, 'Anton', sans-serif); font-size:clamp(1.3rem, 3.6vw, 2.3rem);
  letter-spacing:.04em; color:var(--ink); align-self:center;
}
.fx-marquee span.num{ color:var(--fx-gold); padding:0 .55rem 0 1.4rem; }
.fx-marquee span.nm{ padding-right:1.4rem; }
.fx-marquee span.lead{ color:transparent; -webkit-text-stroke:1px var(--fx-gold); padding:0 1.4rem; }
.fx-marquee span.star{ color:var(--fx-gold); font-size:clamp(.8rem,2vw,1.1rem); opacity:.7; }

/* ---------- 4. Titres de section : révélation par balayage ---------- */
.fx-title{
  clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.7,0,.2,1);
  position:relative;
}
.fx-title.fx-in{ clip-path:inset(0 0 0 0); }
.fx-title::after{
  content:''; position:absolute; left:0; bottom:-.35rem; height:3px; width:0;
  background:linear-gradient(90deg, var(--fx-gold), transparent);
  transition:width 1.1s cubic-bezier(.7,0,.2,1) .35s;
}
.fx-title.fx-in::after{ width:min(180px, 60%); }

/* ---------- 5. Cartes joueurs : tilt 3D + reflet holographique ---------- */
.player-card{ transform-style:preserve-3d; }
.player-card.fx-tilting{
  transition:transform .08s linear, border-color .35s ease, box-shadow .35s ease !important;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px) scale(1.03) !important;
  box-shadow:calc(var(--ry,0deg) * -1.2px) 30px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(240,180,41,.35) !important;
}
.fx-glare{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; opacity:0;
  transition:opacity .3s ease;
  background:
    radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.28), transparent 45%),
    linear-gradient(115deg, transparent 20%, rgba(47,107,255,.18) 38%, rgba(240,180,41,.22) 50%, rgba(61,220,132,.12) 62%, transparent 80%);
  background-size:100% 100%, 250% 250%;
  background-position:0 0, var(--hx,50%) var(--hy,50%);
  mix-blend-mode:overlay;
}
.player-card.fx-tilting .fx-glare{ opacity:1; }
.player-card .player-num{ transform:translateZ(40px); }

/* Pression tactile */
.fx-press{ transition:transform .15s ease !important; transform:scale(.97) !important; }

/* ---------- 6. Projecteur sous le pointeur (cartes) ---------- */
.fx-spot{ position:relative; }
.fx-spot-glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(240,180,41,.12), transparent 60%);
  transition:opacity .3s ease;
}
.fx-spot:hover > .fx-spot-glow{ opacity:1; }

/* ---------- 7. Chiffres du compte à rebours : effet "flip" ---------- */
.fx-tick{ animation:fxTick .45s cubic-bezier(.2,.9,.2,1); display:inline-block; }
@keyframes fxTick{
  0%{ transform:perspective(200px) rotateX(90deg); opacity:.2; color:#FFF6D6; }
  60%{ transform:perspective(200px) rotateX(-12deg); opacity:1; }
  100%{ transform:none; }
}

/* ---------- 8. Confettis & célébration ---------- */
.fx-confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9600; }
.fx-flash{
  position:fixed; inset:0; z-index:9590; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(240,180,41,.35), transparent 60%);
  animation:fxFlash .9s ease-out forwards;
}
@keyframes fxFlash{ from{ opacity:1; } to{ opacity:0; } }
.fx-goal-word{
  position:fixed; left:50%; top:42%; z-index:9601; pointer-events:none;
  font-family:var(--ff-display,'Anton',sans-serif); font-size:clamp(5.5rem, 24vw, 13rem); line-height:1;
  color:var(--fx-gold); white-space:nowrap; text-shadow:0 0 40px rgba(240,180,41,.6), 0 10px 0 #0C1730;
  transform:translate(-50%,-50%) scale(.2); opacity:0;
  animation:fxGoal 1.8s cubic-bezier(.2,1.4,.3,1) forwards;
}
@keyframes fxGoal{
  0%{ transform:translate(-50%,-50%) scale(.2) rotate(-8deg); opacity:0; }
  25%{ transform:translate(-50%,-50%) scale(1.08) rotate(-3deg); opacity:1; }
  75%{ transform:translate(-50%,-50%) scale(1) rotate(-3deg); opacity:1; }
  100%{ transform:translate(-50%,-60%) scale(1.3) rotate(-3deg); opacity:0; }
}
.fx-shake{ animation:fxShake .5s ease; }
@keyframes fxShake{
  0%,100%{ transform:none; } 20%{ transform:translate(-4px,2px); } 40%{ transform:translate(4px,-2px); }
  60%{ transform:translate(-3px,-1px); } 80%{ transform:translate(2px,1px); }
}

/* ---------- 9. Dock mobile façon app ---------- */
.fx-dock{ display:none; }
@media (max-width:900px){
  .fx-dock{
    display:flex; position:fixed; left:.7rem; right:.7rem;
    bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
    height:var(--fx-dock-h); z-index:390; border-radius:20px;
    background:rgba(7,13,28,.78); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(240,180,41,.22);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
    transition:transform .4s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
  }
  .fx-dock.fx-hidden{ transform:translateY(calc(100% + 1.4rem)); opacity:0; }
  .fx-dock a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-family:var(--ff-mono,'JetBrains Mono',monospace); font-size:.56rem; letter-spacing:.12em;
    color:#8B96B8; position:relative; -webkit-tap-highlight-color:transparent;
  }
  .fx-dock a svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .3s cubic-bezier(.2,1.5,.3,1); }
  .fx-dock a.on{ color:var(--fx-gold); }
  .fx-dock a.on svg{ transform:translateY(-2px) scale(1.12); }
  .fx-dock-pill{
    position:absolute; top:7px; bottom:7px; left:0; border-radius:14px; z-index:-1;
    background:rgba(240,180,41,.12); border:1px solid rgba(240,180,41,.25);
    transition:transform .45s cubic-bezier(.2,1.1,.3,1), width .45s ease;
  }
  body.fx-has-dock{ padding-bottom:calc(var(--fx-dock-h) + 1.4rem + env(safe-area-inset-bottom, 0px)); }

  /* Effectif : 2 colonnes compactes au lieu d'une carte géante par écran */
  .players-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:.8rem !important; }
  .players-grid .player-photo{ aspect-ratio:4/4.4; }
  .players-grid .player-num{ font-size:3.2rem; }
  .players-grid .player-name{ font-size:.92rem; }
}

/* ---------- 10. Boutons magnétiques ---------- */
.fx-mag{ transition:transform .3s cubic-bezier(.2,.9,.2,1) !important; }

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-hero-canvas, .fx-confetti, .fx-goal-word, .fx-flash{ display:none !important; }
  .fx-title{ clip-path:none !important; }
  .fx-split .fx-ch{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero .hero-photo-img, .hero .hero-content{ transform:none !important; }
}