/* =========================================================
   TACLE ROYAL 3D — style.css
   Palette, typo et signature visuelle définies avec Enzo.
   ========================================================= */

:root{
  --bg-void:#090C16;
  --bg-panel:#121729;
  --bg-panel-alt:#171d38;

  --blue-panache:#2F5CFF;
  --blue-panache-deep:#1A3FA0;
  --red-rival:#E23B3B;
  --gold-royal:#E8B923;

  --ink:#F3F5FC;
  --mist:#8C93AC;

  --lucas:#FFC93C;
  --marcel:#FF7A3D;
  --sofiane:#9B5FFF;
  --jeanmi:#2F5CFF;
  --moussa:#9AA3B8;
  --yann:#3ED598;
  --arcade-glow:#39FF88;

  --font-display:'Anton', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-hud:'Space Mono', monospace;

  --container:1120px;
  --radius:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-void);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:1.05;margin:0 0 .4em;}
p{margin:0 0 1em;color:var(--mist);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--font-hud);
  font-size:.75rem;
  letter-spacing:3px;
  color:var(--blue-panache);
  margin-bottom:10px;
}

/* mots-clés mis en valeur dans les paragraphes : couleur + apparition animée */
.hl{
  display:inline-block;
  font-weight:800;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.is-visible .hl{opacity:1;transform:translateY(0);}
.hl:nth-of-type(1){transition-delay:.05s;}
.hl:nth-of-type(2){transition-delay:.22s;}
.hl:nth-of-type(3){transition-delay:.39s;}
.hl:nth-of-type(4){transition-delay:.56s;}
.hl--blue{color:var(--blue-panache);}
.hl--gold{color:var(--gold-royal);}
.hl--red{color:var(--red-rival);}
.hl--yellow{color:var(--lucas);}
.shimmer-text{
  background:linear-gradient(100deg, var(--blue-panache) 0%, #a9c0ff 25%, var(--blue-panache) 50%, #6c8dff 75%, var(--blue-panache) 100%);
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:shimmer 4.5s linear infinite;
  display:inline-block;
}
@keyframes shimmer{
  0%{background-position:0% center;}
  100%{background-position:-250% center;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* =================== NAV =================== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(9,12,22,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.5px;}
.nav__brand img{width:34px;height:34px;border-radius:8px;}
.nav__right{display:flex;align-items:center;gap:20px;}
.nav__links{display:flex;gap:28px;font-size:.9rem;}
.nav__links a{color:var(--mist);transition:color .2s;}
.nav__links a:hover{color:var(--ink);}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav__toggle span{width:22px;height:2px;background:var(--ink);display:block;}

.lang-switch{display:flex;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:3px;gap:2px;}
.lang-switch__btn{
  background:none;border:0;cursor:pointer;
  font-family:var(--font-hud);font-size:.68rem;font-weight:700;letter-spacing:.5px;
  color:var(--mist);padding:5px 11px;border-radius:16px;
  transition:background .2s ease, color .2s ease;
}
.lang-switch__btn.is-active{background:var(--blue-panache);color:#fff;}

@media (max-width:820px){
  .nav__toggle{display:flex;}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--bg-panel);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav__links.is-open{max-height:260px;}
  .nav__links a{padding:14px 24px;border-top:1px solid rgba(255,255,255,.05);}
}

/* =================== HERO =================== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:100px 24px 60px;
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, var(--blue-panache-deep) 0%, var(--bg-void) 42%, var(--bg-void) 58%, #7a1f1f 100%);
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 45% at 50% 45%, rgba(232,185,35,.28), transparent 70%);
}
.hero-streaks{position:absolute;inset:0;opacity:.35;mix-blend-mode:screen;}
.hero-streaks span{
  position:absolute;width:2px;height:140%;top:-20%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.6), transparent);
  transform:rotate(28deg);
  animation:streak 5s linear infinite;
}
.hero-streaks span:nth-child(1){left:12%;animation-delay:0s;}
.hero-streaks span:nth-child(2){left:34%;animation-delay:1.4s;}
.hero-streaks span:nth-child(3){left:63%;animation-delay:.6s;}
.hero-streaks span:nth-child(4){left:82%;animation-delay:2.2s;}
@keyframes streak{
  0%{opacity:0;transform:translateY(-30%) rotate(28deg);}
  15%{opacity:1;}
  100%{opacity:0;transform:translateY(60%) rotate(28deg);}
}

.hero-content{position:relative;z-index:2;max-width:640px;}
.hero-logo-wrap{position:relative;display:inline-block;margin-bottom:20px;}
.hero-logo{
  position:relative;z-index:2;
  width:clamp(120px,32vw,190px);height:clamp(120px,32vw,190px);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.6));
  animation:logoSlam .85s cubic-bezier(.18,.86,.32,1.15) both;
}
.hero-logo-wrap::after{
  content:'';position:absolute;inset:-14px;z-index:1;
  border-radius:34px;
  border:3px solid var(--gold-royal);
  opacity:0;
  animation:impactRing .8s ease-out .5s both;
}
.hero-logo-wrap::before{
  content:'';position:absolute;inset:0;z-index:0;
  border-radius:26px;
  background:radial-gradient(circle, rgba(226,59,59,.55), transparent 70%);
  opacity:0;
  animation:impactFlash .5s ease-out .48s both;
}
@keyframes logoSlam{
  0%{transform:translate(-140px,-60px) rotate(-30deg) scale(.5);opacity:0;}
  55%{transform:translate(8px,4px) rotate(8deg) scale(1.1);opacity:1;}
  72%{transform:translate(-4px,-2px) rotate(-4deg) scale(.96);}
  86%{transform:translate(2px,1px) rotate(2deg) scale(1.02);}
  100%{transform:translate(0,0) rotate(0deg) scale(1);}
}
@keyframes impactRing{
  0%{transform:scale(.7);opacity:0;}
  25%{opacity:.9;}
  100%{transform:scale(1.7);opacity:0;}
}
@keyframes impactFlash{
  0%{opacity:0;}
  40%{opacity:1;}
  100%{opacity:0;}
}
.hero-title{font-size:clamp(2.6rem,9vw,4.6rem);}
.hero-title span{display:inline-block;}
.hero-title .word-blue{color:var(--blue-panache);animation:slideInLeft .7s cubic-bezier(.16,.84,.44,1) both, pulseGlow 2.8s ease-in-out .9s infinite;}
.hero-title .word-red{color:var(--red-rival);animation:slideInRight .7s cubic-bezier(.16,.84,.44,1) both .18s;}
@keyframes slideInLeft{from{transform:translateX(-70px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slideInRight{from{transform:translateX(70px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes pulseGlow{0%,100%{text-shadow:0 0 0 rgba(47,92,255,0);}50%{text-shadow:0 0 22px rgba(47,92,255,.65);}}

.hero-tagline{font-size:1.05rem;max-width:460px;margin:16px auto 30px;}

.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:34px;}

.hero-grinta{max-width:260px;margin:0 auto;}
.hero-grinta__label{font-family:var(--font-hud);font-size:.7rem;color:var(--mist);letter-spacing:2px;display:flex;justify-content:space-between;margin-bottom:6px;}
.grinta-bar{width:100%;height:9px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.grinta-bar__fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--red-rival),var(--gold-royal));animation:grintaPulse 3.4s ease-in-out infinite;}
@keyframes grintaPulse{0%,100%{width:32%;}50%{width:86%;}}

/* store badges */
.store-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:12px;
  background:var(--ink);color:var(--bg-void);
  font-weight:800;transition:transform .18s ease, box-shadow .18s ease;
}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,255,255,.15);}
.store-badge__icon{width:22px;height:22px;flex:0 0 auto;}
.store-badge__text{font-family:var(--font-body);font-size:1rem;line-height:1.1;text-align:left;}
.store-badge__text small{display:block;font-size:.62rem;font-weight:600;opacity:.7;letter-spacing:.5px;}
.store-badge--disabled{
  background:transparent;color:var(--mist);
  border:1px solid rgba(255,255,255,.18);
  cursor:default;pointer-events:none;
}
.store-badge--disabled:hover{transform:none;box-shadow:none;}

/* =================== SECTIONS GÉNÉRIQUES =================== */
.section{padding:90px 0;}
.section--alt{background:var(--bg-panel);}
.section__head{max-width:640px;margin:0 auto 46px;text-align:center;}
.section__head h2{font-size:clamp(1.9rem,5vw,2.7rem);}
.section__head p{max-width:520px;margin-left:auto;margin-right:auto;}

/* ligne de tacle : séparateur diagonal signature */
.divider{height:56px;position:relative;overflow:hidden;}
.divider::after{
  content:'';position:absolute;inset:-2px;
  background:var(--bg-panel);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
.divider--rev::after{clip-path:polygon(0 0,100% 100%,0 100%);}
.divider--gold::after{background:linear-gradient(90deg, var(--bg-panel), #26210f);}

/* =================== PRÉSENTATION =================== */
.presentation{text-align:center;}
.presentation .container{max-width:720px;}
.presentation p{font-size:1.1rem;color:var(--ink);opacity:.85;}

/* =================== PERSONNAGES =================== */
.char-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
}
.char-card{
  background:var(--bg-panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:18px;
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.char-card:hover{
  transform:perspective(700px) rotateX(3deg) rotateY(-4deg) translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.char-card h3{font-size:1.25rem;margin-bottom:2px;color:var(--ink);}
.char-card__nickname{color:var(--blue-panache);font-style:italic;font-size:.85rem;margin-bottom:12px;}

/* avatar façon fiche joueur — icône du coup spécial, pas de visage */
.avatar-frame{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg, var(--bg-panel-alt), var(--bg-void));
  border:2px solid var(--accent);
  margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
}
.char-icon{width:46%;height:46%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));}
.jersey-number{
  position:absolute;bottom:10px;left:12px;
  font-family:var(--font-hud);font-size:.85rem;font-weight:700;
  color:var(--accent);opacity:.8;
}
.level-badge{
  position:absolute;top:8px;right:8px;
  background:var(--gold-royal);color:#20180a;
  font-family:var(--font-hud);font-size:.62rem;font-weight:700;
  padding:3px 9px;border-radius:20px;
}
.captain-badge{
  position:absolute;top:8px;left:8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold-royal);color:#20180a;
  font-family:var(--font-hud);font-weight:700;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
}

/* pastille coup spécial */
.move-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--accent);color:var(--accent);
  font-family:var(--font-hud);font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;margin-bottom:16px;
}
.move-pill .move-icon{color:var(--gold-royal);}

