/* ASPR, site réel : animations d'embellissement.
   Toutes désactivées si la personne a demandé « Réduire les animations » sur son appareil. */
@media (prefers-reduced-motion:no-preference){

/* 1. Ouverture : blason, anneau doré et bande tricolore (une fois par visite) */
.aspr-intro{position:fixed; inset:0; z-index:3000; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%, #10301F 0, #06100A 70%); transition:opacity .55s ease, visibility .55s; cursor:pointer}
.aspr-intro.fin{opacity:0; visibility:hidden}
.aspr-intro .c{position:relative; display:grid; place-items:center; gap:22px}
.aspr-intro img{width:min(34vw,150px); opacity:0; transform:scale(.6) translateY(14px); filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); animation:introBlason .9s cubic-bezier(.2,.8,.2,1.15) .1s forwards}
.aspr-intro .anneau{position:absolute; top:50%; left:50%; width:min(46vw,210px); aspect-ratio:1; margin:calc(min(46vw,210px) / -2 - 22px) 0 0 calc(min(46vw,210px) / -2); border-radius:50%; border:2px solid #E9CD7A; opacity:0; animation:introAnneau 1.1s ease-out .35s forwards}
.aspr-intro .bande{width:0; height:5px; border-radius:5px; background:linear-gradient(90deg,#009E60 0 33.3%,#FCD116 0 66.6%,#3A75C4 0); animation:introBande .7s cubic-bezier(.6,0,.2,1) .55s forwards}
@keyframes introBlason{to{opacity:1; transform:none}}
@keyframes introAnneau{0%{opacity:.9; transform:scale(.55)}100%{opacity:0; transform:scale(1.5)}}
@keyframes introBande{to{width:min(52vw,230px)}}

/* 2. Bande tricolore du haut : un reflet qui passe */
.tri{position:relative; overflow:hidden}
.tri::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.75) 50%, transparent 60% 100%); transform:translateX(-100%); animation:triReflet 7s ease-in-out 2s infinite}
@keyframes triReflet{0%{transform:translateX(-100%)}22%,100%{transform:translateX(100%)}}

/* 3. Accueil : entrée du titre, reflet doré, blason qui flotte */
.ident img.crestbig{animation:blasonEntree 1s cubic-bezier(.2,.8,.2,1.1) both, blasonFlotte 6s ease-in-out 1.2s infinite}
@keyframes blasonEntree{from{opacity:0; transform:translateY(24px) rotate(-6deg) scale(.85)}}
@keyframes blasonFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ident h1{background-image:linear-gradient(100deg, transparent 0 42%, rgba(255,255,255,.95) 50%, transparent 58% 100%), linear-gradient(180deg,#fff 30%,#E9CD7A); background-size:260% 100%, 100% 100%; background-position:120% 0, 0 0; background-repeat:no-repeat; animation:titreEntree 1s cubic-bezier(.2,.8,.2,1) .15s both, titreReflet 6.5s ease-in-out 1.6s infinite}
@keyframes titreEntree{from{opacity:0; clip-path:inset(100% 0 0 0); transform:translateY(30px)} to{opacity:1; clip-path:inset(0 0 0 0); transform:none}}
@keyframes titreReflet{0%{background-position:120% 0, 0 0}25%,100%{background-position:-20% 0, 0 0}}
.ident .full{animation:monte .9s cubic-bezier(.2,.8,.2,1) .35s both}
.ident .since{animation:monte .9s cubic-bezier(.2,.8,.2,1) .5s both}
.ident .devise > *{animation:monte .7s cubic-bezier(.2,.8,.2,1) both}
.ident .devise > *:nth-child(1){animation-delay:.65s} .ident .devise > *:nth-child(2){animation-delay:.78s} .ident .devise > *:nth-child(3){animation-delay:.91s}
.hero .board{animation:monte 1s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes monte{from{opacity:0; transform:translateY(22px)}}

/* 4. Compte à rebours : chaque chiffre qui change rebondit */
.count b.tic{animation:tic .45s cubic-bezier(.2,.8,.2,1.4)}
@keyframes tic{0%{transform:translateY(-35%) scale(.92); opacity:.35}100%{transform:none; opacity:1}}

/* 5. Changement de rubrique : la page glisse en douceur */
.panel.entre{animation:panneau .55s cubic-bezier(.2,.8,.2,1)}
@keyframes panneau{from{opacity:0; transform:translateY(14px)}}
.tab{transition:background .2s, border-color .2s, transform .2s}
.tab:active{transform:scale(.95)}

/* 6. Boutons : légère élévation et reflet au survol, onde au toucher */
.socials a, .tab{position:relative; overflow:hidden}
.a-onde{position:relative; overflow:hidden}
@media (hover:hover){
  .socials a{transition:transform .2s cubic-bezier(.2,.8,.2,1.3), background .2s}
  .socials a:hover{transform:translateY(-2px)}
  .socials a.signup::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 0 35%, rgba(255,255,255,.55) 50%, transparent 65% 100%); transform:translateX(-120%); transition:transform .7s ease}
  .socials a.signup:hover::before{transform:translateX(120%)}
}
.onde{position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.35); transform:scale(0); animation:onde .6s ease-out forwards}
@keyframes onde{to{transform:scale(2.6); opacity:0}}

/* 7. Chiffres des statistiques : petit éclat à la fin du comptage */
.kpis b.compte{animation:eclat .5s ease-out}
@keyframes eclat{50%{text-shadow:0 0 18px rgba(252,209,22,.7)}}

/* 8. Bouton « Installer l'appli » : une pulsation discrète pour attirer l'œil */
.socials a.signup[data-installer]{animation:pulse 2.8s ease-in-out 3s 3}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(252,209,22,0)}50%{box-shadow:0 0 0 7px rgba(252,209,22,.18)}}
}

/* 9. Scène 3D en haut à droite : pompes et haltères, étirements, brésilienne au fond ; l'entraîneur passe voir les trois groupes.
   Vidéo rendue sur la couleur exacte de l'en-tête, avec de vraies ombres ; ses bords sont fondus. */
@media (prefers-reduced-motion:no-preference){
header.top .wrap{position:relative}
header.top{background:#0A1A12}
.bresil{flex:none; height:74px; aspect-ratio:520/144; margin-left:4px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image:linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent)}
.bresil video{width:100%; height:100%; display:block; object-fit:cover; pointer-events:none}
/* Ordinateur : la scène et les boutons sur la première ligne, les rubriques en entier sur la seconde */
@media (min-width:861px){
  .top .row{flex-wrap:wrap; row-gap:0}
  .top .row nav.tabs{order:3; flex:1 1 100%; margin-left:0; padding-bottom:12px}
  .top .row .socials{order:1; margin-left:auto}
  .bresil{order:2}
}
/* Téléphone : à droite du blason */
@media (max-width:860px){ .bresil{position:absolute; right:-8px; top:4px; height:50px; margin:0} }
@media (max-width:370px){ .bresil{height:36px; top:12px} }
}