/* ===========================================
   Sweepstakes & Contests | Angel City FC
   HubSpot self-contained landing page

   Design system pulled from 2027Renewals:
   sol rosa palette, Inter type scale, frosted
   glass surfaces, dreamy photo backdrops.
   This page is dark-only - no theme toggle -
   so the dark values are the defaults rather
   than being gated behind [data-theme].
   =========================================== */

:root {
  --sol-rosa: #f1b1a5;
  --sol-rosa-dark: #e0a094;
  --sol-rosa-soft: rgba(241, 177, 165, 0.18);
  --sol-rosa-glow: rgba(241, 177, 165, 0.30);

  --swp-dark: #111111;
  --swp-dark-mid: #1a1a1a;

  --line-white: #ffffff;
  --pitch-black: #000000;

  /* Elevation scale: e1 resting hairline, e2 cards, e3 hero surfaces */
  --shadow-e2: 0 8px 28px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.24);
  --shadow-e3: 0 28px 70px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.32);

  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html:has(.acfc-swp-app) { overflow-x: hidden; }

/* HubSpot SR offer bar (sr-offer-bar-01): omit on the Sweepstakes landing only */
html:has(.acfc-swp-app) .sr-offer-bar-01 { display: none !important; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- App wrapper ---------- */

.acfc-swp-app {
  width: 100%;
  max-width: 100%;
  background: var(--swp-dark);
  color: var(--line-white);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* HubSpot's global theme targets h1–h6 directly with Anton (or another display
   face), which wins over our body declaration because it is more specific.
   Same fix as 2027Renewals and SingleGameTicketsV2: reset every heading inside
   the app wrapper before individual classes style them further. */
.acfc-swp-app h1,
.acfc-swp-app h2,
.acfc-swp-app h3,
.acfc-swp-app p,
.acfc-swp-app span,
.acfc-swp-app em {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

/* height: auto intentionally omitted — it would outrank the hero and dreamy
   images' explicit height: 100% rules due to higher selector specificity.
   Images that need auto height (none currently) can set it themselves. */
.acfc-swp-app img { max-width: 100%; display: block; }
.acfc-swp-app a { color: inherit; }

.acfc-swp-app a,
.acfc-swp-app button,
.acfc-swp-app [role="button"] { cursor: pointer; }

/* ---------- Container ---------- */

.angelcity2026-container {
  max-width: 1340px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

@media (max-width: 600px) {
  .angelcity2026-container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- Scroll reveal ---------- */

.acfc-swp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

.acfc-swp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .acfc-swp-app *,
  .acfc-swp-app *::before,
  .acfc-swp-app *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .acfc-swp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================
   HERO
   ============================================ */

.acfc-swp-hero {
  position: relative;
  min-height: clamp(500px, 74svh, 700px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--swp-dark);
}

.acfc-swp-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.acfc-swp-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Slight push on the source photo, then a one-time settle so the frame
     resolves into place instead of snapping in flat. */
  filter: saturate(1.06) contrast(1.04);
  animation: acfc-swp-hero-settle 2.6s var(--ease-out) both;
}

@keyframes acfc-swp-hero-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

/* Dense pocket behind the copy that clears quickly to the right, so the
   crowd stays legible rather than sitting under a flat grey wash. */
.acfc-swp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(125% 105% at 0% 50%, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.66) 28%, rgba(0, 0, 0, 0.22) 60%, transparent 84%),
    linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.14) 36%, transparent 66%),
    radial-gradient(145% 125% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.45) 100%);
}

.acfc-swp-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 72px);
}

.acfc-swp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sol-rosa);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.acfc-swp-hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sol-rosa);
  box-shadow: 0 0 0 0 var(--sol-rosa-glow);
  animation: acfc-swp-pulse 2s var(--ease-out) infinite;
}

@keyframes acfc-swp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(241, 177, 165, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(241, 177, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(241, 177, 165, 0); }
}

/* Two-tier crescendo: the setup line sets it at full heading weight and size,
   then the payoff line steps up again in scale, weight, and color. */
