/* ==========================================================================
   MENU PRINCIPAL
   Options en cyan translucide, chacune avec sa propre inclinaison et sa
   taille : on voit l'eau au travers, les zones où deux options se
   chevauchent s'éclaircissent, et un reflet lent glisse dans les lettres.
   L'option juste sous la sélection s'efface davantage, comme dans le jeu.
   Sélection : lame blanche qui part d'une pointe à gauche, éclat rose
   décalé derrière, texte qui passe en noir avec une copie rouge décalée
   en haut à droite, et l'option qui grossit.
   Les options sont espacées et la lame ne capte pas la souris, pour que
   la zone de survol de chaque option soit nette.
   ========================================================================== */

.menu{position:absolute;z-index:3;left:39vw;top:52%;transform:translateY(-50%)}
.menu-list{list-style:none;margin:0;padding:0;display:grid;justify-items:start}
.menu-list li{
  font-size:calc(clamp(3rem,6.4vw,6.2rem) * var(--fs,1));
  line-height:.8;
  margin-top:.2em;
  transform:translateX(var(--x,0)) rotate(var(--r,-12deg));
  transform-origin:0 60%;
}
.menu-list li:first-child{margin-top:0}
.menu.enter .menu-list li{animation:miIn .45s var(--ease-out) both;animation-delay:calc(var(--i) * 55ms)}

.mi{position:relative;display:inline-block;margin:0;padding:.06em .1em;border:0;background:none;cursor:pointer;
  font:italic 900 1em/.86 var(--f-display);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;
  color:var(--cyan);transform-origin:0 70%;transition:transform .08s ease-out;-webkit-tap-highlight-color:transparent}
.mi:focus-visible{outline:none}

/* Tout ce qui est décoratif laisse passer la souris : seul le bouton compte */
.mi-hl,.mi-white,.mi-pink,.mi-red{pointer-events:none}

/* Texte de base : cyan translucide avec un reflet qui glisse.
   Devient noir et opaque (ombre de la copie rouge) quand l'option est choisie. */
.mi-txt{position:relative;z-index:2;display:block;transform:skewX(-9deg);
  color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--cyan) 50%,var(--paper)) 0%,
    color-mix(in srgb,var(--cyan) 85%,var(--paper)) 30%,
    var(--cyan) 48%,
    color-mix(in srgb,var(--cyan) 85%,var(--paper)) 66%,
    color-mix(in srgb,var(--cyan) 50%,var(--paper)) 100%) 0 0 / 220% 100%;
  -webkit-background-clip:text;background-clip:text;
  opacity:.8;mix-blend-mode:screen;
  animation:sheen 7s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -1.3s);
  transition:opacity .15s}
.menu-list li:nth-child(1) .mi-txt{--i:0}
.menu-list li:nth-child(2) .mi-txt{--i:1}
.menu-list li:nth-child(3) .mi-txt{--i:2}
.menu-list li:nth-child(4) .mi-txt{--i:3}
.mi:hover .mi-txt{opacity:.92}
/* L'option juste sous la sélection s'efface, comme « ITEM » sous « SKILL » */
.menu-list li:has(.is-sel) + li .mi-txt{opacity:.36}

/* Copie rouge, décalée en haut à droite */
.mi-red{position:absolute;z-index:3;left:.1em;top:.06em;display:block;color:var(--blade);transform:skewX(-9deg);opacity:0}

/* La lame */
.mi-hl{position:absolute;z-index:1;left:-1.65em;right:-1.05em;top:-.44em;bottom:-.02em;display:none;transform-origin:0 92%}
.mi-white,.mi-pink{position:absolute;display:block;clip-path:polygon(0 92%,100% 0,89% 76%)}
.mi-white{inset:0;background:var(--paper)}
.mi-pink{left:-.6em;right:-.17em;top:.03em;bottom:-.08em;background:var(--magenta)}

/* État sélectionné */
.mi.is-sel{transform:scale(1.08)}
.mi.is-sel .mi-txt{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);opacity:1;mix-blend-mode:normal;animation:none}
.mi.is-sel .mi-red{opacity:1;transform:translate(.075em,-.085em) skewX(-9deg);animation:redIn .11s var(--ease-out)}
.mi.is-sel .mi-hl{display:block;animation:hlIn .15s cubic-bezier(.2,.9,.3,1.15) both,hlFloat 2.6s .3s ease-in-out infinite}
.mi.is-sel .mi-pink{animation:pinkIn .2s var(--ease-out) both}

@keyframes miIn{
  from{opacity:0;transform:translateX(calc(var(--x,0) + 1.3em)) rotate(var(--r,-12deg))}
  to{opacity:1;transform:translateX(var(--x,0)) rotate(var(--r,-12deg))}
}
@keyframes sheen{from{background-position:0 0}to{background-position:100% 0}}
@keyframes hlIn{from{transform:scale(0,.25)}60%{transform:scale(1.04,1.02)}to{transform:none}}
@keyframes hlFloat{0%,100%{transform:none}50%{transform:rotate(-.9deg) scaleX(1.02)}}
@keyframes pinkIn{from{opacity:0;transform:translateX(-.35em)}to{opacity:1;transform:none}}
@keyframes redIn{from{opacity:0;transform:skewX(-9deg)}to{opacity:1;transform:translate(.075em,-.085em) skewX(-9deg)}}

/* Navigateurs sans color-mix : cyan uni translucide */
@supports not (color:color-mix(in srgb,red,blue)){
  .mi-txt{background:none;-webkit-text-fill-color:var(--cyan);color:var(--cyan)}
}

@media (max-width:860px){
  .menu{left:auto;right:12vw}
}
@media (max-width:640px){
  .menu{left:15vw;right:auto;top:auto;bottom:clamp(150px,24vh,220px);transform:none}
  .menu-list li{font-size:calc(clamp(2.6rem,13vw,3.9rem) * var(--fs,1))}
}