.campaign-hero {
  --campaign-desktop-height: 500px;
  --campaign-mobile-height: 440px;
  --campaign-bg-one: #15181d;
  --campaign-bg-two: #5a210b;
  --campaign-bg-angle: 118deg;
  --campaign-bg-x: 50%;
  --campaign-bg-y: 50%;
  --campaign-overlay: #000000;
  --campaign-overlay-opacity: .22;
  position: relative;
  width: 100%;
  height: var(--campaign-desktop-height);
  min-height: 260px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background-color: var(--campaign-bg-one);
  background-image: linear-gradient(var(--campaign-bg-angle), var(--campaign-bg-one), var(--campaign-bg-two));
}

.campaign-hero[data-background-mode="color"] { background-image: none; }
.campaign-hero[data-background-mode="image"] {
  background-image: var(--campaign-bg-image), linear-gradient(var(--campaign-bg-angle), var(--campaign-bg-one), var(--campaign-bg-two));
  background-position: var(--campaign-bg-x) var(--campaign-bg-y), center;
  background-repeat: no-repeat;
  background-size: cover;
}

.campaign-hero-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.campaign-hero[data-animation-cinematic="true"][data-background-mode="image"] .campaign-hero-stage::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-image: var(--campaign-bg-image);
  background-position: var(--campaign-bg-x) var(--campaign-bg-y);
  background-repeat: no-repeat;
  background-size: cover;
  animation: campaign-cinematic 12s ease-in-out infinite alternate;
  will-change: transform;
}
.campaign-hero-scrim { position: absolute; inset: 0; z-index: 1; background: var(--campaign-overlay); opacity: var(--campaign-overlay-opacity); pointer-events: none; }

.campaign-hero-text,
.campaign-hero-foreground,
.campaign-hero-cta {
  position: absolute;
  top: var(--hero-y);
  left: var(--hero-x);
  z-index: 2;
  margin: 0;
  transform: translate(-50%, -50%);
}

.campaign-hero-text {
  width: max-content;
  max-width: var(--hero-max-width);
  color: var(--hero-color);
  font-family: var(--hero-font), sans-serif;
  font-size: var(--hero-size);
  font-weight: var(--hero-weight);
  line-height: .96;
  letter-spacing: -.015em;
  text-align: var(--hero-align);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.campaign-hero-text-eyebrow { letter-spacing: .14em; line-height: 1.1; text-transform: uppercase; }
.campaign-hero-text-body { line-height: 1.45; letter-spacing: 0; text-wrap: pretty; }
.campaign-hero-text.has-shadow { text-shadow: 0 8px 24px rgba(0,0,0,.52); }
.campaign-hero-text.has-outline { -webkit-text-stroke: 1px rgba(0,0,0,.72); paint-order: stroke fill; }

.campaign-hero-foreground {
  width: var(--hero-width);
  max-width: none;
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.38));
  user-select: none;
}

