/* =====================================================================
   Animations

   Tout est volontairement limite a `opacity` et `transform`. Ce sont les
   deux seules proprietes qu'un televiseur compose sur le GPU sans
   repasser par la mise en page ; animer une hauteur, une couleur ou un
   flou fait tomber une Samsung a dix images par seconde.

   Aucune animation n'est posee sur un element dont le JavaScript pilote
   deja le `transform` : les rangees defilent horizontalement par
   transform, la colonne verticalement. On n'anime donc que l'opacite de
   ces elements-la, et le deplacement uniquement sur des blocs inertes
   (les titres, le contenu d'une fiche).
   ===================================================================== */

/* --- Arrivee d'un ecran ------------------------------------------- */
@keyframes wtv-apparition { from { opacity: 0 } to { opacity: 1 } }

.screen.is-active { animation: wtv-apparition .22s ease-out both }

/* La lecture ne s'annonce pas : l'image doit etre la, point. */
#screen-player.is-active { animation: none }

/* --- Les rangees entrent en cascade -------------------------------- */
/* Seules les cinq premieres : au-dela on est hors ecran, et faire
   patienter vingt rangees pour rien coute plus que ca ne rapporte. */
#screen-home.is-active .rail:nth-child(-n+5) {
  animation: wtv-apparition .40s ease-out both;
}
#screen-home.is-active .rail:nth-child(1) { animation-delay: .00s }
#screen-home.is-active .rail:nth-child(2) { animation-delay: .06s }
#screen-home.is-active .rail:nth-child(3) { animation-delay: .12s }
#screen-home.is-active .rail:nth-child(4) { animation-delay: .18s }
#screen-home.is-active .rail:nth-child(5) { animation-delay: .24s }

/* --- Le titre d'une rangee monte un peu --------------------------- */
@keyframes wtv-montee {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: none }
}
#screen-home.is-active .rail:nth-child(-n+5) .rail__head {
  animation: wtv-montee .44s ease-out both;
  animation-delay: inherit;
}

/* --- La fiche d'un titre ------------------------------------------ */
/* Le bloc de texte et les boutons montent ensemble, decales, pendant
   que l'image de fond se contente d'apparaitre. */
#screen-detail.is-active .detail__logo,
#screen-detail.is-active .detail__title,
#screen-detail.is-active .chips,
#screen-detail.is-active .plotbox,
#screen-detail.is-active .detail__actions {
  animation: wtv-montee .38s ease-out both;
}
#screen-detail.is-active .detail__logo    { animation-delay: .02s }
#screen-detail.is-active .detail__title   { animation-delay: .05s }
#screen-detail.is-active .chips           { animation-delay: .09s }
#screen-detail.is-active .plotbox         { animation-delay: .13s }
#screen-detail.is-active .detail__actions { animation-delay: .17s }

/* --- La teinte tiree de l'affiche ---------------------------------- */
/* `--teinte` est posee par app.js a l'ouverture d'une fiche, a partir de
   la couleur moyenne que porte deja l'empreinte ThumbHash de l'affiche.
   Aucun calcul supplementaire : la mesure est deja faite. */
#screen-detail .hero__art:after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  background: linear-gradient(to top,
              rgba(var(--teinte, 20 20 20), .55) 0%,
              rgba(var(--teinte, 20 20 20), .18) 38%,
              rgba(0, 0, 0, 0) 70%);
  transition: background .45s ease-out;
  pointer-events: none;
}

/* =====================================================================
   Le bouton « Épisode suivant »

   En bas a droite, pendant le generique. L'anneau se remplit en dix
   secondes ; au bout, l'episode suivant demarre tout seul.

   L'anneau est un degrade conique anime par une variable CSS, et non un
   SVG redessine a chaque image : c'est la carte graphique qui travaille,
   pas le processeur de la television.
   ===================================================================== */
