/* ============================================================
   TWL · Before/After HUD — componente reutilizable
   Mismo lenguaje tech que el slider de la home (.twl-ba):
   HUD superior con % en vivo, barrido, retícula, brackets.
   Namespace propio .twl-bahud (autocontenido, no depende de
   twl-damage.css). Úsalo vía template-parts/twl-before-after-hud.php
   ============================================================ */
.twl-bahud{
  --o:var(--c-orange-burnt,#e76301); --o2:var(--c-orange-bright,#ff7a1a);
  --line:rgba(255,255,255,.1); --ease:cubic-bezier(.16,1,.3,1);
  position:relative; width:100%; max-width:960px; margin:0 auto;
}
.twl-bahud__frame{ position:relative; width:100%; aspect-ratio:16/11; overflow:hidden; border-radius:16px;
  border:1px solid var(--line); cursor:ew-resize; user-select:none; touch-action:none; background:#08080a;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02); }
.twl-bahud__frame:active{ cursor:grabbing; }
.twl-bahud__after,.twl-bahud__before{ position:absolute; inset:0; }
.twl-bahud__after img,.twl-bahud__before img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.twl-bahud__before{ clip-path:inset(0 50% 0 0); will-change:clip-path; }

/* HUD superior */
.twl-bahud__hud{ position:absolute; z-index:6; top:0; left:0; right:0; display:flex; align-items:center; gap:.9rem;
  padding:.7rem clamp(.8rem,2vw,1.1rem); font-family:'JetBrains Mono',monospace; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,9,.85),rgba(8,8,9,0)); }
.twl-bahud__hudst{ display:inline-flex; align-items:center; gap:.5rem; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; white-space:nowrap; }
.twl-bahud__hudst i{ width:8px; height:8px; border-radius:50%; background:var(--o); position:relative; flex:none; }
.twl-bahud__hudst i::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--o);
  animation:twlBahudPulse 2s ease-out infinite; }
.twl-bahud__hudbar{ position:relative; flex:1; min-width:48px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden; }
.twl-bahud__hudbar b{ position:absolute; top:0; left:0; bottom:0; width:50%; border-radius:3px;
  background:linear-gradient(90deg,rgba(231,99,1,.25),var(--o)); box-shadow:0 0 10px rgba(231,99,1,.5);
  transition:width .08s linear; }
.twl-bahud__hudtag{ font-size:.64rem; letter-spacing:.1em; color:#d2d2d7; text-transform:uppercase; white-space:nowrap; }
.twl-bahud__hudtag b{ color:var(--o2); font-weight:700; font-variant-numeric:tabular-nums; }

/* barrido vertical */
.twl-bahud__scan{ position:absolute; z-index:3; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(231,99,1,.7),transparent);
  box-shadow:0 0 14px 2px rgba(231,99,1,.35); animation:twlBahudScanY 5s cubic-bezier(.5,0,.5,1) infinite; }
@media (prefers-reduced-motion:reduce){ .twl-bahud__scan{ animation:none; opacity:0; } }

/* etiquetas inferiores */
.twl-bahud__tag{ position:absolute; bottom:1rem; z-index:4; font-family:'JetBrains Mono',monospace;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; padding:.32rem .7rem; border-radius:4px;
  border:1px solid var(--line); background:rgba(10,10,11,.72); backdrop-filter:blur(4px); color:#fff; }
.twl-bahud__tag--before{ left:1rem; }
.twl-bahud__tag--after{ right:1rem; color:var(--o2); border-color:rgba(231,99,1,.45); }

/* línea de revelado + retícula */
.twl-bahud__divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(231,99,1,.2),var(--o) 16%,var(--o) 84%,rgba(231,99,1,.2));
  box-shadow:0 0 16px rgba(231,99,1,.6); z-index:5; pointer-events:none; }
.twl-bahud__divider::before,.twl-bahud__divider::after{ content:""; position:absolute; left:50%; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg); border:1.5px solid var(--o); background:#0a0a0b; }
.twl-bahud__divider::before{ top:7px; } .twl-bahud__divider::after{ bottom:7px; }

.twl-bahud__handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  width:48px; height:48px; border-radius:50%; background:rgba(10,10,11,.85); border:2px solid var(--o);
  display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 0 22px rgba(231,99,1,.5), inset 0 0 0 4px rgba(231,99,1,.08); pointer-events:none; }
.twl-bahud__handle::before,.twl-bahud__handle::after{ content:""; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.twl-bahud__handle::before{ border-right:7px solid var(--o); }
.twl-bahud__handle::after{ border-left:7px solid var(--o); }

.twl-bahud__brk{ position:absolute; width:22px; height:22px; border:1.5px solid var(--o); z-index:7; pointer-events:none; opacity:.85; }
.twl-bahud__brk.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.twl-bahud__brk.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.twl-bahud__brk.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.twl-bahud__brk.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

@keyframes twlBahudScanY{ 0%,100%{ top:0; opacity:0; } 10%{ opacity:1; } 50%{ top:100%; opacity:1; } 62%{ opacity:0; } }
@keyframes twlBahudPulse{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }