/* ============================================================
   LARSEN KOLLEKTIV — style.css
   Rouge / noir. Brut, mécanique, underground.
   ============================================================ */

:root{
  /* --- NOIRS --- */
  --ink:      #050505;
  --ink-2:    #0a0908;
  --panel:    #0e0d0d;
  --panel-2:  #141212;
  --line:     #2a1616;
  --line-hot: #4a1616;

  /* --- ROUGE : la signature --- */
  --red:      #e31616;
  --red-hot:  #ff2929;
  --red-deep: #8c0d0d;
  --red-ash:  #5c1010;

  /* --- TEXTE : os / cendre --- */
  --bone:     #f2efe9;
  --ash:      #a09892;
  --dim:      #6e6560;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --disp: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

::selection{ background:var(--red); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--red-ash); border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   FONDS ANIMÉS — 3 couches fixes, sous tout le contenu
   ============================================================ */
.bg-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; }

/* 1. lueur rouge qui respire */
.bg-glow{
  background:
    radial-gradient(62vw 55vh at 16% -8%,  rgba(227,22,22,.26), transparent 66%),
    radial-gradient(54vw 50vh at 90% 110%, rgba(140,13,13,.30), transparent 68%);
  animation:breathe 13s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.12); }
}

/* 2. scanlines + quadrillage technique */
.bg-grid{
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(227,22,22,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,22,22,.05) 1px, transparent 1px);
  background-size:100% 3px, 68px 68px, 68px 68px;
  animation:drift 26s linear infinite;
}
@keyframes drift{ to{ background-position:0 3px, 0 68px, 68px 0; } }

/* 3. grain */
.bg-grain{
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(2) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 50%{ transform:translate(-3%,2%); } 100%{ transform:translate(2%,-2%); }
}

/* barre rouge de progression de scroll */
#scroll-bar{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--red-deep),var(--red-hot));
  box-shadow:0 0 14px var(--red);
  z-index:200; pointer-events:none;
}

/* Profondeur — la mascotte doit pouvoir passer DEVANT et DERRIÈRE.
   Les sections gardent position:relative mais PAS de z-index : sinon
   elles enfermeraient leurs cartes dans leur propre contexte
   d'empilement et la mascotte ne pourrait plus s'intercaler. */
section, footer.site{ position:relative; }
.ticker{ position:relative; z-index:6; }
.card{ z-index:4; }
.wall-wrap{ position:relative; z-index:2; }

.wrap{ max-width:1060px; margin:0 auto; padding:0 26px; }

/* ============================================================
   LIENS
   ============================================================ */