/* barres de stats, se remplissent au scroll */
.stats{display:grid;gap:8px;}
.stat-row{display:grid;grid-template-columns:66px 1fr;align-items:center;gap:10px;}
.stat-label{font-family:var(--font-hud);font-size:.6rem;color:var(--mist);letter-spacing:.5px;text-transform:uppercase;}
.stat-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}
.stat-bar__fill{height:100%;width:0%;border-radius:4px;transition:width 1.1s cubic-bezier(.16,.84,.44,1);}
.stat-bar--speed .stat-bar__fill{background:var(--lucas);}
.stat-bar--power .stat-bar__fill{background:var(--blue-panache);}
.stat-bar--grinta .stat-bar__fill{background:linear-gradient(90deg,var(--red-rival),var(--gold-royal));}
.reveal.is-visible .stat-bar__fill{width:var(--target);}
.stats .stat-row:nth-child(1) .stat-bar__fill{transition-delay:.15s;}
.stats .stat-row:nth-child(2) .stat-bar__fill{transition-delay:.32s;}
.stats .stat-row:nth-child(3) .stat-bar__fill{transition-delay:.49s;}

/* timeline progression : vagues -> boss */
.wave-track{position:relative;max-width:640px;margin:0 auto;padding-top:4px;}
.wave-track__line{position:absolute;top:9px;left:9px;right:9px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;}
.wave-track__line-fill{
  height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-panache),var(--red-rival),var(--gold-royal));
  transition:width 1.6s cubic-bezier(.16,.84,.44,1) .2s;
}
.reveal.is-visible .wave-track__line-fill{width:100%;}
.wave-track__points{display:flex;justify-content:space-between;position:relative;}
.wave-point{display:flex;flex-direction:column;align-items:center;gap:10px;}
.wave-point__dot{width:18px;height:18px;border-radius:50%;background:var(--bg-void);border:3px solid var(--blue-panache);}
.wave-point__label{font-family:var(--font-hud);font-size:.64rem;color:var(--mist);text-align:center;max-width:84px;}
.wave-point--boss .wave-point__dot{border-color:var(--gold-royal);background:var(--gold-royal);box-shadow:0 0 16px rgba(232,185,35,.6);}
.wave-point--boss .wave-point__label{color:var(--gold-royal);font-weight:700;}