.campaign-hero-cta {
  display: inline-flex;
  min-height: 48px;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  color: var(--hero-cta-color);
  background: var(--hero-cta-bg);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 5px;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.8);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
  transition: filter 150ms ease, box-shadow 150ms ease;
}
.campaign-hero-cta-label { position: relative; z-index: 1; }
.campaign-hero-cta::before,
.campaign-hero-cta::after { content: ""; position: absolute; pointer-events: none; }
.campaign-hero-cta::before {
  z-index: 0;
  top: -35%;
  bottom: -35%;
  left: -55%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  opacity: 0;
  transform: translateX(-180%) skewX(-18deg);
}
.campaign-hero-cta::after { inset: -3px; border: 3px solid var(--hero-cta-bg); border-radius: 7px; opacity: 0; }
.campaign-hero-cta:hover,
.campaign-hero-cta:focus-visible { filter: brightness(1.08); box-shadow: 0 18px 34px -18px rgba(0,0,0,.9); }
.campaign-hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.campaign-hero [data-layer-id].is-editable { cursor: grab; touch-action: none; }
.campaign-hero [data-layer-id].is-editable:active { cursor: grabbing; }
.campaign-hero [data-layer-id].is-editable:focus-visible { outline: 3px solid #48a7ef; outline-offset: 5px; }

.campaign-hero[data-animation-reveal="true"] .campaign-hero-text,
.campaign-hero[data-animation-reveal="true"] .campaign-hero-cta { animation: campaign-reveal .72s cubic-bezier(.22,.82,.26,1) both; }
.campaign-hero[data-animation-reveal="true"] .campaign-hero-text:nth-of-type(3) { animation-delay: .08s; }
.campaign-hero[data-animation-reveal="true"] .campaign-hero-cta { animation-delay: .14s; }
.campaign-hero[data-animation-cinematic="true"] .campaign-hero-foreground { animation: campaign-float 5.5s ease-in-out infinite alternate; }
.campaign-hero[data-cta-animation="pulse"] .campaign-hero-cta::after { animation: campaign-cta-pulse 1.8s ease-out .45s 3; }
.campaign-hero[data-cta-animation="shimmer"] .campaign-hero-cta { overflow: hidden; }
.campaign-hero[data-cta-animation="shimmer"] .campaign-hero-cta::before { animation: campaign-cta-shimmer 1.35s ease-out .55s 2; }
.campaign-hero[data-cta-animation="nudge"] .campaign-hero-cta-label { animation: campaign-cta-nudge 1.1s cubic-bezier(.22,.82,.26,1) .65s 2; }

@keyframes campaign-reveal {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes campaign-cinematic { from { transform: scale(1.01) translate3d(-.5%, 0, 0); } to { transform: scale(1.07) translate3d(.5%, -.4%, 0); } }
@keyframes campaign-float { from { transform: translate(-50%, -49%); } to { transform: translate(-50%, -52%); } }
@keyframes campaign-cta-pulse {
  0%, 38%, 100% { opacity: 0; transform: scale(1); }
  48% { opacity: .46; }
  72% { opacity: 0; transform: scale(1.15); }
}
@keyframes campaign-cta-shimmer {
  0%, 18% { opacity: 0; transform: translateX(-180%) skewX(-18deg); }
  34% { opacity: .9; }
  70%, 100% { opacity: 0; transform: translateX(620%) skewX(-18deg); }
}
@keyframes campaign-cta-nudge {
  0%, 24%, 100% { transform: translateX(0); }
  42% { transform: translateX(5px); }
  58% { transform: translateX(-2px); }
  74% { transform: translateX(2px); }
}

@media (max-width: 700px) {
  .campaign-hero,
  .campaign-hero.is-mobile-preview { height: var(--campaign-mobile-height); min-height: 300px; }
  .campaign-hero-text,
  .campaign-hero-foreground,
  .campaign-hero-cta { top: var(--hero-mobile-y); left: var(--hero-mobile-x); }
  .campaign-hero-text { max-width: min(var(--hero-max-width), 90%); font-size: var(--hero-mobile-size); }
  .campaign-hero-foreground { width: var(--hero-mobile-width); }
}

.campaign-hero-preview.is-mobile-preview { width: min(390px, 100%); height: var(--campaign-mobile-height); min-height: 300px; margin-inline: auto; }
.campaign-hero-preview.is-mobile-preview .campaign-hero-text,
.campaign-hero-preview.is-mobile-preview .campaign-hero-foreground,
.campaign-hero-preview.is-mobile-preview .campaign-hero-cta { top: var(--hero-mobile-y); left: var(--hero-mobile-x); }
.campaign-hero-preview.is-mobile-preview .campaign-hero-text { max-width: min(var(--hero-max-width), 90%); font-size: var(--hero-mobile-size); }
.campaign-hero-preview.is-mobile-preview .campaign-hero-foreground { width: var(--hero-mobile-width); }

@media (prefers-reduced-motion: reduce) {
  .campaign-hero,
  .campaign-hero *,
  .campaign-hero *::before,
  .campaign-hero *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}