/* =========================================================
   Blowing Silence Down — page teaser v2
   DA : grunge, épurée — brouillard de scène, cendres,
   photo révélée à la lampe, logo BSD et typo Belanosima.
   Noir, gris du logo, bleu des projecteurs.
   ========================================================= */

@font-face {
  font-family: "Belanosima";
  src: url("../fonts/belanosima-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Belanosima";
  src: url("../fonts/belanosima-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Belanosima";
  src: url("../fonts/belanosima-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html:has(body.dots) { overflow-x: clip; }
.dots {
  --black: #0b0b0b;
  --grey: #d6d6d6;          /* gris du logo */
  --dim: #7a7a80;
  --stage: #2a40ff;         /* bleu des projecteurs */
  --font: "Belanosima", "Arial Narrow", system-ui, sans-serif;
  background: var(--black);
  color: var(--grey);
  font-family: var(--font);
  text-transform: uppercase;
  min-height: 100vh; min-height: 100svh;
  overflow-x: clip;
  cursor: crosshair;
}
.dots ::selection { background: var(--stage); color: #fff; }
.dots :focus-visible { outline: 1px dashed var(--grey); outline-offset: 4px; border-radius: 0; }
.dots .skip-link { background: var(--grey); color: var(--black); border-radius: 0; }

/* ---------- Calques de fond ---------- */
.dots canvas.layer { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#bg { z-index: 0; }
#fx { z-index: 1; pointer-events: none; }

.overlay { position: fixed; inset: 0; pointer-events: none; }

/* grain lourd */
.grain {
  z-index: 3; inset: -50%;
  opacity: .17; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .6s steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); }
  66% { transform: translate(3%, -2%); } 100% { transform: translate(0, 0); }
}

/* rayures de pellicule */
.scratches { z-index: 3; opacity: .45; }
.scratches i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(214, 214, 214, .35) 20%, rgba(214, 214, 214, .1) 60%, transparent);
  animation: scratch 1.7s steps(1) infinite;
}
.scratches i:nth-child(1) { left: 18%; animation-duration: 2.3s; }
.scratches i:nth-child(2) { left: 61%; animation-duration: 1.4s; animation-delay: -.6s; }
.scratches i:nth-child(3) { left: 83%; animation-duration: 3.1s; animation-delay: -1.2s; width: 2px; }
@keyframes scratch {
  0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; transform: translateX(-14px); }
  20% { opacity: 0; } 55% { opacity: .7; transform: translateX(22px); } 62% { opacity: 0; }
}

.scan {
  z-index: 3; opacity: .22;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px);
}
.vignette {
  z-index: 3;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 30%, rgba(0, 0, 0, .9) 100%);
}

/* coupure de courant au clic */
.blackout { z-index: 4; background: #000; opacity: 0; }
.blackout.is-on { animation: blackout .7s steps(1) 1; }
@keyframes blackout {
  0% { opacity: .95; } 10% { opacity: 0; } 18% { opacity: .85; } 30% { opacity: .2; } 38% { opacity: .9; } 55% { opacity: 0; }
}

/* ---------- Écran d'entrée ---------- */
/* sous le grain et les rayures (z 3), au-dessus de la brume : le décor vit déjà derrière */
.gate { display: none; }
.gated .gate, .gate.is-leaving {
  position: fixed; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 5vh, 48px);
  padding: 24px 16px;
  background: rgba(11, 11, 11, .62);
}
.gated .shell { visibility: hidden; }
.gated .shell .flick { animation: none; }
.gate-emblem { height: clamp(120px, 24vh, 230px); }

