/* ═══════════════════════════════════════════════════════════
   FIGUEROA — INTRO TALADRO (perforación con scroll)
   Overlay de entrada que se quita al "perforar" la placa.
   Autocontenido: no depende de variables externas.
   Lo controla js/intro-taladro.js. Namespacing: tld- / #tld*
   ═══════════════════════════════════════════════════════════ */

#tldIntro{
  position:fixed; inset:0; z-index:9000; overflow:hidden;
  background:#080808; color:#F5F4F0;
  font-family:'Barlow',sans-serif;
  transition:opacity .5s ease;
}
#tldIntro.tld-hide{ opacity:0; pointer-events:none; }

/* ---------- animaciones ---------- */
@keyframes tld-helix { to { background-position:0 -26px; } }
@keyframes tld-shine { to { background-position:-22px 0; } }
@keyframes tld-shake {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-2px)} 60%{transform:translate(-2px,-3px)} 80%{transform:translate(2px,2px)}
}
@keyframes tld-cue { 0%,100%{transform:translate(-50%,0);opacity:.5} 50%{transform:translate(-50%,7px);opacity:1} }

#tldIntro.tld-spinning #tldHelix { animation:tld-helix .14s linear infinite; }
#tldIntro.tld-spinning #tldShine { animation:tld-shine .14s linear infinite; }
/* la vibración va en el contenedor INTERNO: el #tldRig conserva su
   transform de centrado (translate(-50%,…)) que el JS controla */
#tldIntro.tld-drilling #tldRigInner { animation:tld-shake .085s linear infinite; }
#tldIntro.tld-breaking #tldRigInner { animation:tld-shake .13s  linear infinite; }

/* ---------- placas ---------- */
.tld-plate{position:absolute;left:0;right:0;height:50%;overflow:hidden;z-index:4;
  background:linear-gradient(180deg,#1b1614,#0e0b0a 70%,#070605);
  border-bottom:1px solid rgba(0,0,0,.6);top:0;box-shadow:inset 0 -16px 30px rgba(0,0,0,.6);
  will-change:transform}
.tld-plate--bottom{top:auto;bottom:0;background:linear-gradient(0deg,#1b1614,#0e0b0a 70%,#070605);
  border-bottom:0;border-top:1px solid rgba(0,0,0,.6);box-shadow:inset 0 16px 30px rgba(0,0,0,.6)}
.tld-grain{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(245,244,240,.028) 0 2px,transparent 2px 5px)}
.tld-engrave{position:absolute;left:50%;top:34px;transform:translateX(-50%);font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,9vw,120px);letter-spacing:.04em;color:rgba(245,244,240,.05);white-space:nowrap;user-select:none}
.tld-engrave--bottom{top:auto;bottom:34px}
.tld-screw{position:absolute;width:10px;height:10px;border:1px solid rgba(245,244,240,.25);border-radius:50%}

/* ---------- costura / mira ---------- */
#tldSeam{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .25s ease}
.tld-seam-line{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(245,244,240,.18);transform:translateY(-50%)}
.tld-seam-box{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border:1px solid rgba(196,30,30,.55)}
.tld-seam-h{position:absolute;left:50%;top:50%;width:80px;height:1px;background:rgba(196,30,30,.5);transform:translate(-50%,-50%)}
.tld-seam-v{position:absolute;left:50%;top:50%;width:1px;height:80px;background:rgba(196,30,30,.5);transform:translate(-50%,-50%)}

/* ---------- barreno / chispas / glow ---------- */
#tldBore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(circle,#fff2cc 0%,#ffae3a 26%,#d4361a 54%,rgba(120,10,10,.55) 72%,transparent 82%);
  box-shadow:0 0 26px rgba(255,140,40,.7);filter:blur(.6px);width:0;height:0;opacity:0}
#tldSparks{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);z-index:6;pointer-events:none}
#tldGlow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(circle,rgba(255,150,60,.4),rgba(196,30,30,.14) 40%,transparent 65%);
  mix-blend-mode:screen;width:200px;height:200px;opacity:0}

/* ---------- label profundidad ---------- */
#tldLabel{position:absolute;left:50%;top:calc(50% + 80px);transform:translateX(-50%);z-index:7;display:flex;gap:14px;
  align-items:baseline;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .25s ease}

/* ---------- el taladro ---------- */
#tldRig{position:absolute;left:50%;top:50%;z-index:8;pointer-events:none;
  transform:translate(-50%,calc(-100% + -118vh));filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));will-change:transform}

#tldBit{position:relative;width:15px;height:158px;margin:-4px auto 0}
#tldShaft{position:absolute;left:50%;top:0;transform:translateX(-50%);width:15px;height:128px;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,#2c2c2f 0%,#7d7d84 30%,#eef0f4 50%,#8a8a90 68%,#3a3a3d 100%);box-shadow:0 0 7px rgba(0,0,0,.45)}
#tldHelix{position:absolute;inset:-8px 0;mix-blend-mode:overlay;background-size:100% 26px;
  background-image:repeating-linear-gradient(118deg,rgba(0,0,0,.55) 0 4px,rgba(255,255,255,.24) 4px 8px,rgba(255,255,255,0) 8px 13px)}
#tldShine{position:absolute;inset:0;mix-blend-mode:screen;background-size:22px 100%;
  background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 66%,transparent 100%)}
#tldTip{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:15px;height:30px;
  background:linear-gradient(90deg,#3a3a3d,#eef0f4 50%,#3a3a3d);clip-path:polygon(0 0,100% 0,50% 100%)}
.tld-tip-edge{position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(0,0,0,.45);transform:translateX(-50%)}

/* ---------- pista de scroll + botón ---------- */
#tldCue{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;pointer-events:none;transition:opacity .3s ease}
#tldCue .tld-cue-txt{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,244,240,.7)}
#tldCue .tld-cue-arrow{font-size:20px;color:#C41E1E;animation:tld-cue 1.3s ease-in-out infinite;display:block}
#tldSkip{position:absolute;top:22px;right:24px;z-index:9;background:transparent;border:1px solid rgba(245,244,240,.25);
  color:#F5F4F0;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;cursor:pointer;
  transition:border-color .2s,color .2s}
#tldSkip:hover{border-color:#C41E1E;color:#C41E1E}

/* ---------- destello + onda al romper la placa ---------- */
#tldFlash{position:absolute;inset:0;z-index:10;pointer-events:none;background:#fff;opacity:0}
#tldFlash.tld-flash{animation:tld-flash .5s ease-out forwards}
@keyframes tld-flash{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}

#tldShock{position:absolute;left:50%;top:50%;z-index:6;pointer-events:none;
  width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,180,90,.9);
  transform:translate(-50%,-50%) scale(0);opacity:0}
#tldShock.tld-shock{animation:tld-shock .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes tld-shock{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(14);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  #tldIntro{display:none!important}
}