.acfc-swp-hero-title {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: clamp(2rem, 5.6vw, 3.65rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--line-white);
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  max-width: 900px;
  /* Tight edge shadow for legibility plus a wide soft one for depth; a
     single large blur muddies the letterforms at this weight. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), 0 10px 34px rgba(0, 0, 0, 0.45);
}

.acfc-swp-hero-title-line {
  display: block;
  font-size: 0.78em;
}

.acfc-swp-hero-title em {
  display: block;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-style: normal;
  font-size: 1em;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--sol-rosa);
  margin-top: 0.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 34px rgba(0, 0, 0, 0.4);
}

/* Resolves the sentence after the payoff line, so it stays part of the H1
   without competing with it for weight. */
.acfc-swp-hero-title-tail {
  display: block;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 0.6em;
}

/* Cascade the hero in rather than landing every element at once. */
.acfc-swp-hero-title { transition-delay: 0.06s, 0.06s; }

@media (max-width: 768px) {
  .acfc-swp-hero {
    min-height: clamp(420px, 88svh, 580px);
  }

  /* The left-weighted scrim is wrong once the copy centers. */
  .acfc-swp-hero-overlay {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.35) 100%),
      radial-gradient(140% 110% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.5) 100%);
  }

  .acfc-swp-hero-content {
    padding-bottom: clamp(56px, 10vw, 72px);
  }

  .acfc-swp-hero-content .angelcity2026-container {
    text-align: center;
  }

  .acfc-swp-hero-title {
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .acfc-swp-hero-img { object-position: center 20%; }
}

/* ============================================
   SIGNATURE SYSTEM - dreamy photo backdrop
   ============================================ */

.acfc-swp-signature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.acfc-swp-signature > .angelcity2026-container {
  position: relative;
  z-index: 1;
}

/* Dreamy blurred photo layer - keeps grit/intensity, never loses the image */
.acfc-swp-dreamy {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.acfc-swp-dreamy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(8px) saturate(1.15) contrast(1.06);
}

/* Legibility scrim so the card copy stays readable over the photo */
.acfc-swp-dreamy::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 16% 0%, rgba(241, 177, 165, 0.2) 0%, transparent 52%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.62) 0%, rgba(8, 8, 8, 0.78) 52%, var(--swp-dark) 100%);
}

/* ============================================
   CHECK BACK SOON
   ============================================ */

.acfc-swp-soon {
  padding: clamp(80px, 10vw, 120px) 0;
}

/* Frosted-glass surface */
.acfc-swp-frost {
  position: relative;
  background: rgba(26, 26, 26, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-e3);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

/* Hairline highlight along the top edge reads as polished glass */
.acfc-swp-frost::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, rgba(241, 177, 165, 0.4), transparent);
  pointer-events: none;
}

/* Solid fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .acfc-swp-frost { background: rgba(26, 26, 26, 0.95); }
}

/* The bloom lives on this wrapper rather than on the card itself: the card's
   backdrop-filter makes it a stacking context, so a negative z-index child
   would paint over the glass instead of behind it. */
.acfc-swp-soon-stage {
  position: relative;
  isolation: isolate;
}

/* Soft rosa bloom behind the glass so the card reads as lifted off the photo
   rather than pasted onto it. */
.acfc-swp-soon-stage::before {
  content: '';
  position: absolute;
  inset: -16% -10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(241, 177, 165, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.acfc-swp-soon-card {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 64px) clamp(44px, 6.5vw, 72px);
  text-align: center;
}

/* Icon + eyebrow sit side-by-side on one row, centered above the title. */
.acfc-swp-soon-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(16px, 2.2vw, 22px);
}

.acfc-swp-soon-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 5vw, 44px);
  height: clamp(36px, 5vw, 44px);
  border-radius: var(--radius-full);
  border: 1px solid rgba(241, 177, 165, 0.35);
  background: var(--sol-rosa-soft);
  color: var(--sol-rosa);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 6px 18px rgba(0, 0, 0, 0.3);
}

.acfc-swp-soon-icon svg {
  width: 52%;
  height: 52%;
}

.acfc-swp-soon-eyebrow {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sol-rosa);
}

.acfc-swp-soon-title {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: clamp(1.5rem, 3.8vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--line-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.4);
}

.acfc-swp-soon-title em {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-style: normal;
  font-weight: 900;
  color: var(--sol-rosa);
}

.acfc-swp-soon-body {
  margin: 0 auto;
  max-width: 48ch;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
}

/* ---------- HubSpot wrapper resets ---------- */

/* HubSpot drops modules inside bootstrap-ish grid wrappers that add gutters
   and a max-width; both sections here are intentionally full-bleed. */
.container:has(.acfc-swp-hero),
.row:has(.acfc-swp-hero),
[class*="col"]:has(.acfc-swp-hero),
.container:has(.acfc-swp-app),
.row:has(.acfc-swp-app),
[class*="col"]:has(.acfc-swp-app) {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}