/* ===========================
   UNIT 33 HERO — FINAL (STOP THE WHIPLASH)
   - Overlay above background, below content
   - Panel wraps content (no giant empty right area)
   - Panel ALWAYS contains headline/deck/body/buttons
   - Bootstrap grid stays normal; panel width is controlled by wrapper
   =========================== */

#hero{
  position: relative;
  overflow: hidden;
}

/* Background media */
#hero .hero-bg-video,
#hero .hero-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full hero overlay (above video/image, below text) */
#hero .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.48) 42%,
    rgba(0,0,0,0.18) 72%,
    rgba(0,0,0,0.00) 100%);
}

/* Content above overlay */
#hero .container.position-relative{
  position: relative;
  z-index: 2;
}

/* Reduce Bootstrap gutters a bit */
#hero .row.position-relative{
  --bs-gutter-x: 0.75rem;
}

/* Make the column wide enough so content isn’t cramped */
@media (min-width: 992px){
  #hero .row.position-relative > .col-lg-10{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* === The key: panel wrapper === */
#hero .hero-panel{
  display: inline-block;                 /* panel wraps content */
  width: auto;
  max-width: min(92vw, 72rem);           /* hard cap so it never becomes “way too large” */
  padding: clamp(1rem, 1.2vw + 0.6rem, 1.6rem);
  border-radius: 1.1rem;
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

/* Typography */
#hero h2{
  font-size: clamp(2.4rem, 3.6vw + 1rem, 4.3rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#hero h2 em{ font-style: italic; }

#hero .hero-deck{
  font-size: clamp(1.3rem, 1.1vw + 1rem, 1.85rem);
  line-height: 1.25;
  font-weight: 650;
  margin: 0 0 1.35rem;
  max-width: 52ch;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

#hero .hero-subtext{
  font-size: clamp(1.1rem, 0.7vw + 0.95rem, 1.35rem);
  line-height: 1.7;
  max-width: 72ch;
  margin: 0 0 1.25rem;
  opacity: 0.98;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#hero .hero-subtext strong{ font-weight: 800; }

/* Keep your <br><br> but reduce the visual “hole” */
#hero .hero-subtext br + br{
  display: block;
  margin-top: 0.65rem;
}




/* ===========================
   UNIT 33 — CTA BUTTONS (FIXED)
   - Removes duplicate ::before bug
   - Adds real motion in non-hover state
   =========================== */

/* Google Font (CRT / ops console vibe) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Share+Tech+Mono&display=swap');

:root{
  --u33-dark: #070707;
  --u33-siren: #ff2d2d;

  /* Button label font (console/CRT) */
  --u33-font-cta: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Optional: if you want Orbitron for other UI bits later */
  --u33-font-ui: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* wrapper layout */
#hero .u33-cta{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  align-items:center;
}

/* BUTTON SHELL */
#hero .u33-cta__button{
  appearance:none;
  -webkit-appearance:none;
  text-decoration:none;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background-color: rgba(7,7,7,0.92);
  border: 2px solid var(--u33-siren);
  border-radius: 999px;

  padding: 0.55rem 1.65rem;

  position: relative;
  overflow: hidden;

  transition: 200ms background-color ease-in-out,
              200ms transform ease-in-out,
              200ms box-shadow ease-in-out;
}

/* TITLE */
#hero .u33-cta__title{
  font-family: var(--u33-font-cta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;

  /* Slightly larger on desktop */
  font-size: clamp(1.4rem, 0.55vw + 1.2rem, 1.9rem);

  line-height: 1;
  color: var(--u33-siren);
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ===========================
   BUTTON CRT MOTION (VISIBLE)
   - Uses drifting scanline layer (transform) instead of subtle bg-position
   - Removes mix-blend-mode so it doesn't vanish under your hero stack
   =========================== */

/* Scanlines layer (physically drifts) */
/* ===========================
   MOTION LAYERS (TRANSFORM-DRIVEN = OBVIOUS)
   =========================== */

#hero .u33-cta__button::before{
  content:"";
  position:absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: calc(100% + 120px);
  pointer-events:none;

  /* Higher-contrast scanlines for near-black backgrounds */
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.14) 0px,
    rgba(255,255,255,0.14) 1px,
    rgba(0,0,0,0.00) 3px,
    rgba(0,0,0,0.00) 7px
  );
  opacity: 0.35;

  /* IMPORTANT: remove blend mode so it cannot “vanish” in your hero stack */
  mix-blend-mode: normal;

  transform: translateY(0);
  animation: u33-scan-move 0.6s linear infinite;
  will-change: transform;
}

#hero .u33-cta__button::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* This matches the CodePen idea: a dim film that flickers */
  background: rgba(16,16,16,0.22);

  opacity: 0.22;
  mix-blend-mode: normal;

  /* IMPORTANT: no steps — let it breathe like the CodePen */
  animation: u33-flicker 2s infinite;
  will-change: opacity;
}

