/* ═══════════════════════════════════════════════════════════
   FIGUEROA — INTRO HONDA (tacómetro: acelera con scroll)
   Overlay de entrada de motos.html: el cliente "acelera" con scroll,
   la aguja sube al redline, el motor enciende y revela el catálogo.
   Autocontenido. Lo controla js/intro-honda.js. Namespacing: hnd-/#hnd*
   ═══════════════════════════════════════════════════════════ */

#hndIntro{
  position:fixed; inset:0; z-index:9000; overflow:hidden;
  background:radial-gradient(ellipse 80% 80% at 50% 50%, #15100a 0%, #080808 70%);
  color:#F5F4F0; font-family:'Barlow',sans-serif;
  display:grid; place-items:center;
  transition:opacity .55s ease, transform .55s cubic-bezier(.5,0,.3,1), filter .55s ease;
}
#hndIntro.hnd-hide{ opacity:0; transform:scale(1.18); filter:blur(8px); pointer-events:none; }

/* rejilla técnica de fondo */
#hndIntro::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 64px);
}

/* brillo del motor detrás del tacómetro (sube con las RPM) */
#hndGlow{
  position:absolute; left:50%; top:50%; width:440px; height:440px;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(196,30,30,.55) 0%, rgba(201,168,76,.18) 38%, transparent 68%);
  mix-blend-mode:screen; filter:blur(4px);
}

/* anillos de pulso (rugido) */
#hndRings{position:absolute;left:50%;top:50%;pointer-events:none}
.hnd-ring{position:absolute;left:50%;top:50%;width:300px;height:300px;border-radius:50%;
  border:1px solid rgba(201,168,76,.5);transform:translate(-50%,-50%) scale(.6);opacity:0}
.hnd-ring.go{animation:hnd-ring 1s ease-out forwards}
@keyframes hnd-ring{0%{transform:translate(-50%,-50%) scale(.6);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}}

/* ---------- tacómetro ---------- */
#hndGauge{position:relative;width:min(74vw,360px);aspect-ratio:1;display:grid;place-items:center;will-change:transform}
#hndIntro.hnd-revving #hndGauge{animation:hnd-rev .07s linear infinite}
@keyframes hnd-rev{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,-1px)}}
#hndGauge svg{width:100%;height:100%;overflow:visible}

.hnd-track{fill:none;stroke:rgba(245,244,240,.12);stroke-width:10;stroke-linecap:round}
.hnd-redline{fill:none;stroke:#C41E1E;stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(196,30,30,.8))}
.hnd-tick{stroke:rgba(245,244,240,.45);stroke-width:2}
.hnd-tick.major{stroke:rgba(245,244,240,.9);stroke-width:3}
.hnd-tick.red{stroke:#e0402a}
.hnd-num{fill:rgba(245,244,240,.7);font-family:'Bebas Neue',sans-serif;font-size:15px;text-anchor:middle;dominant-baseline:middle}
.hnd-needle{fill:#F5F4F0;filter:drop-shadow(0 0 5px rgba(196,30,30,.6))}
.hnd-hub{fill:#1a1a1a;stroke:#C9A84C;stroke-width:2}
.hnd-hub-dot{fill:#C41E1E}

/* lectura digital RPM */
#hndReadout{position:absolute;left:0;right:0;top:58%;text-align:center;pointer-events:none}
#hndRpm{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,9vw,52px);letter-spacing:.04em;color:#F5F4F0;line-height:1}
#hndReadout small{display:block;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:.34em;color:#C9A84C;margin-top:2px}
#hndBrand{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:'Bebas Neue',sans-serif;
  font-size:14px;letter-spacing:.3em;color:rgba(245,244,240,.55);pointer-events:none}

/* etiqueta encendiendo */
#hndLabel{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:7;display:flex;gap:12px;
  align-items:baseline;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .25s ease}
#hndLabel .hnd-l-txt{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.34em;color:#F5F4F0}
#hndLabel .hnd-l-pct{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.14em;color:#C41E1E}

/* destello de encendido */
#hndFlash{position:absolute;inset:0;z-index:10;pointer-events:none;background:#fff;opacity:0}
#hndFlash.hnd-flash{animation:hnd-flash .55s ease-out forwards}
@keyframes hnd-flash{0%{opacity:0}10%{opacity:.9}100%{opacity:0}}

/* faro / haz al arrancar */
#hndBeam{position:absolute;left:50%;top:50%;width:140px;height:140px;transform:translate(-50%,-50%) scale(.2);
  border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,255,240,.95) 0%, rgba(201,168,76,.5) 30%, transparent 62%)}
#hndBeam.hnd-beam{animation:hnd-beam .6s ease-out forwards}
@keyframes hnd-beam{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}

/* pista + botón */
#hndCue{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}
#hndCue .hnd-cue-txt{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,244,240,.7)}
#hndCue .hnd-cue-arrow{font-size:20px;color:#C9A84C;animation:hnd-cue 1.3s ease-in-out infinite;display:block}
@keyframes hnd-cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
#hndSkip{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}
#hndSkip:hover{border-color:#C9A84C;color:#C9A84C}
#hndSound{position:absolute;top:22px;left:24px;z-index:9;width:42px;height:34px;background:transparent;
  border:1px solid rgba(245,244,240,.25);color:#F5F4F0;font-size:15px;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,opacity .2s}
#hndSound:hover{border-color:#C9A84C}
#hndSound.hnd-muted{opacity:.55}

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