/* Animation d'ouverture de ToonFlix (2,1 s). Maquette : section « Animations - Ouverture ».

   Déroulé, en millisecondes puis en pourcentage de la durée :
     0 à 300      (0 à 14,29 %)      le sigle apparaît, échelle 90 % vers 100 %
     300 à 800    (14,29 à 38,1 %)   le halo vert s'allume
     800 à 1 400  (38,1 à 66,67 %)   le sigle s'efface dans le faisceau central, qui s'élargit ;
                                     les faisceaux s'écartent, zoom 100 % vers 115 %
     1 400 à 1 800 (66,67 à 85,71 %) les faisceaux filent vers les bords et s'estompent
     1 800 à 2 100 (85,71 à 100 %)   le fond s'efface, l'accueil apparaît

   Seuls `transform` et `opacity` sont animés. Le flou des faisceaux est fixe. Le calque est
   retiré du document par le composant `Ouverture` à la fin de l'animation `ouverture-rideau`. */

.ouverture {
  position: fixed;
  top: 0;
  left: 0;
  /* Toute la largeur de la fenêtre, barre de défilement comprise : le sigle reste au même
     endroit quand la barre apparaît avec le catalogue. */
  width: 100vw;
  height: 100%;
  z-index: 100;
  /* Les faisceaux dépassent de l'écran (zoom, écartement) : le calque les rogne. */
  overflow: hidden;
  background: var(--fond);
  cursor: default;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: ouverture-rideau 2100ms linear both;
  /* Largeur des faisceaux : la table est écrite pour le Mobile. */
  --echelle: 0.5px;
}

/* Animation passée par un appui ou une touche : le calque ne capte plus rien et s'efface vite. */
.ouverture--passee {
  pointer-events: none;
  animation: ouverture-rideau-passe 160ms ease-out both;
}

.ouverture__halo,
.ouverture__faisceaux,
.ouverture__faisceau,
.ouverture__coeur,
.ouverture__sigle {
  position: absolute;
  pointer-events: none;
}

/* ---------- Le sigle ---------- */

.ouverture__sigle {
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  will-change: transform, opacity;
  animation: ouverture-sigle 2100ms linear both;
}

.ouverture__sigle .logo {
  height: 48px;
}

/* ---------- Le halo ---------- */

.ouverture__halo {
  left: 50%;
  top: 50%;
  width: 300px;
  height: 380px;
  margin: -190px 0 0 -150px;
  opacity: 0;
  background: radial-gradient(
    closest-side,
    rgba(0, 220, 100, 0.5),
    rgba(0, 220, 100, 0.22) 45%,
    rgba(0, 220, 100, 0)
  );
  will-change: transform, opacity;
  animation: ouverture-halo 2100ms linear both;
}

/* ---------- Le faisceau central ---------- */

/* Large comme le fût du sigle : c'est en lui que le sigle s'efface. */
.ouverture__coeur {
  left: 50%;
  top: -20%;
  width: 14px;
  height: 140%;
  margin-left: -7px;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(79, 255, 140, 0),
    #00dc64 22%,
    #4fff8c 40%,
    #8dffb6 50%,
    #4fff8c 60%,
    #00dc64 78%,
    rgba(79, 255, 140, 0)
  );
  filter: blur(3px);
  will-change: transform, opacity;
  animation: ouverture-coeur 2100ms linear both;
}

/* ---------- Les faisceaux ---------- */

.ouverture__faisceaux {
  inset: 0;
  will-change: transform;
  animation: ouverture-zoom 2100ms linear both;
}

/* Chaque faisceau reçoit du composant sa place finale (`--ecart`, en centièmes de la largeur de
   l'écran depuis le centre), sa largeur (`--largeur`) et son intensité (`--eclat`). */
.ouverture__faisceau {
  left: 50%;
  top: -20%;
  /* Jamais moins de 2 px : les filets restent visibles. */
  width: max(2px, calc(var(--largeur) * var(--echelle)));
  height: 140%;
  margin-left: min(-1px, calc(var(--largeur) * var(--echelle) * -0.5));
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--teinte) 30%,
    var(--teinte-coeur) 50%,
    var(--teinte) 70%,
    transparent
  );
  filter: blur(var(--flou));
  will-change: transform, opacity;
  animation:
    ouverture-ecart 2100ms linear both,
    ouverture-eclat 2100ms linear both;
}

.ouverture__faisceau--vert {
  --teinte: #008a40;
  --teinte-coeur: #00c257;
  --flou: 5px;
}