/* One clean hover tuning (keep motion but reduce overlays so text stays crisp) */
/* On hover (red background), use DARK scanlines so they remain visible */
#hero .u33-cta__button:hover::before{
  opacity: 0.28;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0px,
    rgba(0,0,0,0.22) 1px,
    rgba(0,0,0,0.00) 3px,
    rgba(0,0,0,0.00) 7px
  );
}

/* Keep flicker alive on hover (don’t squash it) */
#hero .u33-cta__button:hover::after{
  opacity: 0.22;
}}

@keyframes u33-scan-move{
  from { transform: translateY(0); }
  to   { transform: translateY(18px); } /* not tied to background-size anymore */
}

@keyframes u33-flicker{
  0%{opacity:.16}
  5%{opacity:.32}
  10%{opacity:.92}
  15%{opacity:.25}
  20%{opacity:.62}
  25%{opacity:.03}
  30%{opacity:.01}
  35%{opacity:.53}
  40%{opacity:.13}
  45%{opacity:.52}
  50%{opacity:.38}
  55%{opacity:.22}
  60%{opacity:.88}
  65%{opacity:.82}
  70%{opacity:.68}
  75%{opacity:.56}
  80%{opacity:.90}
  85%{opacity:.04}
  90%{opacity:.24}
  95%{opacity:.08}
  100%{opacity:.55}
}



/* HOVER INVERT */
#hero .u33-cta__button:hover{
  background-color: var(--u33-siren);
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
#hero .u33-cta__button:hover .u33-cta__title{
  color: var(--u33-dark);
}



/* Focus */
#hero .u33-cta__button:focus-visible{
  outline: 3px solid rgba(255,45,45,0.45);
  outline-offset: 4px;
}

/* --- Fit-to-text sizing (desktop + mobile) --- */
#hero .u33-cta{
  display: inline-flex;         /* hug contents */
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Let the buttons size to their label */
#hero .u33-cta__button{
  width: auto;
  min-width: 0;

  /* Bigger “console button” presence on desktop */
  padding: 0.75rem 1.75rem;
}

/* Slightly tighter on phones, still tappable */
@media (max-width: 575.98px){
  #hero .u33-cta{
    width: 100%;
    display: flex;
    flex-direction: column;     /* stack */
    align-items: center;        /* center the buttons */
    justify-content: center;
    gap: 0.85rem;
  }

  #hero .u33-cta__button{
    width: auto;                /* still fit-to-text */
    padding: 0.75rem 1.5rem;    /* bigger tap target */
  }

  #hero .u33-cta__title{
    font-size: 1.35rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #hero .u33-cta__button::before,
  #hero .u33-cta__button::after{
    animation: none !important;
  }
  #hero .u33-cta__button{
    transition: none !important;
  }
  #hero .u33-cta__button:hover{
    transform: none !important;
  }
}
/* ===========================
   HERO CRT SCREEN OVERLAY (VISIBLE MOTION)
   =========================== */

#hero .u33-screen{
  position:absolute;
  inset:0;
  z-index: 2;                 /* above hero-overlay, below hero content */
  pointer-events:none;

  /* Don’t depend on blending; make it plainly visible */
  opacity: 0.30;
  mix-blend-mode: normal;
}

/* scanlines sheet moves via transform */
#hero .u33-screen::before{
  content:"";
  position:absolute;
  left:0;
  top:-60px;
  width:100%;
  height: calc(100% + 120px);

  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.07) 0px,
    rgba(255,255,255,0.07) 1px,
    rgba(0,0,0,0.00) 3px,
    rgba(0,0,0,0.00) 7px
  );

  transform: translateY(0);
  animation: u33-hero-scan 0.7s linear infinite;
  will-change: transform;
}

/* flicker layer */
#hero .u33-screen::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(16,16,16,0.22);
  animation: u33-hero-flicker 2s infinite;
  will-change: opacity;
}

@keyframes u33-hero-scan{
  from { transform: translateY(0); }
  to   { transform: translateY(22px); }
}

@keyframes u33-hero-flicker{
  0%{opacity:.16}
  5%{opacity:.32}
  10%{opacity:.92}
  15%{opacity:.25}
  20%{opacity:.62}
  25%{opacity:.03}
  30%{opacity:.01}
  35%{opacity:.53}
  40%{opacity:.13}
  45%{opacity:.52}
  50%{opacity:.38}
  55%{opacity:.22}
  60%{opacity:.88}
  65%{opacity:.82}
  70%{opacity:.68}
  75%{opacity:.56}
  80%{opacity:.90}
  85%{opacity:.04}
  90%{opacity:.24}
  95%{opacity:.08}
  100%{opacity:.55}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #hero .u33-screen::before,
  #hero .u33-screen::after{ animation: none; }
}