/* ============================================================
   BOLT — Classified Countdown hero slide (Swiper-native)
   Self-contained: no design-system CSS variables required.
   Scoped entirely under .ht-bolt-slide so it cannot leak into
   the rest of the hero slider or the theme.

   Image paths assumed at:
     /wp-content/themes/hushtech/images/bolt/
   The dark texture URL is read from --bolt-texture (set inline
   on the slide element in the PHP partial) so this file stays
   path-agnostic.
   ============================================================ */

.ht-bolt-slide {
  --bolt-accent: #ff000a;
  --bolt-ink: #08080a;
  --bolt-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  height: 650px;
  overflow: hidden;
  background: var(--bolt-ink);
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  color: #fff;
}

/* ---- Background photo + treatment ------------------------------ */
.ht-bolt-slide .bolt-bg { position: absolute; inset: 0; z-index: 1; }
.ht-bolt-slide .bolt-bg-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center right;
  display: block; filter: grayscale(0.15) contrast(1.08) brightness(0.7);
}
.ht-bolt-slide .bolt-texture {
  position: absolute; inset: 0; z-index: 2;
  background: var(--bolt-texture) center / cover;
  opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
}
.ht-bolt-slide .bolt-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bolt-ink) 10%, rgba(8,8,10,0.82) 34%, rgba(8,8,10,0.15) 62%, rgba(8,8,10,0.05) 100%),
    linear-gradient(0deg, var(--bolt-ink) 1%, rgba(8,8,10,0) 32%);
}
.ht-bolt-slide .bolt-glow {
  position: absolute; right: 6%; top: 48%; z-index: 2;
  width: 620px; height: 620px; transform: translateY(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--bolt-accent) 42%, transparent) 0%, transparent 62%);
  mix-blend-mode: screen; pointer-events: none;
}
.ht-bolt-slide .bolt-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 200px 24px rgba(0,0,0,0.78);
}
.ht-bolt-slide .bolt-grain {
  position: absolute; inset: 0; z-index: 3; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- HUD recon brackets ---------------------------------------- */
.ht-bolt-slide .bolt-hud {
  position: absolute; z-index: 4; width: 32px; height: 32px;
  border: 2px solid rgba(255,255,255,0.22);
}
.ht-bolt-slide .bolt-hud.tl { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
.ht-bolt-slide .bolt-hud.tr { top: 26px; right: 26px; border-left: 0; border-bottom: 0; }
.ht-bolt-slide .bolt-hud.bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.ht-bolt-slide .bolt-hud.br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }

/* ---- Chrome rails ---------------------------------------------- */
.ht-bolt-slide .bolt-rail {
  position: absolute; left: clamp(20px, 5vw, 64px); right: clamp(20px, 5vw, 64px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,0.55); font-weight: 600; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
}
.ht-bolt-slide .bolt-rail.top { top: 24px; }
.ht-bolt-slide .bolt-rail.bottom { bottom: 22px; }
.ht-bolt-slide .bolt-logo { height: 24px; width: auto; display: block; }
.ht-bolt-slide .bolt-tag { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ht-bolt-slide .bolt-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bolt-accent); box-shadow: 0 0 12px var(--bolt-accent);
}

/* ---- Content --------------------------------------------------- */
/* Content is constrained to the same centered container the rest of the
   site uses (theme .ht-hero-content: max-width 1400px, margin auto, 20px
   gutters), so the text block lines up with sections below instead of
   stretching to the slide's left edge on wide screens. Backgrounds,
   rails, HUD brackets and arrows remain full-bleed. */
.ht-bolt-slide .bolt-content {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--bolt-content-max, 1400px), calc(100% - 40px));
  padding: 0 20px;
}
.ht-bolt-slide .bolt-eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px;
  color: var(--bolt-accent); font-weight: 600; font-size: 14px;
  letter-spacing: 4px; text-transform: uppercase;
}
.ht-bolt-slide .bolt-tick {
  width: 40px; height: 2px; background: var(--bolt-accent);
  box-shadow: 0 0 14px var(--bolt-accent);
}