/* =================== CAPTURES D'ÉCRAN =================== */
.shots-carousel{position:relative;}
.screenshots-row{
  display:flex;gap:18px;overflow-x:auto;
  /* padding vertical généreux : overflow-x:auto découpe aussi l'axe Y (impossible de
     libérer un seul axe en CSS), donc il faut la place pour que le zoom + le
     soulèvement + le halo vert au survol ne soient jamais rognés en haut/bas.
     Calcul : +6% de la hauteur de carte (scale 1.06) + 10px (soulèvement) + ~50px (halo) */
  padding:76px 20px 64px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  scroll-behavior:smooth;
  /* on cache la barre de défilement native, remplacée par les flèches + points ci-dessous */
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* léger fondu sur les bords pour indiquer qu'il y a plus de contenu */
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.screenshots-row::-webkit-scrollbar{display:none;height:0;}
.screenshots-row.is-dragging{cursor:grabbing;scroll-behavior:auto;}
.shot-card{
  flex:0 0 auto;
  width:min(230px,68vw);
  scroll-snap-align:center;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  background:var(--bg-panel-alt);
  border:2px solid transparent;
  outline:none;
  cursor:pointer;
  /* couche de composition dédiée : évite un bug de rendu (Safari notamment) où le
     cadre arrondi "décroche" de l'image pendant l'animation de transform */
  will-change:transform;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s ease, border-color .25s ease, opacity .3s ease, filter .3s ease;
}
.shot-card img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none;}