a{ color:var(--red-hot); text-decoration:none; transition:color .18s; }
a:hover{ color:#fff; }

/* soulignement qui se déploie */
.prose a, .section-sub a, .card p a{
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s var(--ease), color .18s;
}
.prose a:hover, .section-sub a:hover, .card p a:hover{ background-size:100% 1px; }

/* ============================================================
   HEADER
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(10px) saturate(140%);
}
header.site::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  opacity:.75; animation:sweep 7s linear infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); }
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; flex-wrap:wrap; gap:12px;
}

.logo{
  font-family:var(--mono); font-weight:800; font-size:1.05rem;
  letter-spacing:.04em; color:var(--bone); position:relative;
}
.logo .dot{ color:var(--red); }
.logo:hover{ color:var(--bone); }
.logo:hover .dot{ animation:blink .45s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

nav.main{ display:flex; gap:6px; font-family:var(--mono); font-size:.78rem; flex-wrap:wrap; }
nav.main a{
  color:var(--ash); text-transform:uppercase; letter-spacing:.1em;
  padding:7px 12px; position:relative; overflow:hidden;
}
nav.main a::before{
  content:""; position:absolute; inset:auto 0 0 0; height:100%;
  background:var(--red); transform:translateY(101%);
  transition:transform .28s var(--ease); z-index:-1;
}
nav.main a:hover{ color:#fff; }
nav.main a:hover::before{ transform:translateY(0); }
nav.main a.active{ color:var(--bone); }
nav.main a.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--red); box-shadow:0 0 10px var(--red);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:96px 0 68px; border-bottom:1px solid var(--line); }

.hero .kicker{
  display:inline-block; font-family:var(--mono); color:var(--red-hot);
  text-transform:uppercase; letter-spacing:.24em; font-size:.72rem;
  margin-bottom:22px; padding:5px 11px;
  border:1px solid var(--line-hot); background:rgba(227,22,22,.07);
}
.hero .kicker::before{ content:"■ "; color:var(--red); animation:blink 1.6s steps(2) infinite; }

.hero h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.4rem,7vw,5rem); line-height:.94;
  text-transform:uppercase; letter-spacing:.005em;
  margin:0 0 24px; color:var(--bone);
  position:relative;
}
/* décalage rouge permanent + glitch au survol
   (text-shadow plutôt qu'un calque attr() : ça suit les <br>) */
.hero h1, .radio-word{
  text-shadow:-3px 0 rgba(227,22,22,.85), 3px 0 rgba(140,13,13,.55);
  transition:text-shadow .18s;
}
.hero h1:hover, .radio-word:hover{ animation:glitch .28s steps(2) infinite; }
@keyframes glitch{
  0%  { text-shadow:-3px 0 rgba(227,22,22,.85),  3px 0 rgba(140,13,13,.55); transform:translate(0,0); }
  50% { text-shadow:-9px 2px rgba(255,41,41,.95), 7px -2px rgba(140,13,13,.75); transform:translate(2px,-1px); }
  100%{ text-shadow:-4px -2px rgba(227,22,22,.9), 5px 2px rgba(140,13,13,.6);  transform:translate(-1px,1px); }
}

.hero p.lead{ max-width:600px; color:var(--ash); font-size:1.06rem; }
.hero .cta-row{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  --b:var(--red);
  display:inline-block; position:relative; overflow:hidden;
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  padding:14px 26px; border:1px solid var(--b); color:var(--bone);
  background:transparent; cursor:pointer;
  transition:color .25s, border-color .25s, box-shadow .25s, transform .12s;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--b);
  transform:scaleX(0); transform-origin:left; transition:transform .34s var(--ease);
}
.btn:hover{ color:#fff; box-shadow:0 0 26px rgba(227,22,22,.42); }
.btn:hover::before{ transform:scaleX(1); }
.btn:active{ transform:translateY(2px) scale(.985); }

.btn.solid{ background:var(--red); border-color:var(--red); color:#fff; font-weight:800; }
.btn.solid::before{ background:#fff; }
.btn.solid:hover{ color:var(--ink); }

.btn.ghost{ --b:var(--line-hot); color:var(--ash); }
.btn.ghost:hover{ --b:var(--red); color:#fff; }

/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--red); overflow:hidden; padding:9px 0;
}
.ticker-track{ display:flex; width:max-content; animation:roll 26s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{
  font-family:var(--mono); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; color:#fff;
  padding:0 26px; white-space:nowrap;
}
@keyframes roll{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ padding:76px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }

section h2{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.86rem; color:var(--red-hot); margin:0 0 10px;
  display:flex; align-items:center; gap:12px;
}
section h2::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-hot),transparent);
}
section .section-sub{ color:var(--ash); margin:0 0 40px; max-width:660px; }

/* ============================================================
   CARTES
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:20px; }

.card{
  position:relative; isolation:isolate;
  border:1px solid var(--line); background:var(--panel);
  padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
/* halo qui suit la souris */
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(227,22,22,.16), transparent 62%);
  transition:opacity .3s;
}
/* coin rouge */
.card::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 22px 22px 0;
  border-color:transparent var(--line-hot) transparent transparent;
  transition:border-color .3s;
}
.card:hover{ border-color:var(--red); transform:translateY(-6px); box-shadow:0 18px 44px rgba(0,0,0,.6); }
.card:hover::before{ opacity:1; }
.card:hover::after{ border-right-color:var(--red); }

.card h3{ margin:0; font-family:var(--disp); font-weight:400; font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; }
.card p{ margin:0; color:var(--ash); font-size:.94rem; }
.card .meta{
  font-family:var(--mono); font-size:.7rem; color:var(--dim);
  text-transform:uppercase; letter-spacing:.13em;
}
.card .actions{ margin-top:auto; padding-top:12px; }

/* secousse quand la mascotte percute une carte */
.card.hit{ animation:hit .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes hit{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-7px,3px) rotate(-.6deg); }
  40%{ transform:translate(6px,-3px) rotate(.5deg); }
  60%{ transform:translate(-4px,2px); }
  80%{ transform:translate(3px,-1px); }
}

