/* ══════════════════════════════════════════
   BAD KING TATTOO — BK3D (styles)
   S'appuie sur les variables de style.css (--gold, --cream, --raw, --serif…).
   ══════════════════════════════════════════ */

/* ── section standard qui accueille une scène ── */
.bk3d-sec{max-width:1000px;margin:0 auto;padding:70px 20px}
.bk3d-sec .bk3d-lead{
  font-family:var(--body,serif);font-style:italic;font-size:1.15rem;
  color:var(--cream-50,rgba(237,229,204,.6));max-width:640px;margin:14px 0 26px}
.bk3d-note{
  font-family:var(--raw,monospace);font-size:.72rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--cream-50,rgba(237,229,204,.5));
  margin-top:14px}

/* ── le bloc scène ── */
[data-bk3d]{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:#070503;border:1px solid var(--gold-line,rgba(212,168,37,.12));
  box-shadow:0 0 60px rgba(0,0,0,.6) inset}
@media (max-width:640px){[data-bk3d]{aspect-ratio:4/5}}
.bk3d-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.bk3d-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .8s ease;z-index:1;pointer-events:none}
[data-bk3d].bk3d-ready .bk3d-poster{opacity:0}
[data-bk3d].bk3d-static .bk3d-poster{opacity:1}
[data-bk3d].bk3d-static .bk3d-cap{display:none}

/* pastille « jouable » sur le poster */
[data-bk3d]:not(.bk3d-ready):not(.bk3d-static)::before{
  content:'▶ animation';position:absolute;z-index:2;right:12px;top:12px;
  font-family:var(--raw,monospace);font-size:.62rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold,#d4a825);
  border:1px solid var(--gold-line,rgba(212,168,37,.25));
  padding:6px 10px;background:rgba(8,5,3,.6)}

