/* =====================================================================
   ÉCRAN D'ACCUEIL
   Les valeurs viennent de reglages.css (bloc .ecran-accueil).
   Animations uniquement en transform et opacity (fluides sur une borne
   peu puissante).
   Sur un écran plus allongé que la borne (téléphone), borne.js rallonge
   l'écran : le fond grossit d'autant (--etirement), donc les positions
   verticales sont multipliées par --etirement pour rester calées sur
   la bande colorée.
   ===================================================================== */

/* Fond derrière l'écran (bords éventuels sur les appareils hors format borne) */
html.ecran-accueil {
  background-image: url('../assets/fond-accueil.png');
  touch-action: none;                     /* rien à faire défiler sur l'accueil */
}

#ecran.is-leaving {
  opacity: 0;
  transition: opacity var(--sortie-duree) ease-in;
}

/* ---------- 1. Fond plein écran ---------- */
.fond {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fond-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}

/* Éléments centrés horizontalement (left calculé : les transforms sont
   réservés aux animations) et masqués tant que l'intro n'a pas démarré */
.logo,
.barquette,
.bouton {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.logo img,
.barquette img,
.bouton img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ---------- 2. Logo ---------- */
.logo {
  width: var(--logo-largeur);
  left: calc((100% - var(--logo-largeur)) / 2);
  top: calc(var(--logo-haut) * var(--etirement));
  z-index: 2;
}
.logo-inner {
  position: relative;
}
/* Halo flou derrière le logo (filtre fixe, seule l'opacité varie) */
.logo-glow {
  position: absolute;
  inset: 0;
  filter: blur(22px) brightness(1.4);
  opacity: .3;
  will-change: opacity;
}
.logo-img {
  position: relative;
}
/* Copie éclaircie posée par-dessus : sa variation d'opacité donne la
   respiration lumineuse sans animer de filtre */
.logo-flash {
  position: absolute;
  inset: 0;
  filter: brightness(1.45) saturate(1.15);
  opacity: 0;
  will-change: opacity;
}

/* ---------- 3. Barquette + ombre ---------- */
.barquette {
  width: var(--barquette-largeur);
  left: calc((100% - var(--barquette-largeur)) / 2);
  top: calc(var(--barquette-haut) * var(--etirement));
  z-index: 3;
}
.barquette-flotte {
  position: relative;
  z-index: 1;
  will-change: transform;
}
/* Ombre douce et floue (dégradé radial : pas de filtre à calculer) */
.barquette-ombre {
  position: absolute;
  left: calc((100% - var(--ombre-largeur)) / 2 + var(--ombre-decalage));
  width: var(--ombre-largeur);
  bottom: var(--ombre-bas);
  height: var(--ombre-hauteur);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, var(--ombre-opacite)) 0%,
              rgba(0, 0, 0, calc(var(--ombre-opacite) * .45)) 45%,
              rgba(0, 0, 0, 0) 72%);
  z-index: 0;
  will-change: transform, opacity;
}

/* ---------- 4. Bouton ---------- */
.bouton {
  width: var(--bouton-largeur);
  left: calc((100% - var(--bouton-largeur)) / 2);
  top: calc(var(--bouton-haut) * var(--etirement));
  z-index: 4;
}
/* Couche d'enfoncement au toucher (séparée de la pulsation) */
.bouton-appui {
  transition: transform .12s ease-out;
}
.bouton-appui.is-pressed {
  transform: scale(var(--appui-echelle));
}
.bouton-pulse {
  position: relative;
  will-change: transform;
}
/* Calque du reflet : masqué par l'image du bouton elle-même, la lumière
   ne s'affiche donc que sur le coup de pinceau, sans déborder */
.reflet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url('../assets/bouton-commander.png');
          mask-image: url('../assets/bouton-commander.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Bande lumineuse diagonale qui balaie de gauche à droite */
.reflet-bande {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, calc(var(--reflet-opacite) * .35)) 30%,
              rgba(255, 255, 255, var(--reflet-opacite)) 50%,
              rgba(255, 255, 255, calc(var(--reflet-opacite) * .35)) 70%,
              rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-22deg);
  will-change: transform;
}

