/* Bèl Rèv ATL — self-hosting tweaks. Ours, not Webflow-generated. */

/* Webflow badge is injected by webflow.js at runtime; not required off Webflow hosting */
.w-webflow-badge { display: none !important; }

/* Paint the page backdrop black: kills the thin white sliver at the right edge
   (body was white under sections sized with vw rounding). */
html { background-color: #000; color-scheme: dark; overflow-anchor: none; /* scroll anchoring fights the banner pin */ }
body, .body { background-color: #000; }

/* ---------- Sticky top menu ----------
   Webflow marks .nav-grig position:fixed, but .wrapper-home-section (an
   ancestor — the nav is nested inside the hero markup) sets perspective,
   which turns it into the containing block for fixed descendants: the nav
   scrolled away with the hero. Perspective is relocated below to the hero
   content branches, which do not contain the nav. */
.nav-grig {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 990;
  background: rgba(10, 5, 22, .75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .45);
}
.wrapper-home-section { perspective: none !important; }
.wrapper-home, .wrapper-image { perspective: 1500px; }

/* ---------- Type floors: Webflow sized text in vw, which collapses at
   mid widths (12px body copy at 992px). clamp() keeps every band readable
   while preserving the intended look at the design width. ---------- */
.paragraph-408 { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; }
.accor-item-paragraph { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.link-item { font-size: clamp(15px, 1.2vw, 17px); }
label { font-size: 15px; }
.w-input, .text-field { font-size: 15px; }

/* ---------- Type ceilings: full-width layout on big monitors, but the
   remaining vw-sized text freezes at its ~1440px rendering instead of
   growing to poster size. ---------- */
@media (min-width: 1440px) {
  .heading { font-size: 64px; line-height: 106px; } /* keep the 1.667 design ratio: line-height was still vw-based after the font froze, drifting headings ~44px below photo tops on big screens */
  .heading-8 { font-size: 56px; }
  .text-heading-faq { font-size: 84px; }
  .email-link { font-size: 48px; line-height: 1.25; }
  .accor-title, .accor-icon-default { font-size: 28px; }
  .submit-button { font-size: 20px; line-height: 28px; }
  .wrapper-text-head { font-size: 172px; }
  .nav-grig { height: 72px; }
}

/* ---------- Navigation ---------- */
.link-item { width: auto !important; white-space: nowrap; transition: color .25s ease, text-shadow .25s ease; }
.link-item:hover {
  color: #77fff4;
  text-shadow: 0 0 12px rgba(119, 255, 244, .55);
  background-image: none !important; /* Webflow's yellow gradient */
  border-bottom: none !important;    /* Webflow's yellow underline */
}
.menu-left, .menu-right { display: flex; align-items: center; gap: 1.8vw; }
@media (min-width: 992px) {
  .nav-menu-list { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 992px) {
  .nav-grig { align-items: center; }
}
@media (max-width: 991px) {
  /* bar flush to the top, logo + burger vertically centered */
  .nav-grig {
    margin-top: 0 !important;
    height: 60px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 12px;
  }
  .image-brand { max-height: 40px; width: auto; }
  /* open hamburger menu: full-viewport overlay (Webflow's menu box is only
     bar-height, so its centered link list spilled off the top of the screen) */
  .nav-menu[data-nav-menu-open] {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    background-color: rgba(10, 5, 22, .97);
  }
  .nav-menu[data-nav-menu-open] .nav-menu-list {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
}
@media (max-width: 991px) {
  /* hamburger overlay: stack both link groups, larger touch targets */
  .menu-left, .menu-right { flex-direction: column; gap: 1.2rem; }
  .nav-menu .link-item { font-size: 18px; }
}

/* ---------- Buttons: teal pills get glow + press feedback ---------- */
.button-type-submit {
  width: auto;
  min-width: min(12vw, 170px);
  padding: .55em 1.6em;
  font-size: 17px;
  transition: background-color .3s ease, box-shadow .3s ease, transform .15s ease;
}
.button-type-submit:hover {
  background-color: #1ea6ab;
  box-shadow: 0 0 16px 2px rgba(119, 255, 244, .55), 0 0 42px 8px rgba(25, 131, 135, .35);
  transform: translateY(-2px);
}
.button-type-submit:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 0 8px 1px rgba(119, 255, 244, .45);
}
.button-type-submit:focus-visible { outline: 2px solid #77fff4; outline-offset: 2px; }

/* ---------- Hero CTAs (Sponsorship + Get Tickets): ~30% larger ---------- */
.button-type-submit.sponsor-cta,
.button-type-submit.tickets-cta,
.button-type-submit.banner-cta {
  font-size: 22px;
  padding: .65em 2em;
}

/* "Get In Touch" header above the contact buttons (styled by .email-link) */
.get-in-touch { grid-column: 1 / -1; margin-bottom: 4px; }

/* ---------- Footer contact buttons: grid on desktop, stacked through tablet
   (2 columns at tablet width made button labels wrap) ---------- */
@media (min-width: 992px) {
  .w-layout-cell:has(> .div-block-5) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-content: start;
  }
  .div-block-5 { justify-content: flex-start; margin-bottom: 0; }
  .div-block-5 .button-type-submit { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
}
@media (max-width: 991px) {
  /* icon + button rows: constrained width, anchored left like Submit */
  .div-block-5 { width: min(72%, 300px); margin-left: 0; margin-right: auto; justify-content: flex-start; }
  .div-block-5 .button-type-submit { flex: 1 1 auto; min-width: 0; }
}

/* ---------- "Dream Big." always nearly fills its space ---------- */
.text-head-contact {
  font-size: clamp(64px, 16.5vw, 210px) !important;
  line-height: 1.02 !important;
  margin-bottom: .5em !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .text-head-contact { margin-bottom: .75em !important; }
}

/* Tickets section grows with its content at every width. The whole ancestor
   chain had fixed heights, so taller content spilled under the FAQ section. */
.wrapper-relative-contact { height: auto !important; min-height: 100vh; padding-bottom: 72px; }
#tickets, #contact, #contact .container, .wrapper-contact { height: auto !important; min-height: 0 !important; }

/* The section's decorative overlay (absolute, inset 0, z-index 9) was
   swallowing every click — Get Tickets and the LOOP link were unclickable */
.overlay-contact { pointer-events: none; }

/* ---------- Tickets block under Dream Big ----------
   .tickets-when also carries Webflow's .subline-contact class, whose
   breakpoint rules are more specific — hence the !important floor. */
.wrapper-text-contact { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6%; text-align: center; color: #fff; }
.wrapper-text-contact .tickets-when {
  font-family: "Droid Serif", serif;
  font-weight: 700;
  font-size: clamp(20px, 6.5vw, 42px) !important;
  white-space: nowrap;
  line-height: 1.35 !important;
  margin: 0 0 8px;
}
.wrapper-text-contact .tickets-details { font-size: clamp(14px, 1.3vw, 17px); opacity: .85; margin: 0 0 20px; }
.wrapper-text-contact .no-late { color: #b9a2ea; font-weight: 700; }
.wrapper-text-contact .tickets-venue { margin: 0; }
.wrapper-text-contact .tickets-venue-link { font-family: "Droid Serif", serif; font-weight: 700; font-size: clamp(28px, 2.9vw, 42px); color: #77fff4; letter-spacing: .08em; text-decoration: none; transition: text-shadow .25s ease; }
.wrapper-text-contact .tickets-venue-link:hover { text-shadow: 0 0 14px rgba(119, 255, 244, .7); }
.wrapper-text-contact .tickets-address { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; margin: 0 0 28px; opacity: .92; }
.wrapper-text-contact .tickets-cta { margin-top: 2px; }

/* ---------- The Dream: breathing room between photos and text ---------- */
#AboutTheDream .w-layout-layout {
  grid-column-gap: clamp(36px, 4.5vw, 80px) !important;
  grid-row-gap: clamp(20px, 2vw, 32px) !important;
  align-items: start;
}
#AboutTheDream .w-layout-cell { align-self: start !important; }

/* ---------- Section divider (lines + four-point star) ---------- */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: min(900px, 86%);
  margin: 0 auto;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
}
.section-divider::before { background: linear-gradient(to right, rgba(185, 162, 234, 0), #b9a2ea 18%, #b9a2ea); }
.section-divider::after { background: linear-gradient(to left, rgba(185, 162, 234, 0), #b9a2ea 18%, #b9a2ea); }
.dreamers-wrap .section-divider:last-child { margin-top: 32px; }
.divider-star {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  fill: #e9e0ff;
  filter: drop-shadow(0 0 7px rgba(185, 162, 234, .95));
}

/* ---------- The Dreamers section ---------- */
.dreamers { background-color: #000; color: #fff; padding: 4vh 0 4vh; }
.dreamers-wrap { display: flex; flex-direction: column; align-items: center; gap: 48px; }
/* Match The Dream/The Experience headings exactly: Webflow sizes them via a
   scoped CSS variable this section doesn't inherit. Measured per band. */
.dreamers-heading {
  text-align: center;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 4.5vw;
}
@media (max-width: 991px) {
  .dreamers-heading { font-size: 8vw; }
}
@media (min-width: 1440px) {
  .dreamers-heading { font-size: 64px; line-height: 106px; }
}
.dreamers-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  width: 100%;
  perspective: 1400px;
}
.dreamers-image-wrap { display: flex; justify-content: center; }
.dreamers-photo { width: 100%; max-width: 480px !important; }
.dreamers-text { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; margin: 0; }
.dreamers-text .dreamers-para { font-size: inherit; line-height: inherit; margin: 0; }
.dreamers-text .dreamers-para + .dreamers-para { margin-top: 20px; }
.dreamers-para strong { font-weight: 700; color: #fff; }
@media (max-width: 767px) {
  .dreamers-grid { grid-template-columns: 1fr; }
  .dreamers-photo { max-width: min(90%, 420px) !important; }
}

/* ---------- Section photos: tighter curve + solid teal offset shadow ---------- */
.image-4 {
  border-radius: 100px !important;
  box-shadow: 15px 15px 0 0 #198387;
}

/* ---------- Hero "Setting the Stage" graphic: 75% width, centered, all sizes ---------- */
.image-8 {
  width: min(65vw, 950px) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Ultrawide: content stays a centered 1600px column ----------
   Backgrounds (hero video, section colors) live on the full-bleed <section>
   elements; only the inner containers are capped, so colors/video always run
   edge to edge while text, photos, and grids keep normal-screen proportions. */
@media (min-width: 1600px) {
  .w-layout-blockcontainer { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
  /* grids that sit directly under a section (e.g. the footer) skip the
     blockcontainer wrapper — cap them too */
  .section > .w-layout-layout { max-width: 1600px; margin-left: auto; margin-right: auto; }
  .nav-menu-list { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* Nav logo: never taller than the menu bar */
@media (min-width: 992px) {
  .brand-logo { display: flex; align-items: center; justify-content: center; }
  .image-brand { max-height: 52px; width: auto; }
}

/* ---------- Tablet and below: tighter photo corners, calmer headings ---------- */
@media (max-width: 991px) {
  .image-4 { border-radius: 50px !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .heading, .dreamers-heading { font-size: 6.5vw; line-height: 1.55; }
}

/* ---------- Mobile: stacked grids show the photo first ---------- */
@media (max-width: 767px) {
  #AboutTheDream .w-layout-cell:has(.image-4) { order: -1; }
  /* row 2 keeps heading+para+photo in ONE cell on mobile (its separate
     photo cell is hidden here) — hoist the photo above the text */
  #AboutTheDream .cell-4 .image-4 { order: -1; }
  /* contact section: everything left-aligned on mobile */
  .get-in-touch { text-align: left; }

}

/* ---------- Bigger type on phones (portrait and landscape bands) ---------- */
@media (max-width: 767px) {
  .paragraph-408, .accor-item-paragraph { font-size: 16px; line-height: 1.55; }
  .button-type-submit, .div-block-5 { font-size: 16px; }
  .subline-contact { font-size: 17px; }
  label { font-size: 15px; }
  /* ≥16px also stops iOS Safari's auto-zoom when focusing a field */
  .text-field, .w-input { font-size: 16px; }
}

/* FAQ chevrons: point down when closed, up when open (JS mirrors these
   angles with inline styles after the first click) */
.accor-icon-default { transform: rotateZ(90deg); transition: transform .3s ease; }
.accor-item-list.w--current .accor-icon-default { transform: rotateZ(-90deg) !important; } /* beats ix2 inline styles on load */

/* ---------- Accessibility & environment hardening ---------- */
.link-item:focus-visible,
.accor-item-list:focus-visible,
.tickets-venue-link:focus-visible,
.brand-logo:focus-visible,
.wrapper-link-item:focus-visible {
  outline: 2px solid #77fff4;
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* FAQ answers live outside the question links now: text is selectable and
   answers can contain real links */
.accor-wrapper-paragraph { user-select: text; cursor: auto; }
.accor-item-paragraph a, .faq-link { color: #77fff4; text-decoration: underline; text-underline-offset: 3px; }
.accor-item-paragraph a:hover, .faq-link:hover { text-shadow: 0 0 10px rgba(119, 255, 244, .6); }
/* ---------- Ticket banner just under the hero ---------- */
.tickets-banner {
  background-color: #000;
  color: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0 40px; /* top clears the fixed nav */
}
.tickets-banner .w-layout-blockcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7vh, 72px);
  /* the Webflow .container squeezes to ~57vw, wrapping the tagline */
  width: min(94%, 1100px);
  max-width: none !important;
  padding-left: 0;
  padding-right: 0;
}
.banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 5%;
  text-align: center;
}
.banner-tagline {
  font-family: "Droid Serif", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 31px); /* one step above the dates */
  line-height: 1.3;
  margin: 0;
}
.banner-dates { font-family: "Droid Serif", serif; font-weight: 700; font-size: clamp(18px, 2.1vw, 27px); margin: 0; text-align: center; }
.tickets-banner .section-divider { margin: 0; width: 100%; }

/* ---------- "Dream Big." sign-off after the FAQs ---------- */
.dream-big-signoff {
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16vh 4%;
}
.dream-big-signoff .wrapper-mid-contact { position: static; }
.dream-big-signoff .text-head-contact { margin-bottom: 0 !important; }

/* tickets section: content-sized now that Dream Big moved out */
.wrapper-relative-contact { min-height: 0 !important; padding-top: 0; }

/* header for the standalone tickets section */
.wrapper-text-contact .tickets-heading { margin-bottom: 20px; text-align: center; width: 100%; }

/* banner line-break control: segments never break internally, so wrapping can
   only happen after "Atlanta's" and after "19th" */
.no-break { white-space: nowrap; }

/* twinkling speckle stars behind the banner */
.tickets-banner { position: relative; overflow: hidden; }
.tickets-banner .w-layout-blockcontainer { position: relative; z-index: 1; }
.banner-stars { position: absolute; inset: 0; pointer-events: none; }
.banner-star {
  position: absolute;
  border-radius: 50%;
  background: #e9e0ff;
  box-shadow: 0 0 6px 1px rgba(185, 162, 234, .5);
  opacity: .12;
  animation: banner-twinkle var(--tw-dur, 4s) ease-in-out var(--tw-delay, 0s) infinite alternate;
}
@keyframes banner-twinkle {
  from { opacity: .08; transform: scale(.75); }
  to { opacity: var(--tw-max, .6); transform: scale(1.2); }
}


/* tickets not on sale yet: Coming Soon badge in place of the CTA */
.wrapper-text-contact .tickets-coming-soon {
  font-family: "Droid Serif", serif;
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 23px);
  letter-spacing: .22em;
  text-indent: .22em; /* visually recenter tracked-out text */
  text-transform: uppercase;
  color: #b9a2ea;
  border: 1px solid rgba(185, 162, 234, .45);
  border-radius: 99vw;
  padding: .7em 1.9em;
  margin: 10px 0 0;
  text-shadow: 0 0 18px rgba(185, 162, 234, .45);
}

/* ---------- Reduced motion: nothing may depend on an animation to appear.
   Webflow's engine skips its interactions under reduced motion but its
   initial hidden states can persist — force the affected elements visible.
   (.particle-wrapp is the hero's Setting-the-Stage graphic.) ---------- */
@media (prefers-reduced-motion: reduce) {
  .particle-wrapp, [data-w-id] { opacity: 1 !important; }
}

/* Reduced transparency: solid nav bar instead of the blurred scrim */
@media (prefers-reduced-transparency: reduce) {
  .nav-grig {
    background: rgba(10, 5, 22, .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}