/* badges */
.badge{
  display:inline-block; width:fit-content;
  font-family:var(--mono); font-size:.63rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  padding:4px 9px; border:1px solid var(--red);
  color:#fff; background:var(--red);
}
.badge::before{ content:"● "; }
.badge.soon{
  background:transparent; color:var(--ash);
  border-color:var(--line-hot); border-style:dashed;
}
.badge.soon::before{ content:"○ "; color:var(--red); }

/* ============================================================
   TEXTE
   ============================================================ */
.prose{ max-width:700px; color:var(--ash); }
.prose strong{ color:var(--bone); }
.prose p+p{ margin-top:14px; }
.prose ul{ padding-left:0; list-style:none; }
.prose li{ padding-left:20px; position:relative; margin-bottom:7px; }
.prose li::before{ content:"▸"; position:absolute; left:0; color:var(--red); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-list{ list-style:none; padding:0; margin:0; font-family:var(--mono); }
.contact-list li{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding:18px 12px;
  flex-wrap:wrap; gap:8px; position:relative;
  transition:background .25s, padding-left .25s var(--ease);
}
.contact-list li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s var(--ease);
}
.contact-list li:hover{ background:var(--panel); padding-left:22px; }
.contact-list li:hover::before{ transform:scaleY(1); }
.contact-list .label{ color:var(--dim); text-transform:uppercase; font-size:.7rem; letter-spacing:.13em; }
.contact-list a{ font-size:1rem; }

/* ============================================================
   RADIO
   ============================================================ */
.radio-stage{ text-align:center; padding:30px 0 10px; }
.radio-word{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(3rem,13vw,9rem); line-height:.86; color:var(--bone); margin:0;
}
.radio-soon{
  font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(1.6rem,6vw,3.4rem); line-height:1; margin:6px 0 0;
  color:var(--red); text-shadow:0 0 34px rgba(227,22,22,.6);
  animation:pulse-soon 2.6s ease-in-out infinite;
}
@keyframes pulse-soon{ 50%{ opacity:.42; } }

/* barres d'égaliseur */
.eq{ display:flex; align-items:flex-end; justify-content:center; gap:5px; height:76px; margin:38px 0 8px; }
.eq i{ width:6px; background:linear-gradient(180deg,var(--red-hot),var(--red-deep)); animation:eqb 1.1s ease-in-out infinite; }
@keyframes eqb{ 0%,100%{ height:12%; } 50%{ height:100%; } }

/* ============================================================
   FORMULAIRES (radio + newsletter)
   ============================================================ */
.lk-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.lk-form input[type=email]{
  flex:1; min-width:230px;
  background:var(--ink-2); border:1px solid var(--line);
  color:var(--bone); font-family:var(--mono); font-size:.86rem;
  padding:14px 16px; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.lk-form input[type=email]::placeholder{ color:var(--dim); }
.lk-form input[type=email]:focus{
  border-color:var(--red); background:var(--panel);
  box-shadow:0 0 0 3px rgba(227,22,22,.16);
}
.lk-note{ font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-top:12px; letter-spacing:.05em; }
.lk-ok{
  margin-top:16px; padding:16px; border:1px solid var(--red);
  background:rgba(227,22,22,.09); font-family:var(--mono); font-size:.84rem;
}
.lk-ok b{ color:var(--red-hot); letter-spacing:.14em; font-size:1.05rem; }

/* ============================================================
   POPUP NEWSLETTER
   ============================================================ */
#lk-pop{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,3,3,.82); backdrop-filter:blur(7px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
#lk-pop.on{ opacity:1; visibility:visible; }
#lk-pop .box{
  position:relative; width:min(470px,100%);
  background:var(--panel); border:1px solid var(--red);
  padding:38px 32px 32px;
  box-shadow:0 0 0 1px rgba(227,22,22,.2), 0 34px 90px rgba(0,0,0,.85);
  transform:translateY(26px) scale(.96); transition:transform .45s var(--ease);
}
#lk-pop.on .box{ transform:none; }
#lk-pop .box::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red-deep),var(--red-hot),var(--red-deep));
}
#lk-pop h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:2rem; line-height:.95; margin:0 0 8px; color:var(--bone);
}
#lk-pop .tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--red-hot); margin-bottom:14px;
}
#lk-pop p{ color:var(--ash); font-size:.92rem; margin:0 0 18px; }
#lk-pop .x{
  position:absolute; top:10px; right:12px;
  background:none; border:none; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:1.2rem; line-height:1; padding:6px;
  transition:color .2s, transform .2s;
}
#lk-pop .x:hover{ color:var(--red-hot); transform:rotate(90deg); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  padding:44px 0 70px; color:var(--dim);
  font-family:var(--mono); font-size:.74rem;
  border-top:1px solid var(--line);
}
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer.site a{ color:var(--ash); }
footer.site a:hover{ color:var(--red-hot); }