.ouverture__faisceau--clair {
  --teinte: #00dc64;
  --teinte-coeur: #4fff8c;
  --flou: 2px;
}

.ouverture__faisceau--blanc {
  --teinte: #4fff8c;
  --teinte-coeur: #e6fff0;
  --flou: 1px;
}

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
  .ouverture {
    --echelle: 2px;
  }

  .ouverture__sigle .logo {
    height: 64px;
  }

  .ouverture__halo {
    width: 420px;
    height: 460px;
    margin: -230px 0 0 -210px;
  }

  .ouverture__coeur {
    width: 18px;
    margin-left: -9px;
  }
}

/* ---------- Le mouvement ---------- */

/* Le calque : plein jusqu'à 1 800 ms, puis il laisse voir l'accueil. */
@keyframes ouverture-rideau {
  0%,
  85.71% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ouverture-rideau-passe {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Le sigle ne se déforme jamais : il apparaît, tient, puis s'efface dans le faisceau central. */
@keyframes ouverture-sigle {
  0% {
    opacity: 0;
    transform: scale(0.9);
    animation-timing-function: ease-out;
  }
  14.29%,
  38.1% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  50%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes ouverture-halo {
  0%,
  14.29% {
    opacity: 0;
    transform: scale(0.8);
    animation-timing-function: ease-in-out;
  }
  38.1% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  66.67% {
    opacity: 0.12;
    transform: scale(2.6, 2.2);
    animation-timing-function: ease-out;
  }
  85.71%,
  100% {
    opacity: 0;
    transform: scale(3.2, 2.4);
  }
}

/* Le faisceau central naît à la taille du sigle, monte et s'élargit pendant que le sigle
   s'efface. */
@keyframes ouverture-coeur {
  0%,
  38.1% {
    opacity: 0;
    transform: scale(1, 0.05);
    animation-timing-function: ease-in;
  }
  47.62% {
    opacity: 1;
    transform: scale(1.5, 0.22);
    animation-timing-function: ease-in;
  }
  66.67% {
    opacity: 0.35;
    transform: scale(4, 1);
    animation-timing-function: ease-out;
  }
  85.71%,
  100% {
    opacity: 0;
    transform: scale(7, 1);
  }
}

@keyframes ouverture-zoom {
  0%,
  38.1% {
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  66.67% {
    transform: scale(1.15);
    animation-timing-function: ease-out;
  }
  85.71%,
  100% {
    transform: scale(1.2);
  }
}

/* Les faisceaux partent du centre, serrés et courts, puis gagnent leur place et toute la hauteur,
   et filent vers les bords. */
@keyframes ouverture-ecart {
  0%,
  38.1% {
    transform: translateX(0) scale(0.4, 0.3);
    animation-timing-function: ease-in;
  }
  66.67% {
    transform: translateX(calc(var(--ecart) * 1vw)) scale(1, 1);
    animation-timing-function: ease-out;
  }
  85.71%,
  100% {
    transform: translateX(calc(var(--ecart) * 1.3vw)) scale(1.3, 1);
  }
}

@keyframes ouverture-eclat {
  0%,
  38.1% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  52.38%,
  66.67% {
    opacity: var(--eclat);
    animation-timing-function: ease-out;
  }
  85.71%,
  100% {
    opacity: 0;
  }
}

/* ---------- Mouvement réduit ---------- */

/* Simple fondu du sigle : apparition de 0 à 400 ms, tenue jusqu'à 800 ms, fondu vers l'accueil
   jusqu'à 1 100 ms. Ni halo ni faisceaux. Les durées sont redites avec `!important` : la règle
   générale de `base.css` les met à zéro pour ce réglage. */
@media (prefers-reduced-motion: reduce) {
  .ouverture {
    animation-name: ouverture-rideau-doux;
    animation-duration: 1100ms !important;
  }

  .ouverture__sigle {
    animation-name: ouverture-sigle-doux;
    animation-duration: 1100ms !important;
  }

  .ouverture--passee {
    animation-name: ouverture-rideau-passe;
    animation-duration: 0.01ms !important;
  }

  .ouverture__halo,
  .ouverture__faisceaux,
  .ouverture__coeur {
    display: none;
  }
}

@keyframes ouverture-rideau-doux {
  0%,
  72.73% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ouverture-sigle-doux {
  0% {
    opacity: 0;
  }
  36.36%,
  100% {
    opacity: 1;
  }
}