/* au survol de la galerie : les autres captures s'estompent légèrement pour mettre en avant celle ciblée */
.screenshots-row:hover .shot-card{opacity:.5;filter:saturate(.65);}

.shot-card:hover,
.shot-card:focus-visible,
.shot-card:active{
  opacity:1 !important;
  filter:none;
  transform:translateZ(0) scale(1.06) translateY(-10px);
  border-color:var(--arcade-glow);
  z-index:5;
  animation:arcadePulse 1.3s ease-in-out infinite;
}
@keyframes arcadePulse{
  0%,100%{box-shadow:0 0 0 3px rgba(57,255,136,.3), 0 0 26px rgba(57,255,136,.55), 0 22px 50px rgba(0,0,0,.6);}
  50%{box-shadow:0 0 0 4px rgba(57,255,136,.5), 0 0 46px rgba(57,255,136,.85), 0 22px 50px rgba(0,0,0,.6);}
}
@media (prefers-reduced-motion: reduce){
  .shot-card:hover,.shot-card:focus-visible,.shot-card:active{animation:none;box-shadow:0 0 0 3px rgba(57,255,136,.4), 0 0 30px rgba(57,255,136,.6);}
}

.shots-arrow{
  position:absolute;top:50%;translate:0 -50%;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(9,12,22,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15);
  color:var(--ink);
  cursor:pointer;
  z-index:3;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.shots-arrow svg{width:20px;height:20px;}
.shots-arrow:hover{background:var(--blue-panache);border-color:var(--blue-panache);transform:translateY(-50%) scale(1.08);}
.shots-arrow--prev{left:-6px;}
.shots-arrow--next{right:-6px;}
@media (max-width:700px){
  .shots-arrow{display:none;} /* sur mobile le swipe tactile suffit */
}

.shots-dots{display:flex;justify-content:center;gap:8px;margin-top:4px;}
.shots-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.18);
  border:0;padding:0;cursor:pointer;
  transition:background .2s ease, transform .2s ease, width .2s ease;
}
.shots-dot.is-active{background:var(--gold-royal);width:22px;border-radius:5px;}

