/* ============================================================
   JULY 250TH PROMO — Independence Day hero slide (Swiper-native)
   Self-contained: no design-system CSS variables required.
   Scoped entirely under .ht-july-slide so it can't leak.

   Palette: navy base + brand red (#ff000a) + white, with blue
   accents — festive but on-brand. Same 650px slot, same
   active-slide motion pattern as the BOLT slide.

   Asset paths assumed at /wp-content/themes/hushtech/images/july/ :
     - gun-mat.png   (the DUPLEX blueprint gun mat)
   Texture + logo reuse existing theme images (see PHP partial).
   ============================================================ */

.ht-july-slide {
  --jr: #ff000a;            /* brand red            */
  --jr-deep: #c20009;       /* deep red             */
  --jb: #1d4fd8;            /* festive blue accent  */
  --jb-light: #5b8cff;      /* light blue           */
  --navy: #0a1730;          /* base                 */
  --navy-2: #0b1f44;        /* lighter panel        */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  height: 650px;
  overflow: hidden;
  background: radial-gradient(120% 130% at 78% 18%, #12305f 0%, var(--navy) 52%, #070f22 100%);
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  color: #fff;
}

/* ---- Festive backdrop layers ----------------------------------- */
.ht-july-slide .j-stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 26% 64%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 8% 78%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 42% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 58% 80%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 60%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 94% 24%, #cfe0ff 50%, transparent 51%);
}
.ht-july-slide .j-texture {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--j-texture) center / cover; opacity: 0.22; mix-blend-mode: overlay;
}
/* red glow behind the offer/visual side */
.ht-july-slide .j-glow {
  position: absolute; z-index: 1; right: 4%; top: 50%; transform: translateY(-50%);
  width: 640px; height: 640px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in srgb, var(--jr) 40%, transparent) 0%, transparent 62%);
}
/* faint flag stripes sweeping the lower field */
.ht-july-slide .j-stripes {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.08;
  background: repeating-linear-gradient(105deg,
    #fff 0 3px, transparent 3px 9px, var(--jr) 9px 12px, transparent 12px 64px);
  mask-image: linear-gradient(0deg, #000 0%, transparent 46%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 46%);
}
.ht-july-slide .j-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 200px 30px rgba(2,7,18,0.7);
}
/* full-bleed RWB ribbon pinned to the very bottom edge */
.ht-july-slide .j-ribbon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 7; pointer-events: none;
  background: linear-gradient(90deg,
    var(--jb) 0 22%, #fff 22% 28%, var(--jr) 28% 72%, #fff 72% 78%, var(--jb) 78% 100%);
}

/* ---- Centered content container (capped, like the theme) ------- */
.ht-july-slide .j-content {
  position: absolute; inset: 0; z-index: 5; margin: 0 auto;
  width: min(1400px, calc(100% - 40px)); padding: 0 20px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px;
}
.ht-july-slide .j-right { display: flex; flex-direction: column; justify-content: center; gap: 18px; }

/* ---- Top + bottom rails ---------------------------------------- */
.ht-july-slide .j-rail {
  position: absolute; left: max(20px, calc((100% - 1400px) / 2 + 20px));
  right: max(20px, calc((100% - 1400px) / 2 + 20px)); z-index: 6;
  display: flex; align-items: center; justify-content: flex-end;
  font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.ht-july-slide .j-rail.top { top: 26px; }
.ht-july-slide .j-logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.ht-july-slide .j-rail .tag { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.ht-july-slide .j-star { color: var(--jr); font-size: 13px; }

/* ---- LEFT: headline + CTA -------------------------------------- */
.ht-july-slide .j-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; margin: 0 0 16px;
  padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--jb-light) 50%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--jb) 18%, transparent);
  color: #dbe6ff; font-weight: 700; font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase;
}
.ht-july-slide .j-eyebrow b { color: #fff; }

.ht-july-slide .j-headline {
  margin: 0; font-family: "Fira Sans Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em;
  font-size: clamp(46px, 6vw, 84px); text-shadow: 0 6px 30px rgba(0,0,0,0.45);
}
.ht-july-slide .j-headline .red {
  color: var(--jr);
  background: linear-gradient(180deg, #ff5158 0%, var(--jr) 45%, var(--jr-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ht-july-slide .j-sub {
  margin: 16px 0 24px; max-width: 460px; color: #c6d2e8;
  font-weight: 300; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.5;
}
.ht-july-slide .j-sub strong { color: #fff; font-weight: 500; }

.ht-july-slide .j-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.ht-july-slide .j-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: 16px 34px; border-radius: 5px;
  background: linear-gradient(180deg, var(--jr) 0%, var(--jr-deep) 100%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--jr) 36%, transparent);
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.ht-july-slide .j-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ht-july-slide .j-btn .arr { font-size: 18px; line-height: 1; }
.ht-july-slide .j-ends {
  display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.66);
  font-weight: 600; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
}
.ht-july-slide .j-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--jr); box-shadow: 0 0 0 0 var(--jr);
}

