/* =========================================================
   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; }
}

/* ---------- 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; }
.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); } }
@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; }
}