#suivant{
  position:absolute; right:64px; bottom:96px; z-index:60;
  display:none; align-items:center;
  padding:14px 26px 14px 14px;
  background:rgba(20,20,22,.92);
  border:2px solid rgba(255,255,255,.18); border-radius:12px;
  color:var(--white); font-size:24px; font-weight:500;
  animation:wtv-montee .32s ease-out both;
}
#suivant.is-on{display:flex}
#suivant.is-focused{ border-color:#fff; background:rgba(40,40,44,.96) }

/* Pas de `gap` : la television est en Chromium 76, qui ne le connait pas
   en flexbox. Une marge fait le meme travail partout. */
#suivant .txt{ margin-left:16px }

#suivant .anneau{
  position:relative; width:52px; height:52px; border-radius:50%;
  background:conic-gradient(var(--red,#E50914) calc(var(--part,0) * 1turn),
                            rgba(255,255,255,.16) 0);
  flex:0 0 auto;
}
/* Le disque interieur laisse l'anneau visible sur 5 px. */
#suivant .anneau:after{
  content:''; position:absolute; left:5px; top:5px; right:5px; bottom:5px;
  border-radius:50%; background:#141416;
}
#suivant .anneau b{
  position:absolute; left:0; top:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:600;
}
#suivant .txt{ display:flex; flex-direction:column; line-height:1.25 }
#suivant .txt i{ font-style:normal; font-size:18px; color:rgba(255,255,255,.5) }

/* =====================================================================
   Enchainement d'une image a l'autre, sans passer par le noir

   L'ancien echange posait un voile NOIR le temps de changer la source :
   image nette, noir, image nette. Meme court, l'oeil le lit comme une
   coupure — c'est ce qui rendait la navigation seche.

   Ici l'image sortante s'efface sur l'APERCU FLOU de celle qui arrive,
   pose juste avant en fond. On voit donc : net, flou, net. C'est une
   dissolution, pas une coupure, et il n'y a jamais de trou.

   Une seule surface image est animee — pas de second calque. Certains
   Tizen composaient deux calques sur deux images differentes pendant
   l'agrandissement d'une carte ; on ne rouvre pas cette porte.
   ===================================================================== */
.card__img{
  -webkit-transition:opacity .19s cubic-bezier(.22,.61,.25,1);
  transition:opacity .19s cubic-bezier(.22,.61,.25,1);
}

/* L'apercu flou de la nouvelle image est connu : on peut disparaitre
   completement, il y a quelque chose dessous. */
.card__art.is-fondu .card__img{ opacity:0 }

/* Aucun apercu pour cette image : s'effacer entierement montrerait la
   tuile vide. On descend juste assez pour que l'echange ne se voie pas. */
.card__art.is-fondu-nu .card__img{ opacity:.22 }

/* =====================================================================
   Nouveaux episodes — trois marques, toutes discretes

   Aucune ne deplace quoi que ce soit dans la page : ni rangee qui
   apparait, ni bandeau, ni fenetre. On voit qu'il y a du neuf, ou on ne
   le voit pas, mais l'interface reste exactement ou on l'a laissee.
   ===================================================================== */

/* 1. Le point sur l'icone marque-page de la barre du haut. */
.navlink.a-du-neuf{ position:relative }
.navlink.a-du-neuf:after{
  content:''; position:absolute; top:4px; right:2px;
  width:10px; height:10px; border-radius:50%;
  background:var(--red,#E50914);
  box-shadow:0 0 0 3px rgba(0,0,0,.55);
}

/* 2. La pastille dans le coin d'une serie de Ma liste. */
.card__neuf{
  position:absolute; top:10px; right:10px; z-index:3;
  min-width:30px; height:30px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
  border-radius:15px;
  background:var(--red,#E50914); color:#fff;
  font-size:19px; font-weight:600; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* 3. Le point sur une ligne d'episode. */
.eprow.est-neuf .ep__no{ position:relative }
.eprow.est-neuf .ep__no:after{
  content:''; position:absolute; top:-2px; right:-12px;
  width:9px; height:9px; border-radius:50%;
  background:var(--red,#E50914);
}