.ht-bolt-slide .bolt-wordmark { margin: 0; padding: 0; line-height: 0.86; display: flex; gap: 0; }
.ht-bolt-slide .bolt-ltr {
  font-family: "Fira Sans Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: clamp(88px, 15vw, 232px); text-transform: uppercase;
  letter-spacing: -0.01em; color: #fff;
  background: linear-gradient(177deg, #ffffff 0%, #f2f2f2 38%, #9fa1a6 70%, #6c6e74 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.ht-bolt-slide .bolt-reg {
  font-family: "Roboto", sans-serif; font-weight: 600;
  font-size: clamp(24px, 4vw, 44px); color: var(--bolt-accent);
  -webkit-text-fill-color: var(--bolt-accent); align-self: flex-start; margin: 12px 0 0 8px;
}

.ht-bolt-slide .bolt-acronym {
  margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
  font-family: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: clamp(17px, 1.9vw, 26px); letter-spacing: 3px; text-transform: uppercase; color: #fff;
}
.ht-bolt-slide .bolt-acronym .key { color: var(--bolt-accent); }
.ht-bolt-slide .bolt-acronym .sep { color: rgba(255,255,255,0.28); font-size: 0.7em; transform: translateY(-2px); }

.ht-bolt-slide .bolt-teaser {
  margin: 18px 0 26px; max-width: 560px; color: #cfcfcf;
  font-weight: 300; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.5;
}
.ht-bolt-slide .bolt-teaser strong { color: #fff; font-weight: 500; }

.ht-bolt-slide .bolt-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; }
.ht-bolt-slide .bolt-btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border: 0;
  text-decoration: none; color: #fff;
  font-family: "Fira Sans Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 15px 32px; border-radius: 4px;
  background: linear-gradient(180deg, var(--bolt-accent) 0%, color-mix(in srgb, var(--bolt-accent) 55%, #000) 100%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bolt-accent) 35%, transparent);
  transition: filter .2s var(--bolt-ease), transform .2s var(--bolt-ease);
}
.ht-bolt-slide .bolt-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ht-bolt-slide .bolt-reveal {
  display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.7);
  font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
}
.ht-bolt-slide .bolt-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bolt-accent); box-shadow: 0 0 0 0 var(--bolt-accent);
}

/* one-time red scan sweep */
.ht-bolt-slide .bolt-scan {
  position: absolute; top: 0; bottom: 0; left: -10%; width: 3px; z-index: 4; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--bolt-accent), transparent);
  box-shadow: 0 0 30px 4px var(--bolt-accent); pointer-events: none;
}

/* ---- Mobile ---------------------------------------------------- */
@media (max-width: 767px) {
  .ht-bolt-slide .bolt-acronym,
  .ht-bolt-slide .bolt-rail.bottom,
  .ht-bolt-slide .bolt-hud { display: none; }
  .ht-bolt-slide .bolt-content { top: 54%; }
  .ht-bolt-slide .bolt-teaser { max-width: 100%; }
  .ht-bolt-slide .bolt-glow { right: -10%; }
}

/* ============================================================
   MOTION — base is the visible end-state; for motion users the
   content starts hidden and animates in only on the ACTIVE slide
   (Swiper adds .swiper-slide-active). Reduced-motion + no-JS keep
   the static visible state.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .ht-bolt-slide .a-up   { opacity: 0; transform: translateY(20px); }
  .ht-bolt-slide .a-left { opacity: 0; transform: translateX(-24px); }
  .ht-bolt-slide .a-fade { opacity: 0; }
  .ht-bolt-slide .bolt-ltr { opacity: 0; transform: translateY(48px); clip-path: inset(0 0 100% 0); }
  .ht-bolt-slide .bolt-glow { opacity: 0; }

  .ht-bolt-slide.swiper-slide-active .a-up,
  .ht-bolt-slide.swiper-slide-active .a-left { animation: bolt-rise .9s var(--bolt-ease) both; }
  .ht-bolt-slide.swiper-slide-active .a-fade { animation: bolt-fade .9s var(--bolt-ease) both; }

  .ht-bolt-slide.swiper-slide-active .d1 { animation-delay: .15s; }
  .ht-bolt-slide.swiper-slide-active .d6 { animation-delay: .95s; }
  .ht-bolt-slide.swiper-slide-active .d7 { animation-delay: 1.08s; }
  .ht-bolt-slide.swiper-slide-active .d8 { animation-delay: 1.22s; }
  .ht-bolt-slide.swiper-slide-active .d9 { animation-delay: 1.30s; }

  .ht-bolt-slide.swiper-slide-active .bolt-ltr { animation: bolt-letter .9s var(--bolt-ease) both; }
  .ht-bolt-slide.swiper-slide-active .bolt-ltr.l0 { animation-delay: .30s; }
  .ht-bolt-slide.swiper-slide-active .bolt-ltr.l1 { animation-delay: .42s; }
  .ht-bolt-slide.swiper-slide-active .bolt-ltr.l2 { animation-delay: .54s; }
  .ht-bolt-slide.swiper-slide-active .bolt-ltr.l3 { animation-delay: .66s; }
  .ht-bolt-slide.swiper-slide-active .bolt-reg { animation: bolt-fade .9s var(--bolt-ease) both; animation-delay: .80s; }

  .ht-bolt-slide.swiper-slide-active .bolt-glow { animation: bolt-fade 1.6s var(--bolt-ease) .5s forwards; }
  .ht-bolt-slide.swiper-slide-active .bolt-bg-img { animation: bolt-kb 12s ease-out forwards; }
  .ht-bolt-slide.swiper-slide-active .bolt-scan { animation: bolt-sweep 2.2s cubic-bezier(0.4,0,0.2,1) 1s 1; }
  .ht-bolt-slide.swiper-slide-active .bolt-pulse { animation: bolt-ring 2.4s ease-out infinite; }

  @keyframes bolt-rise   { to { opacity: 1; transform: none; } }
  @keyframes bolt-fade   { to { opacity: 1; } }
  @keyframes bolt-letter { to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); } }
  @keyframes bolt-kb     { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes bolt-sweep  { 0% { left: -5%; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { left: 102%; opacity: 0; } }
  @keyframes bolt-ring {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bolt-accent) 70%, transparent); }
    70%  { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}