/* =================== PASS ROYAL =================== */
.pass-section{
  background:radial-gradient(ellipse at 50% 0%, rgba(232,185,35,.12), transparent 60%), var(--bg-void);
}
.pass-card{
  max-width:520px;margin:0 auto;text-align:center;
  background:var(--bg-panel);
  border:1px solid rgba(232,185,35,.35);
  border-radius:24px;
  padding:48px 34px;
  box-shadow:0 0 60px rgba(232,185,35,.08);
}
.pass-card h2{color:var(--gold-royal);}
.pass-price{font-family:var(--font-hud);font-size:1.6rem;color:var(--ink);margin-bottom:24px;}
.pass-list{text-align:left;max-width:360px;margin:0 auto 30px;}
.pass-list li{
  position:relative;padding-left:26px;margin-bottom:14px;color:var(--ink);font-size:.95rem;
}
.pass-list li::before{
  content:'✓';position:absolute;left:0;top:0;color:var(--gold-royal);font-weight:800;
}
.btn{
  display:inline-block;padding:13px 28px;border-radius:12px;font-weight:800;
  transition:transform .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn--gold{background:var(--gold-royal);color:#20180a;}
.btn--blue{background:var(--blue-panache);color:#fff;border:0;cursor:pointer;font-family:var(--font-body);font-size:1rem;}

/* =================== CONTACT =================== */
.contact-email{font-family:var(--font-body);font-weight:800;font-size:1.35rem;letter-spacing:.2px;margin-top:16px;}
.contact-email a{color:var(--blue-panache);border-bottom:2px solid rgba(47,92,255,.4);padding-bottom:2px;transition:border-color .2s;}
.contact-email a:hover{border-color:var(--blue-panache);}
.contact-form{max-width:520px;margin:0 auto;display:grid;gap:16px;}
.hidden-field{position:absolute;left:-9999px;}
.field{display:grid;gap:6px;text-align:left;}
.field label{font-size:.82rem;color:var(--mist);}
.field input,.field select,.field textarea{
  background:var(--bg-panel);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:12px 14px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue-panache);outline-offset:1px;}
.contact-form .btn--blue{justify-self:start;}

/* =================== FOOTER =================== */
.site-footer{
  padding:40px 24px 60px;text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-logo{width:38px;height:38px;border-radius:9px;margin:0 auto 14px;}
.site-footer nav a{color:var(--mist);font-size:.85rem;}
.site-footer nav a:hover{color:var(--ink);}
.footer-copy{font-size:.78rem;color:var(--mist);opacity:.7;margin-top:10px;}

/* =================== REVEAL AU SCROLL =================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal--delay-1.is-visible{transition-delay:.1s;}
.reveal--delay-2.is-visible{transition-delay:.2s;}
.reveal--delay-3.is-visible{transition-delay:.3s;}

/* =================== PRIVACY PAGE =================== */
.legal{padding:120px 24px 80px;max-width:760px;margin:0 auto;}
.legal h1{font-size:2.2rem;margin-bottom:6px;}
.legal .updated{font-family:var(--font-hud);font-size:.8rem;color:var(--mist);margin-bottom:40px;}
.legal h2{font-family:var(--font-body);font-weight:800;font-size:1.2rem;color:var(--ink);margin-top:36px;}
.legal h3{font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--ink);margin-top:22px;}
.legal p,.legal li{color:var(--mist);font-size:.95rem;}
.legal strong{color:var(--ink);}
.legal ul{padding-left:20px;list-style:disc;}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.86rem;}
.legal th,.legal td{border:1px solid rgba(255,255,255,.12);padding:9px 11px;text-align:left;}
.legal th{color:var(--ink);background:rgba(255,255,255,.04);font-weight:700;}
.legal td{color:var(--mist);}
.legal .legal-links{margin-top:40px;font-size:.85rem;}
.legal .todo{
  background:rgba(226,59,59,.1);
  border:1px solid rgba(226,59,59,.35);
  color:#ffb4b4;
  padding:10px 14px;border-radius:10px;font-size:.85rem;margin:12px 0;
}
.legal .back-link{display:inline-block;margin-bottom:30px;color:var(--blue-panache);font-size:.9rem;}