/* panayotou.net : le socle. Unité, gamme de couleurs, et tout ce qui entoure un écran :
   flèches, aide, grille, glitch, transitions. Aucun écran n'écrit ici.
   Auteur : Gr3g */
/* For the curious: 1rem is 10px of a mock-up nobody will ever see. Trust the maths. */

/* La gamme : cinq couleurs, posées par palettes.js sur l'écran et sur la racine.
   Le vert du visiteur ne change jamais de gamme. */
:root{--bg:#0a0a0a;--ink:#f2f2f2;--acc:#ff4a1c;--on-acc:#0a0a0a;--mid:#8c8c88;--you:#c6ff00;--line:color-mix(in srgb,var(--ink) 15%,var(--bg))}

/* Tout est en rem : 1rem vaut 10 px d'une planche de 1440 x 900.
   Trois régimes : colonne (défaut), téléphone, et large où la planche retrouve sa composition. */
html{font-size:min(14px,calc(100vw / 73))}
@media (max-width:640px){html{font-size:calc(100vw / 39)}}
@media (min-width:1080px) and (min-aspect-ratio:1/1){html{font-size:max(7.5px,min(calc(100vw / 144),calc(100vh / 90)))}}

html,body{margin:0;height:100%;background:var(--bg);overflow:hidden}
body{color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.ns{margin:4rem;font-size:max(1.6rem,16px)}

/* La scène, et un écran dedans. Pendant une transition, deux écrans s'y superposent. */
#scene{position:absolute;inset:0;overflow:hidden}
.ecran{position:absolute;inset:0;z-index:1;overflow:hidden;touch-action:pan-y;background:var(--bg);color:var(--ink);--line:color-mix(in srgb,var(--ink) 15%,var(--bg));--line2:color-mix(in srgb,var(--ink) 23%,var(--bg))}
.ecran.sort{z-index:2;pointer-events:none}

/* Commandes : deux flèches et l'aide, discrètes tant qu'on ne les cherche pas. */
.cmd{position:fixed;z-index:6;right:0;top:50%;width:3.6rem;height:3.6rem;min-width:34px;min-height:34px;padding:0;border:1px solid var(--ink);border-right:0;border-radius:0;background:var(--bg);color:var(--ink);font:700 max(1.3rem,12px)/1 'Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer;opacity:.3;transition:opacity .2s}
.cmd:hover,.cmd:focus-visible{opacity:1;outline:0;background:var(--ink);color:var(--bg)}
#prec{left:0;right:auto;translate:0 -50%;border-right:1px solid var(--ink);border-left:0}
#suiv{translate:0 -110%}
#aideB{translate:0 10%}
@media (pointer:coarse){.cmd{opacity:.55}}

/* Aide : un volet à droite, en couleurs inversées pour tenir sur n'importe quelle gamme. */
#aide{position:fixed;z-index:7;inset:0;display:flex;justify-content:flex-end;background:color-mix(in srgb,var(--bg) 72%,transparent)}
#aide[hidden]{display:none}
#aide .fiche{position:relative;box-sizing:border-box;width:min(50rem,100%);min-width:min(340px,100%);height:100%;overflow-y:auto;padding:3.2rem 3.2rem 4.8rem;background:var(--ink);color:var(--bg);font-size:max(1.4rem,14px);line-height:1.45}
#aide .sur,#aide h3{margin:0;font-size:max(1rem,11px);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
#aide h2{margin:.4rem 0 1.6rem;font-family:'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;font-size:max(4rem,32px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
#aide h3{margin-top:2.4rem;padding-top:.8rem;border-top:2px solid var(--bg)}
#aide p{margin:.8rem 0 0}
#aide ul{margin:.8rem 0 0;padding:0;list-style:none}
#aide li{padding:.5rem 0;border-top:1px solid color-mix(in srgb,var(--bg) 22%,var(--ink))}
#aide li:first-child{border-top:0}
#aide dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.6rem;margin:1rem 0 0;align-items:baseline}
#aide dt,#aide dd{margin:0}
#aide kbd{display:inline-block;padding:.1rem .7rem;border:1px solid var(--bg);font:700 max(1.2rem,12px)/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;white-space:nowrap}
#aide .note{opacity:.75}
#aide .fermer{position:absolute;right:1.6rem;top:1.6rem;width:3.6rem;height:3.6rem;min-width:34px;min-height:34px;padding:0;border:1px solid var(--bg);border-radius:0;background:none;color:var(--bg);font:700 max(2rem,18px)/1 'Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer}
#aide .fermer:hover,#aide .fermer:focus-visible{background:var(--bg);color:var(--ink);outline:0}

/* X : grille de construction. Le cyan est réservé à ce calque. */
#grille{position:fixed;z-index:4;inset:0;display:none;pointer-events:none;opacity:.4;background-position:2rem 0;background-image:repeating-linear-gradient(90deg,#00e5ff 0 1px,transparent 1px 6rem),repeating-linear-gradient(0deg,#00e5ff 0 1px,transparent 1px 6rem)}
.gx #grille{display:block}

/* Space : tout se fige, animations comprises. */
.fz .ecran *,.fz .ecran *::before,.fz .ecran *::after{animation-play-state:paused!important}

/* G : 300 ms de désordre, puis la gamme suivante. */
.ecran.gl{animation:glitch .3s steps(1) 1}
@keyframes glitch{0%{transform:translate(-1.4rem,.3rem)}20%{transform:translate(1rem,-.2rem) skewX(2deg)}40%{transform:translate(-.5rem,.6rem)}60%{transform:translate(1.6rem,0) skewX(-3deg)}80%{transform:translate(-.3rem,-.4rem)}100%{transform:none}}
#glitch{position:fixed;z-index:5;inset:0;overflow:hidden;pointer-events:none}
#glitch[hidden]{display:none}
#glitch i{position:absolute;left:0;right:0;-webkit-backdrop-filter:invert(1);backdrop-filter:invert(1);animation:tranche .3s steps(1) 1}
#glitch i:nth-child(odd){animation-delay:-.1s}
@keyframes tranche{0%{opacity:1}30%{opacity:0}55%{opacity:1}85%{opacity:0}}
#glitch b{position:absolute;left:0;right:0;top:46%;padding:.8rem 2rem;background:var(--acc);color:var(--on-acc);font-size:max(1.3rem,11px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden}

/* Transitions. Tranches : des bandes traversent l'écran et emportent l'ancien. */
#voile{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}
#voile i{position:absolute;left:0;width:100%;will-change:transform}
/* Trame : l'ancien écran se défait en points de plus en plus petits. */
@property --tr{syntax:'<percentage>';inherits:false;initial-value:100%}
.ecran.t-trame{-webkit-mask-image:radial-gradient(circle,#000 var(--tr),transparent calc(var(--tr) + 2%));mask-image:radial-gradient(circle,#000 var(--tr),transparent calc(var(--tr) + 2%));-webkit-mask-size:2.4rem 2.4rem;mask-size:2.4rem 2.4rem;animation:trame .95s ease-in forwards}
@keyframes trame{from{--tr:100%}70%{opacity:1}to{--tr:0%;opacity:0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}