/* Le mouvement : soleil couchant, butin qui tombe, fiche ligne par ligne, étincelles, curseur du jeu. */

/* Le soleil se couche quand on quitte le premier écran : il glisse sous l'horizon, la nuit gagne le ciel puis le lac */
.ciel{background:linear-gradient(180deg,#130a35 0%,#2c1466 26%,#6b2492 48%,#bf3f8d 62%,#ee7388 70%,#f9a878 72%)}
.ciel::before{content:"";position:absolute;inset:0;transform:translateY(calc(var(--sortie,0) * 26%));
  background:radial-gradient(circle at 58% 72%,#fff1c9 0,#ffd58c 6%,#fca56e 13%,rgba(240,111,134,.6) 22%,rgba(240,111,134,0) 38%)}
.ciel::after{content:"";position:absolute;inset:0;opacity:var(--sortie,0);background:
  radial-gradient(1.4px 1.4px at 9% 16%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 38%,rgba(255,255,255,.85),transparent),
  radial-gradient(1.6px 1.6px at 37% 11%,#fff,transparent),radial-gradient(1.1px 1.1px at 48% 30%,rgba(255,240,220,.8),transparent),
  radial-gradient(1.5px 1.5px at 66% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 79% 34%,rgba(220,235,255,.85),transparent),
  radial-gradient(1.4px 1.4px at 91% 20%,#fff,transparent),radial-gradient(1.1px 1.1px at 14% 52%,rgba(255,255,255,.7),transparent),
  radial-gradient(1.2px 1.2px at 58% 50%,rgba(255,255,255,.7),transparent),radial-gradient(1.3px 1.3px at 86% 55%,rgba(255,240,220,.75),transparent),
  linear-gradient(180deg,#0b0620 0%,#160b3a 55%,#3b1663 100%)}
.sol::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1d0e42,#0c0620);opacity:calc(var(--sortie,0) * .9)}
.scene::after{opacity:calc(var(--sortie,0) * .3)}

/* Profondeur : le ciel de nuit a de quoi glisser sans montrer son bord */
.ciel-nuit i{bottom:-300px}
.ciel-nuit i+i{bottom:-460px}

/* Le butin tombe du ciel sur son anneau, la console d'abord, le jeu juste après ; l'anneau s'illumine à l'impact */
.lot-ecran .butin[data-arrive]{animation:none;opacity:1}
.js .lot-ecran:not(.vu) .boite,.js .lot-ecran:not(.vu) .jeu{opacity:0}
.lot-ecran.vu .boite{animation:tombe .85s linear .15s both}
.lot-ecran.vu .jeu{animation:tombe .85s linear .32s both}
@keyframes tombe{
  0%{translate:0 -160%;opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}
  10%{opacity:1}
  58%{translate:0 0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  74%{translate:0 -5%;animation-timing-function:cubic-bezier(.5,0,.6,1)}
  100%{translate:0 0;opacity:1}}
.lot-ecran.vu .socle-lot b{animation:impact-anneau .6s ease-out .62s both}
@keyframes impact-anneau{0%{scale:1;filter:brightness(1)}30%{scale:1.1;filter:brightness(1.9)}100%{scale:1;filter:brightness(1)}}
/* puis il s'incline vers le curseur */
.boite,.jeu{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}

/* La fiche du t-shirt se dévoile ligne par ligne */
.vitrine .fiche[data-arrive]{animation:none;opacity:1}
.js .vitrine:not(.vu) .fiche > *{opacity:0}
.vitrine.vu .fiche > *{animation:entre .6s var(--expo) calc(.12s + var(--n,0) * .08s) both}
.fiche > :nth-child(2){--n:1}
.fiche > :nth-child(3){--n:2}
.fiche > :nth-child(4){--n:3}
.fiche > :nth-child(5){--n:4}
.fiche > :nth-child(6){--n:5}

/* Les étincelles d'un t-shirt ajouté */
.etincelle{position:fixed;z-index:70;width:calc(9 * var(--p));height:calc(9 * var(--p));min-width:7px;min-height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(#fff 0,#ffe08a 35%,#ffc629 60%,rgba(255,198,41,0) 72%);box-shadow:0 0 10px 2px rgba(255,198,41,.65)}

/* Le curseur du jeu, sur ordinateur : une flèche or ; elle s'éclaire sur ce qui se clique */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3v22l6-5.5 4.2 9 4-1.9-4.2-8.9H23z' fill='%23ffc629' stroke='%230a0518' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,auto}
  a,button,label,summary{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3v22l6-5.5 4.2 9 4-1.9-4.2-8.9H23z' fill='%23fff4ea' stroke='%23ffc629' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,pointer!important}
}

@media (max-width:700px){
  .ciel{background:linear-gradient(180deg,#130a35 0%,#2c1466 34%,#6b2492 58%,#bf3f8d 74%,#ee7388 84%,#f9a878 87%)}
  .ciel::before{background:radial-gradient(circle at 50% 87%,#fff1c9 0,#ffd58c 7%,#fca56e 15%,rgba(240,111,134,.6) 26%,rgba(240,111,134,0) 46%)}
}

@media (prefers-reduced-motion:reduce){
  .boite,.jeu{transition:none}
}