/* ============================================================
   RÉVÉLATIONS AU SCROLL
   ============================================================ */
[data-rv]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-rv].in{ opacity:1; transform:none; }
[data-rv="l"]{ transform:translateX(-34px); }
[data-rv="l"].in{ transform:none; }
[data-rv="s"]{ transform:scale(.94); }
[data-rv="s"].in{ transform:none; }

/* ============================================================
   TRANSITION DE PAGE
   ============================================================ */
#lk-wipe{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
}
#lk-wipe.out{ transform:scaleY(1); transform-origin:bottom; transition:transform .42s var(--ease); }
#lk-wipe.in{ transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease); }
body{ animation:fade-in .55s ease both; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   MASCOTTE + PROJECTILES
   ============================================================ */
/* ============================================================
   MASCOTTE — trois plans de profondeur
   Le dessin n'est jamais recoloré : son apparence d'origine prime.
   Seules la taille, l'ombre et la luminosité changent avec la
   distance, comme pour n'importe quel objet qui s'éloigne.
   ============================================================ */
#lk-whale{
  position:fixed; left:0; top:0; z-index:60;
  width:132px; line-height:0;
  transform-origin:center center;
  will-change:transform; pointer-events:none;
  transition:filter .6s ease;
}
#lk-whale img{ width:100%; height:auto; display:block; pointer-events:auto; cursor:grab; user-select:none; -webkit-user-drag:none; }
#lk-whale.grabbed img{ cursor:grabbing; }

/* au fond : derrière les cartes et les caissons, assombrie et floutée */
#lk-whale.far{
  z-index:3;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.85)) brightness(.58) saturate(.75) blur(.4px);
}
/* plan intermédiaire : devant les cartes, derrière le bandeau et le header */
#lk-whale.mid{
  z-index:5;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.8)) brightness(.82);
}
/* premier plan : devant tout le contenu, sauf le header et les popups */
#lk-whale.near{
  z-index:60;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.75));
}
#lk-whale.gone{ transition:opacity .34s, transform .34s cubic-bezier(.6,0,.9,.4); opacity:0; }

/* le matos qu'elle transporte : il suit son plan de profondeur,
   sinon un vinyle flotterait devant le contenu pendant qu'elle est au fond */
#lk-gear{
  position:fixed; left:0; top:0; z-index:59;
  transform-origin:center center;
  pointer-events:none; opacity:0; line-height:0;
  transition:opacity .3s; will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));
}
#lk-gear.far{ z-index:2; filter:brightness(.58) saturate(.75); }
#lk-gear.mid{ z-index:4; filter:brightness(.82); }
#lk-gear.near{ z-index:59; }

.lk-bubble{
  position:fixed; z-index:96; pointer-events:none;
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  background:var(--red); color:#fff; padding:6px 10px; white-space:nowrap;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .2s, transform .35s var(--ease);
}
.lk-bubble.on{ opacity:1; transform:translate(-50%,-50%) translateY(-9px); }
.lk-bubble::after{
  content:""; position:absolute; left:50%; bottom:-5px; margin-left:-5px;
  border:5px solid transparent; border-top-color:var(--red); border-bottom:0;
}

.lk-shard{ position:fixed; left:0; top:0; z-index:94; pointer-events:none;
  font-family:var(--mono); font-weight:700; will-change:transform; }
.lk-bubble-dot{
  position:fixed; left:0; top:0; z-index:94; pointer-events:none;
  border-radius:50%; border:2px solid rgba(227,22,22,.75); background:rgba(227,22,22,.12);
  will-change:transform;
}
#lk-trail{ position:fixed; inset:0; z-index:2; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  #lk-whale, #lk-trail{ display:none; }
  .mb, .stack, .cable, .wall-glow{ animation:none !important; }
}