/* spinner pendant le chargement des libs */
.bk3d-loading::after{
  content:'';position:absolute;z-index:3;left:50%;top:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;
  border:2px solid rgba(212,168,37,.2);border-top-color:var(--gold,#d4a825);
  animation:bk3dspin .8s linear infinite}
@keyframes bk3dspin{to{transform:rotate(360deg)}}

/* légende de scène */
.bk3d-cap{
  position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%) translateY(6px);
  max-width:92%;text-align:center;
  font-family:var(--raw,monospace);font-size:.66rem;letter-spacing:2.5px;
  text-transform:uppercase;line-height:1.8;color:var(--cream,#ede5cc);
  background:rgba(8,5,3,.62);border:1px solid rgba(212,168,37,.22);
  padding:7px 14px;opacity:0;transition:opacity .45s ease,transform .45s ease;
  pointer-events:none}
.bk3d-cap.on{opacity:.95;transform:translateX(-50%) translateY(0)}
.bk3d-cap em{font-style:normal;color:var(--gold-hot,#f5d442)}

/* ── HERO : variante 14 — le néon 3D sur les vraies couches du logo ── */
.glitch-box{position:relative}
#bkNeonStage{position:absolute;inset:-10% -8%;display:none;background:transparent;
  border:none;box-shadow:none;aspect-ratio:auto;z-index:3}
#bkNeonStage .bk3d-cap{bottom:-4px;background:rgba(8,5,3,.5);font-size:.6rem}
@media (prefers-reduced-motion: no-preference){
  .glitch-box.av-14{background-image:none!important}
  .glitch-box.av-14 #bkNeonStage{display:block}
  .glitch-box.av-14 .hero-logo{opacity:0!important;animation:none!important}
  .glitch-box.av-14 .logo-shock{display:none}
}

/* ── bouton « mode tatouage » ── */
.bk3d-arm{
  display:inline-block;margin-top:16px;padding:12px 22px;
  font-family:var(--raw,monospace);font-size:.72rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold,#d4a825);background:transparent;
  border:2px solid var(--gold-line,rgba(212,168,37,.25));cursor:pointer;
  transition:all .3s cubic-bezier(.22,1,.36,1)}
.bk3d-arm:hover{background:var(--gold,#d4a825);color:#0c0c0c;border-color:var(--gold,#d4a825)}
.bk3d-arm.is-on{background:var(--gold,#d4a825);color:#0c0c0c;border-color:var(--gold,#d4a825)}
@media (pointer:fine){.bk3d-arm{display:none}} /* inutile à la souris */

/* ── titres qui se tatouent ── */
.ink-title{
  font-family:var(--serif,serif);font-weight:600;letter-spacing:2px;
  font-size:clamp(1.5rem,3.2vw,2.2rem);color:var(--cream,#ede5cc);
  position:relative;display:inline-block;
}
.ink-title.is-inked{animation:inkReveal 1.1s cubic-bezier(.65,0,.35,1) both}
@keyframes inkReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
.ink-title::after{
  content:'';position:absolute;left:0;bottom:-8px;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold,#d4a825),transparent);
}
.ink-title.is-inked::after{animation:inkLine 1.1s .15s cubic-bezier(.65,0,.35,1) forwards}
@keyframes inkLine{to{width:100%}}

/* ── buzz dermographe sur les CTA ── */
.bk-buzz:hover,.bk-buzz:focus-visible{animation:bkBuzz .28s linear}
@keyframes bkBuzz{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(.6px,-.6px)}40%{transform:translate(-.7px,.4px)}
  60%{transform:translate(.5px,.6px)}80%{transform:translate(-.5px,-.4px)}}

/* ── papillon des horaires ── */
.bk-moth{position:relative;display:inline-block;width:1em;height:1em;vertical-align:middle}
.bk-moth-dot{
  position:absolute;left:6px;top:-2px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#ffeec0 0%,rgba(255,238,192,.15) 70%,transparent 75%);
  box-shadow:0 0 8px 2px rgba(255,222,150,.5);cursor:pointer;opacity:0;
  transition:box-shadow .2s}
.bk-moth-dot:hover{box-shadow:0 0 12px 4px rgba(255,222,150,.8)}
.bk-moth-dot.zap{animation:bkZap .25s ease-out}
@keyframes bkZap{
  0%{box-shadow:0 0 4px 2px rgba(255,255,255,.9),0 0 30px 12px rgba(255,238,192,.9)}
  100%{box-shadow:0 0 8px 2px rgba(255,222,150,.5)}}

/* ── accessibilité mouvement réduit ── */
@media (prefers-reduced-motion: reduce){
  .ink-title.is-inked{animation:none}
  .ink-title::after{width:100%}
  .bk-buzz:hover{animation:none}
  .bk-moth-dot{display:none}
  .bk3d-cap{transition:none}
}

/* ── ligne d'encre du scroll ── */
.bk-scrollink{position:fixed;left:0;top:0;width:2px;height:0;z-index:60;pointer-events:none;
  background:linear-gradient(180deg,var(--gold,#d4a825) 70%,transparent);
  box-shadow:0 0 8px rgba(212,168,37,.45)}
@media (prefers-reduced-motion: reduce){.bk-scrollink{display:none}}

/* ── hero vivant ── */
.anim-fader-dice{appearance:none;background:transparent;border:1px solid rgba(212,168,37,.35);
  color:var(--gold,#d4a825);font-size:.95rem;line-height:1;padding:4px 7px;cursor:pointer;
  border-radius:2px;transition:background .25s,color .25s}
.anim-fader-dice:hover{background:var(--gold,#d4a825);color:#0c0c0c}
.anim-fader-dice.spin{animation:bkDice .45s ease}
@keyframes bkDice{50%{transform:rotate(180deg) scale(1.25)}100%{transform:rotate(360deg)}}

.hero-logo{cursor:pointer}
.hero-splat{cursor:pointer;pointer-events:auto;transition:filter .2s}
.hero-splat:hover{filter:brightness(1.4) drop-shadow(0 0 16px rgba(212,168,37,.55))}

.bk-glint{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.bk-glint::before{content:'';position:absolute;top:-20%;bottom:-20%;left:-30%;width:18%;
  background:linear-gradient(105deg,transparent,rgba(255,240,200,.55),transparent);
  transform:skewX(-18deg);animation:bkGlint 8s ease-in-out 4s infinite;mix-blend-mode:screen}
@keyframes bkGlint{0%,12%{left:-30%}22%,100%{left:130%}}
.glitch-box.av-14 .bk-glint{display:none}

@media (prefers-reduced-motion: reduce){
  .bk-glint,.anim-fader-dice{display:none}
  .hero-splat{cursor:default;pointer-events:none}
}

/* ── son + toast des variantes ── */
.bk-sound{position:fixed;left:14px;bottom:14px;z-index:70;width:40px;height:40px;
  display:grid;place-items:center;font-size:1.05rem;line-height:1;cursor:pointer;
  background:rgba(12,12,12,.75);color:var(--gold,#d4a825);
  border:1px solid rgba(212,168,37,.35);border-radius:50%;
  transition:background .25s,transform .25s;backdrop-filter:blur(2px)}
.bk-sound:hover{background:var(--gold,#d4a825);transform:scale(1.08)}
.bk-var-toast{position:fixed;left:14px;bottom:64px;z-index:70;
  font-family:var(--raw,monospace);font-size:.62rem;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--cream,#f5f1e8);
  background:rgba(12,12,12,.8);border:1px solid rgba(212,168,37,.3);
  padding:6px 11px;border-radius:2px;opacity:0;transform:translateY(6px);
  pointer-events:none;transition:opacity .35s,transform .35s}
.bk-var-toast.on{opacity:.95;transform:translateY(0);
  animation:bkToastOut .35s ease 1.9s forwards}
@keyframes bkToastOut{to{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){.bk-var-toast{display:none}}