/* ---- RIGHT: offer panel + gun mat visual ----------------------- */
.ht-july-slide .j-offer {
  position: relative; border-radius: 14px; padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(13,32,68,0.92) 0%, rgba(8,18,40,0.92) 100%);
  border: 1px solid rgba(120,150,210,0.28);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ht-july-slide .j-offer-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #fff;
}
.ht-july-slide .j-offer-head .flag {
  width: 26px; height: 16px; border-radius: 2px; flex: none;
  border: 1px solid rgba(255,255,255,0.4); background-size: cover; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Crect width='26' height='16' fill='%23fff'/%3E%3Cg fill='%23c8102e'%3E%3Crect y='0' width='26' height='1.23'/%3E%3Crect y='2.46' width='26' height='1.23'/%3E%3Crect y='4.92' width='26' height='1.23'/%3E%3Crect y='7.38' width='26' height='1.23'/%3E%3Crect y='9.84' width='26' height='1.23'/%3E%3Crect y='12.3' width='26' height='1.23'/%3E%3Crect y='14.76' width='26' height='1.23'/%3E%3C/g%3E%3Crect width='10.8' height='8.6' fill='%23102a6b'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.5' cy='1.3' r='0.42'/%3E%3Ccircle cx='3.5' cy='1.3' r='0.42'/%3E%3Ccircle cx='5.5' cy='1.3' r='0.42'/%3E%3Ccircle cx='7.5' cy='1.3' r='0.42'/%3E%3Ccircle cx='9.5' cy='1.3' r='0.42'/%3E%3Ccircle cx='2.5' cy='2.7' r='0.42'/%3E%3Ccircle cx='4.5' cy='2.7' r='0.42'/%3E%3Ccircle cx='6.5' cy='2.7' r='0.42'/%3E%3Ccircle cx='8.5' cy='2.7' r='0.42'/%3E%3Ccircle cx='1.5' cy='4.1' r='0.42'/%3E%3Ccircle cx='3.5' cy='4.1' r='0.42'/%3E%3Ccircle cx='5.5' cy='4.1' r='0.42'/%3E%3Ccircle cx='7.5' cy='4.1' r='0.42'/%3E%3Ccircle cx='9.5' cy='4.1' r='0.42'/%3E%3Ccircle cx='2.5' cy='5.5' r='0.42'/%3E%3Ccircle cx='4.5' cy='5.5' r='0.42'/%3E%3Ccircle cx='6.5' cy='5.5' r='0.42'/%3E%3Ccircle cx='8.5' cy='5.5' r='0.42'/%3E%3Ccircle cx='1.5' cy='6.9' r='0.42'/%3E%3Ccircle cx='3.5' cy='6.9' r='0.42'/%3E%3Ccircle cx='5.5' cy='6.9' r='0.42'/%3E%3Ccircle cx='7.5' cy='6.9' r='0.42'/%3E%3Ccircle cx='9.5' cy='6.9' r='0.42'/%3E%3C/g%3E%3C/svg%3E");
}
.ht-july-slide .j-tier {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 14px 4px;
}
.ht-july-slide .j-tier + .j-tier { border-top: 1px dashed rgba(140,165,220,0.3); }
.ht-july-slide .j-num {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px;
  font-family: "Fira Sans Condensed", sans-serif; font-weight: 700; font-size: 18px; color: #fff;
  background: linear-gradient(180deg, var(--jb) 0%, #1536a0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.ht-july-slide .j-tier.gold .j-num { background: linear-gradient(180deg, var(--jr) 0%, var(--jr-deep) 100%); }
.ht-july-slide .j-buy {
  font-size: 13px; color: #aebbd4; letter-spacing: 0.3px; margin-bottom: 3px;
}
.ht-july-slide .j-buy b { color: #fff; font-weight: 600; }
.ht-july-slide .j-get {
  font-family: "Fira Sans Condensed", sans-serif; font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.3px; color: #fff; line-height: 1.1;
}
.ht-july-slide .j-get .free { color: var(--jr); }
.ht-july-slide .j-get .plus { color: var(--jb-light); margin: 0 4px; }

/* free gun-mat visual, stacked below the offer panel */
.ht-july-slide .j-matwrap {
  position: relative; width: min(300px, 100%); align-self: center; margin-top: 2px;
  transform: rotate(-3deg); z-index: 2;
  filter: drop-shadow(0 22px 32px rgba(0,0,0,0.55));
}
.ht-july-slide .j-mat {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 3px solid rgba(255,255,255,0.85);
}
.ht-july-slide .j-seal {
  position: absolute; right: -20px; top: -24px; width: 84px; height: 84px; z-index: 3;
  display: grid; place-content: center; text-align: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ff5158, var(--jr) 60%, var(--jr-deep));
  border: 2px dashed rgba(255,255,255,0.85); box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  transform: rotate(-12deg);
}
.ht-july-slide .j-seal b {
  font-family: "Fira Sans Condensed", sans-serif; font-weight: 700; text-transform: uppercase; color: #fff;
}
.ht-july-slide .j-seal .big { display: block; font-size: 22px; line-height: 1; letter-spacing: 1px; }
.ht-july-slide .j-seal .sm { display: block; font-size: 9px; letter-spacing: 2px; opacity: 0.95; margin-top: 2px; }

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 1000px) {
  .ht-july-slide .j-content { grid-template-columns: 1fr; gap: 22px; align-content: center; }
  .ht-july-slide .j-matwrap { display: none; }
  .ht-july-slide .j-offer { max-width: 440px; }
}
@media (max-width: 680px) {
  .ht-july-slide .j-rail.top .tag, .ht-july-slide .j-sub { display: none; }
  .ht-july-slide .j-offer { display: none; }            /* keep mobile clean: headline + CTA only */
  .ht-july-slide .j-content { align-content: center; }
}

/* ============================================================
   MOTION — visible end-state is the base; for motion users the
   content starts hidden and animates in on the ACTIVE slide only.
   Reduced-motion + no-JS keep the static composition.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .ht-july-slide .a-up   { opacity: 0; transform: translateY(22px); }
  .ht-july-slide .a-left { opacity: 0; transform: translateX(-26px); }
  .ht-july-slide .a-right{ opacity: 0; transform: translateX(28px); }
  .ht-july-slide .a-fade { opacity: 0; }
  .ht-july-slide .j-matwrap { opacity: 0; transform: rotate(-3deg) translateY(26px) scale(0.96); }
  .ht-july-slide .j-seal { opacity: 0; transform: rotate(-12deg) scale(0.4); }

  .ht-july-slide.swiper-slide-active .a-up,
  .ht-july-slide.swiper-slide-active .a-left,
  .ht-july-slide.swiper-slide-active .a-right { animation: j-in .85s var(--ease) both; }
  .ht-july-slide.swiper-slide-active .a-fade { animation: j-fade .85s var(--ease) both; }

  .ht-july-slide.swiper-slide-active .d1 { animation-delay: .12s; }
  .ht-july-slide.swiper-slide-active .d2 { animation-delay: .24s; }
  .ht-july-slide.swiper-slide-active .d3 { animation-delay: .36s; }
  .ht-july-slide.swiper-slide-active .d4 { animation-delay: .50s; }
  .ht-july-slide.swiper-slide-active .d5 { animation-delay: .42s; }
  .ht-july-slide.swiper-slide-active .d6 { animation-delay: .58s; }
  .ht-july-slide.swiper-slide-active .d7 { animation-delay: .72s; }

  .ht-july-slide.swiper-slide-active .j-matwrap {
    animation: j-mat .9s var(--ease) .66s both;
  }
  .ht-july-slide.swiper-slide-active .j-seal {
    animation: j-seal .6s var(--ease) 1s both;
  }
  .ht-july-slide.swiper-slide-active .j-pulse { animation: j-ring 2.4s ease-out infinite; }

  @keyframes j-in   { to { opacity: 1; transform: none; } }
  @keyframes j-fade { to { opacity: 1; } }
  @keyframes j-mat  { to { opacity: 1; transform: rotate(-3deg) translateY(0) scale(1); } }
  @keyframes j-seal { 0% { opacity: 0; transform: rotate(-12deg) scale(0.4); }
                      70% { opacity: 1; transform: rotate(6deg) scale(1.12); }
                      100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
  @keyframes j-ring {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jr) 70%, transparent); }
    70%  { box-shadow: 0 0 0 13px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}