/* ============================================================
   La mascotte ne doit JAMAIS bloquer un bouton ou un lien :
   seul le dessin lui-même capte le pointeur, pas son cadre.
   ============================================================ */

/* cartes produit entièrement cliquables */
.card.has-link{ cursor:pointer; }
.card-link{ color:inherit; }
.card-link:hover{ color:var(--red-hot); }
.card.has-link:hover .card-link{ color:var(--red-hot); }

/* ============================================================
   MUR DE SON — caissons, membranes, câbles
   ============================================================ */
.cab-box   { fill:#151211; stroke:#000; stroke-width:3.5; }
.cab-in    { fill:#1d1918; stroke:#3d2020; stroke-width:2.2; }
.cab-corner{ fill:#3d2020; stroke:#000; stroke-width:1.5; }
.cab-grip  { fill:#4d2828; }
.cab-ring  { fill:none; stroke:#6b2a2a; stroke-width:3.5; }
.cab-dust  { fill:#e31616; }
.cab-screw { fill:#5a2626; }
.cab-horn  { fill:#241f1e; stroke:#6b2a2a; stroke-width:2.8; }
.cab-horn-l{ stroke:#6b2a2a; stroke-width:2.2; }
.cab-tw    { fill:#241f1e; stroke:#6b2a2a; stroke-width:2.2; }
.cab-mesh  { fill:none; stroke:rgba(227,22,22,.14); stroke-width:1; stroke-dasharray:2 4; }

/* membranes : elles pompent */
.mb{
  fill:#262120; stroke:#6b2a2a; stroke-width:3;
  transform-box:fill-box; transform-origin:center;
  animation:pump 1.05s cubic-bezier(.3,0,.2,1) infinite;
}
.cab-dust.mb{ fill:#e31616; stroke:none; }
.cab-tw.mb  { animation-duration:.42s; }
@keyframes pump{
  0%,100%{ transform:scale(1); }
  38%    { transform:scale(1.085); }
  60%    { transform:scale(.965); }
}

/* les piles tremblent, chacune à son rythme */
.stack{
  transform-box:fill-box; transform-origin:bottom center;
  animation:rumble 1.05s ease-in-out infinite;
}
.stack:nth-of-type(2){ animation-delay:-.35s; }
.stack:nth-of-type(3){ animation-delay:-.7s; }
@keyframes rumble{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  38%    { transform:translate(calc(var(--sway,1) * .9px), -1.4px) rotate(calc(var(--sway,1) * .09deg)); }
  70%    { transform:translate(calc(var(--sway,1) * -.6px), .7px); }
}

/* câbles qui pendouillent */
.cable{
  fill:none; stroke:#3d2020; stroke-width:5.5; stroke-linecap:round;
  transform-box:fill-box; transform-origin:top center;
  animation:cable-sway 3.4s ease-in-out infinite;
}
.cable.c2{ animation-duration:4.1s; animation-delay:-.7s; }
.cable.c3{ animation-duration:3.8s; animation-delay:-1.4s; }
.cable.c4{ animation-duration:4.4s; animation-delay:-.4s; }
.cable.c5{ animation-duration:3.1s; animation-delay:-2s; }
.cable.c6{ animation-duration:4.7s; animation-delay:-1.1s; }
@keyframes cable-sway{
  0%,100%{ transform:rotate(-1.1deg); }
  50%    { transform:rotate(1.4deg); }
}

.straps rect{ fill:#3d2020; stroke:#000; stroke-width:1.5; }
.wall-floor{ fill:#2a1414; }

/* le mur encaisse quand la mascotte lui rentre dedans */
.wall-wrap.boom .stack{ animation:boom .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes boom{
  0%,100%{ transform:translate(0,0); }
  20%    { transform:translate(-5px,3px) rotate(-.5deg); }
  50%    { transform:translate(4px,-3px) rotate(.4deg); }
  75%    { transform:translate(-2px,1px); }
}

@media (prefers-reduced-motion:reduce){
  .mb, .stack, .cable, .wall-glow{ animation:none !important; }
  #lk-whale, #lk-trail, #lk-gear{ display:none !important; }
}