.gate-enter {
  position: relative; display: grid;
  padding: 10px 6px 14px; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.8rem, min(7vw, 9vh), 3.4rem); line-height: .9; letter-spacing: .22em;
  color: var(--grey);
  animation: gate-breathe 5s steps(1) infinite;
}
.gate-enter .cut { --cut: 58%; grid-area: 1 / 1; padding-left: .22em; filter: url(#rough); }
.gate-enter .cut-a { clip-path: polygon(0 0, calc(var(--cut) + 6%) 0, calc(var(--cut) - 6%) 100%, 0 100%); }
.gate-enter .cut-b {
  clip-path: polygon(calc(var(--cut) + 6%) 0, 100% 0, 100% 100%, calc(var(--cut) - 6%) 100%);
  transform: translate(.04em, -.07em);
}
/* trait bleu tranché, comme l'éclair du logo */
.gate-enter::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; background: var(--stage);
  transform: skewX(-30deg) scaleX(.25); transition: transform .25s;
}
.gate-enter:hover::after, .gate-enter:focus-visible::after { transform: skewX(-30deg) scaleX(1); }
.gate-enter:hover .cut-a, .gate-enter:focus-visible .cut-a { text-shadow: 4px 0 rgba(42, 64, 255, .85); animation: slide2 .3s steps(2) 1; }
.gate-enter:hover .cut-b, .gate-enter:focus-visible .cut-b { animation: slide .3s steps(2) 1; }
@keyframes gate-breathe {
  0%, 41%, 43%, 100% { opacity: 1; }
  42% { opacity: .35; }
}

.gate-mute {
  padding: 8px 4px; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: #55555c; transition: color .2s;
}
.gate-mute:hover, .gate-mute:focus-visible { color: var(--grey); }

/* sortie : flash d'éclair puis noir */
.gate.is-leaving { pointer-events: none; animation: gate-out .8s steps(1) forwards; }
.gate.is-leaving > * { visibility: hidden; }
@keyframes gate-out {
  0% { background: #d6d6d6; } 6% { background: #000; } 12% { background: rgba(160, 175, 255, .55); }
  20% { background: #000; } 34% { background: rgba(0, 0, 0, .6); } 50%, 100% { background: transparent; }
}

/* ---------- Mise en page : centrée, épurée ---------- */
.shell {
  position: relative; z-index: 5;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 20px clamp(16px, 4vw, 52px);
}

.topbar { display: flex; justify-content: flex-end; }

/* ---------- Onde des bribes du single : simple visualisation, rien à cliquer ---------- */
.snip-wave {
  position: relative;
  width: clamp(130px, 18vw, 200px); max-width: 100%; height: 68px;
  margin: clamp(22px, 4vh, 40px) 0 0;
  pointer-events: none;
}
.snip-wave canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .14;              /* au silence : onde presque éteinte (le JS gère l'allumage) */
}
.toplink {
  font-size: clamp(.78rem, 1.4vw, .88rem); font-weight: 600; letter-spacing: .2em;
  color: var(--dim); text-decoration: none; padding: 8px 2px; position: relative;
  transition: color .2s;
}
.toplink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--stage);
  transform: skewX(-30deg) scaleX(0); transform-origin: left; transition: transform .3s;
}
.toplink:hover { color: var(--grey); }
.toplink:hover::after { transform: skewX(-30deg) scaleX(1); }

.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(8px, 2vh, 24px) 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
}

/* le « S » seul, glitché : décalages RVB + tranches qui sautent */
.emblem {
  position: relative;
  height: clamp(110px, 20vh, 200px); aspect-ratio: 724 / 1284;
}
.emblem .s-base {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: url(#rough);
  animation: neon 7s infinite, s-jolt 4.3s steps(1) infinite;
}
.emblem .s-ghost {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url(../img/logo-s.png) center / contain no-repeat;
          mask: url(../img/logo-s.png) center / contain no-repeat;
}
.emblem .s-blue  { background: var(--stage); mix-blend-mode: screen; animation: s-split-a 4.3s steps(1) infinite; }
.emblem .s-grey  { background: var(--grey);  mix-blend-mode: screen; animation: s-split-b 4.3s steps(1) infinite; }
.emblem .s-slice { background: #fff; animation: s-slice 3.1s steps(1) infinite; }

@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: .92; }
  20%, 24%, 55% { opacity: .25; }
}
@keyframes s-jolt {
  0%, 61%, 66%, 100% { transform: none; }
  62% { transform: translate(-3px, 1px) skewX(-4deg); }
  64% { transform: translate(4px, -2px); clip-path: inset(0 0 12% 0); }
  65% { transform: translate(-1px, 0); }
}
@keyframes s-split-a {
  0%, 60%, 67%, 100% { opacity: 0; transform: none; clip-path: none; }
  61% { opacity: .85; transform: translate(-7px, 0);  clip-path: inset(8% 0 55% 0); }
  63% { opacity: .85; transform: translate(9px, 2px);  clip-path: inset(40% 0 22% 0); }
  65% { opacity: .7;  transform: translate(-4px, -1px); clip-path: inset(70% 0 4% 0); }
}
@keyframes s-split-b {
  0%, 60%, 67%, 100% { opacity: 0; transform: none; clip-path: none; }
  61% { opacity: .6; transform: translate(6px, -1px);  clip-path: inset(30% 0 40% 0); }
  64% { opacity: .6; transform: translate(-8px, 1px);  clip-path: inset(0 0 72% 0); }
  66% { opacity: .5; transform: translate(3px, 0);     clip-path: inset(55% 0 15% 0); }
}
@keyframes s-slice {
  0%, 27%, 30%, 82%, 85%, 100% { opacity: 0; transform: none; }
  28% { opacity: 1; transform: translateX(12px);  clip-path: inset(46% 0 49% 0); }
  29% { opacity: 1; transform: translateX(-9px);  clip-path: inset(18% 0 78% 0); }
  83% { opacity: 1; transform: translateX(-14px); clip-path: inset(62% 0 33% 0); }
  84% { opacity: 1; transform: translateX(6px);   clip-path: inset(30% 0 66% 0); }
}