/* =====================================================================
   ANIMATIONS — activées par .is-playing sur #ecran.
   Retirer puis remettre cette classe rejoue toute l'intro.
   ===================================================================== */

/* ---------- Entrée ---------- */
.is-playing .fond {
  animation: fond-entree var(--entree-fond-duree) ease-out var(--entree-fond-delai) both;
}
.is-playing .logo {
  animation: logo-entree var(--entree-logo-duree) linear var(--entree-logo-delai) both;
}
.is-playing .barquette {
  animation: barquette-entree var(--entree-barquette-duree) cubic-bezier(.22, 1, .36, 1) var(--entree-barquette-delai) both;
}
.is-playing .bouton {
  animation: bouton-entree var(--entree-bouton-duree) cubic-bezier(.34, 1.4, .64, 1) var(--entree-bouton-delai) both;
}

@keyframes fond-entree {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Descente depuis le haut avec léger rebond */
@keyframes logo-entree {
  0%   { opacity: 0; transform: translateY(-140%); animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  15%  { opacity: 1; }
  55%  { transform: translateY(5%); animation-timing-function: cubic-bezier(.25, .6, .5, 1); }
  75%  { transform: translateY(-2.5%); animation-timing-function: ease-in-out; }
  90%  { transform: translateY(.8%); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Montée depuis le bas en fondu */
@keyframes barquette-entree {
  from { opacity: 0; transform: translateY(35%); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Arrivée avec léger zoom */
@keyframes bouton-entree {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Boucles ---------- */

/* Fond : zoom très lent aller-retour */
.is-playing .fond-img {
  animation: fond-zoom var(--boucle-fond-duree) ease-in-out infinite;
}
@keyframes fond-zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--fond-zoom)); }
}

/* Logo : respiration lumineuse discrète */
.is-playing .logo-flash {
  animation: logo-respire var(--boucle-logo-duree) ease-in-out calc(var(--entree-logo-delai) + var(--entree-logo-duree)) infinite;
}
.is-playing .logo-glow {
  animation: logo-halo var(--boucle-logo-duree) ease-in-out calc(var(--entree-logo-delai) + var(--entree-logo-duree)) infinite;
}
@keyframes logo-respire {
  0%, 100% { opacity: 0; }
  50%      { opacity: .3; }
}
@keyframes logo-halo {
  0%, 100% { opacity: .25; }
  50%      { opacity: .6; }
}

/* Barquette : flottement doux ; l'ombre se resserre quand elle monte */
.is-playing .barquette-flotte {
  animation: barquette-flotte var(--boucle-barquette-duree) ease-in-out calc(var(--entree-barquette-delai) + var(--entree-barquette-duree)) infinite;
}
.is-playing .barquette-ombre {
  animation: barquette-ombre var(--boucle-barquette-duree) ease-in-out calc(var(--entree-barquette-delai) + var(--entree-barquette-duree)) infinite;
}
@keyframes barquette-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--barquette-flottement)); }
}
@keyframes barquette-ombre {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.88); opacity: .7; }
}

/* Bouton : reflet + pulsation, même durée et même départ = synchronisés.
   Le reflet traverse pendant le premier tiers du cycle, puis pause. */
.is-playing .reflet-bande {
  animation: reflet-balayage var(--boucle-bouton-duree) ease-in-out var(--boucle-bouton-delai) infinite;
}
.is-playing .bouton-pulse {
  animation: bouton-pulse var(--boucle-bouton-duree) ease-in-out var(--boucle-bouton-delai) infinite;
}
@keyframes reflet-balayage {
  0%        { transform: translateX(-130%) skewX(-22deg); }
  38%, 100% { transform: translateX(450%) skewX(-22deg); }
}
@keyframes bouton-pulse {
  0%        { transform: scale(1); }
  19%       { transform: scale(var(--bouton-pulsation)); }   /* pic quand le reflet passe au centre */
  40%, 100% { transform: scale(1); }
}

/* Mouvements réduits si le système le demande */
@media (prefers-reduced-motion: reduce) {
  .is-playing .fond-img,
  .is-playing .barquette-flotte,
  .is-playing .barquette-ombre,
  .is-playing .bouton-pulse {
    animation: none;
  }
}