/* clic : grosse décharge */
.emblem.is-zap .s-base { animation: none; opacity: 1; transform: translateX(-3px) skewX(-6deg); filter: url(#rough) drop-shadow(0 0 18px rgba(42, 64, 255, .9)); }
.emblem.is-zap .s-blue  { animation: none; opacity: .9; transform: translate(-10px, 2px); clip-path: inset(10% 0 35% 0); }
.emblem.is-zap .s-grey  { animation: none; opacity: .7; transform: translate(11px, -2px); clip-path: inset(45% 0 8% 0); }
.emblem.is-zap .s-slice { animation: none; opacity: 1;  transform: translateX(16px);      clip-path: inset(52% 0 42% 0); }

@media (prefers-reduced-motion: reduce) {
  .emblem .s-base { animation: none; }
  .emblem .s-ghost { animation: none; opacity: 0; }
}

.band {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 600; letter-spacing: .14em;
}

/* ---------- Date fendue par l'éclair ---------- */
.date {
  --cut: 64%;
  position: relative; margin: clamp(30px, 6vh, 64px) 0 0;
  display: grid;
  font-weight: 700; line-height: .85; letter-spacing: 0;
  font-size: clamp(2.2rem, min(8vw, 11vh), 5.5rem);
}
/* date en retrait, révélée au survol */
.date > .cut { opacity: .4; transition: opacity .35s ease; }
.date:hover > .cut { opacity: 1; }
.date .cut {
  grid-area: 1 / 1;
  display: flex; align-items: flex-end; gap: .08em;
  filter: url(#rough);
}
.date .cut-a { clip-path: polygon(0 0, calc(var(--cut) + 8%) 0, calc(var(--cut) - 8%) 100%, 0 100%); }
.date .cut-b {
  clip-path: polygon(calc(var(--cut) + 8%) 0, 100% 0, 100% 100%, calc(var(--cut) - 8%) 100%);
  transform: translate(.03em, -.06em);
}
.date .sep {
  flex: none; width: .12em; height: .1em; margin-bottom: .06em;
  background: var(--stage);
  clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
}
.date.is-glitch .cut-b { animation: slide .3s steps(2) 1; }
.date.is-glitch .cut-a { animation: slide2 .3s steps(2) 1; text-shadow: 5px 0 rgba(42, 64, 255, .8); }
@keyframes slide { 0% { transform: translate(.12em, -.14em); clip-path: inset(0 0 50% 40%); } 50% { transform: translate(-.04em, .02em); } 100% { transform: translate(.03em, -.06em); } }
/* indice au clic : la date laisse place à « W Y H » le temps d'un glitch */
.date { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.date .cut { justify-content: center; }
.date:not(.is-word) > .alt, .date.is-word > .cut:not(.alt) { visibility: hidden; }
.date.is-word > .cut { opacity: 1; }
@keyframes slide2 { 0% { transform: translate(-.05em, .04em); clip-path: inset(40% 30% 0 0); } 100% { transform: none; } }

.released-note { margin: clamp(18px, 3vh, 30px) 0 0; font-size: 1rem; font-weight: 600; letter-spacing: .24em; color: var(--stage); }


.footbar { display: flex; justify-content: center; }
.dots .socials { gap: 2px; justify-content: center; }
.dots .socials a {
  width: 38px; height: 38px; border-radius: 0; background: transparent; border: 0; color: #55555c;
}
.dots .socials a:hover { color: var(--grey); background: transparent; transform: none; }
.dots .socials .icon { width: 16px; height: 16px; }

/* entrée : apparition par à-coups */
.flick { opacity: 0; animation: flickIn 1.1s steps(1) forwards; }
.flick.d1 { animation-delay: .2s; } .flick.d2 { animation-delay: .45s; } .flick.d3 { animation-delay: .7s; }
.flick.d4 { animation-delay: .95s; } .flick.d5 { animation-delay: 1.2s; }
@keyframes flickIn {
  0% { opacity: 0; } 10% { opacity: .8; } 18% { opacity: 0; } 30% { opacity: 1; } 38% { opacity: .3; } 50%, 100% { opacity: 1; }
}

/* sorti */
.released .released-note { display: block; }

@media (max-width: 520px) {
  .band { letter-spacing: .1em; }
}

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