/* ===========================================
   CSS BUNDLE — All custom styles for Possibility Festival
   Loaded site-wide via <link> from Netlify.
   Scoped selectors ensure rules only apply to matching sections.
   =========================================== */


/* -------------------------------------------
   HEADING CLAMP — Fluid typography (992px → 1920px)
   Design reference: 1440px
   ------------------------------------------- */

/* --- Base Heading Tags --- */

h1,
.heading-style-h1 {
  font-size: clamp(77px, 7.78vw, 149px);
}

h2,
.heading-style-h2 {
  font-size: clamp(63px, 6.39vw, 122px);
}

h3,
.heading-style-h3 {
  font-size: clamp(56px, 5.69vw, 109px);
}

h4,
.heading-style-h4 {
  font-size: clamp(37px, 3.75vw, 72px);
}

h5,
.heading-style-h5 {
  font-size: clamp(22px, 2.22vw, 43px);
}

h6,
.heading-style-h6 {
  font-size: clamp(17px, 1.67vw, 32px);
}

/* --- Custom Heading Style Classes --- */

.heading-style-h1-110 {
  font-size: clamp(76px, 7.64vw, 147px);
}

.heading-style-h1-125 {
  font-size: clamp(86px, 8.68vw, 167px);
}

.heading-style-h1-132 {
  font-size: clamp(91px, 9.17vw, 176px);
}

.heading-style-h2-89 {
  font-size: clamp(61px, 6.18vw, 119px);
}

.heading-style-h3-78 {
  font-size: clamp(54px, 5.42vw, 104px);
}

.heading-style-74 {
  font-size: clamp(51px, 5.14vw, 99px);
}

.heading-style-64 {
  font-size: clamp(44px, 4.44vw, 85px);
}

.heading-style-59 {
  font-size: clamp(41px, 4.10vw, 79px);
}

.heading-style-h4-56 {
  font-size: clamp(39px, 3.89vw, 75px);
}

.heading-style-h4-52 {
  font-size: clamp(36px, 3.61vw, 69px);
}

.heading-style-39 {
  font-size: clamp(27px, 2.71vw, 52px);
}


/* --- Mobile heading overrides (≤ 767px) --- */

@media (max-width: 767px) {
  .heading-style-h1-132 {
    font-size: clamp(66px, 20.5vw, 90px);
  }

  .heading-style-h1-125 {
    font-size: clamp(66px, 20.5vw, 90px);
  }

  .heading-style-h1-110 {
    font-size: clamp(49px, 15.84vw, 70px);
  }

  .is-steps-heading {
    font-size: clamp(58px, 16vw, 78px);
  }
}


/* -------------------------------------------
   GLOBAL — overscroll
   ------------------------------------------- */

html {
  overscroll-behavior: none;
}


/* -------------------------------------------
   SPOTLIGHT — fog overlay + beam (home page)
   ------------------------------------------- */

[data-spotlight] .spotlight-overlay {
  --spotlight-x: 65%;
  --spotlight-y: 30%;
  --spotlight-rx: 28vw;
  /* ry grows with vh until it would exceed 0.85 × rx in pixels, then it's capped to stay proportional */
  --spotlight-ry: min(40vh, calc(var(--spotlight-rx) * 0.85));
  --spotlight-rotation: 0deg;

  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

[data-spotlight] .spotlight-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse var(--spotlight-rx) var(--spotlight-ry)
      at var(--spotlight-x) var(--spotlight-y),
    transparent 0%,
    transparent 82%,
    rgba(0, 0, 0, 0.20) 88%,
    rgba(0, 0, 0, 0.24) 92%,
    rgba(0, 0, 0, 0.24) 100%
  );
  transform: rotate(var(--spotlight-rotation));
}

[data-spotlight] .spotlight-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse var(--spotlight-rx) var(--spotlight-ry)
      at var(--spotlight-x) var(--spotlight-y),
    rgba(255, 238, 200, 0.06) 0%,
    rgba(255, 238, 200, 0.03) 40%,
    transparent 70%
  );
  transform: rotate(var(--spotlight-rotation));
}

[data-spotlight] .spotlight-beam {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* -------------------------------------------
   DONATION SPOTLIGHT — fog overlay, no beam
   ------------------------------------------- */

[data-spotlight-donate] .spotlight-overlay {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-rx: 41.5%;
  --spotlight-ry: 41.5%;
  --spotlight-rotation: 0deg;

  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

[data-spotlight-donate] .spotlight-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse var(--spotlight-rx) var(--spotlight-ry)
      at var(--spotlight-x) var(--spotlight-y),
    transparent 0%,
    transparent 82%,
    rgba(0, 0, 0, 0.20) 88%,
    rgba(0, 0, 0, 0.24) 92%,
    rgba(0, 0, 0, 0.24) 100%
  );
  transform: rotate(var(--spotlight-rotation));
}

[data-spotlight-donate] .spotlight-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse var(--spotlight-rx) var(--spotlight-ry)
      at var(--spotlight-x) var(--spotlight-y),
    rgba(255, 238, 200, 0.06) 0%,
    rgba(255, 238, 200, 0.03) 40%,
    transparent 70%
  );
  transform: rotate(var(--spotlight-rotation));
}


/* -------------------------------------------
   CAROUSEL — pin sub-pixel gap fix
   Lenis smooth scroll produces fractional scroll
   positions, causing ScrollTrigger's pin to land
   at e.g. top: 0.4px instead of 0. Force flush.
   ------------------------------------------- */

.pin-spacer > [data-carousel="polaroid"] {
  top: 0px !important;
}

/* Mobile: hide carousel cards. Animated carousel can't run smoothly on iOS
   Safari; this collapses the section to just heading/subheading. */
@media (max-width: 767px) {
  [data-carousel="polaroid"] .polaroid.vertical.is-carousel {
    display: none !important;
  }
}


/* -------------------------------------------
   NAV LINK SKEW — faux-italic hover on menu links
   ------------------------------------------- */

.menu-linkblock {
  transition: font-variation-settings 0.3s ease;
}

.menu-linkblock:hover {
  font-variation-settings: 'slnt' -12;
}


/* -------------------------------------------
   PRELOADER — mobile hide
   Bundle loads at end of <body>, so the IIFE that hides [data-load-wrap]
   fires AFTER first paint. CSS in the head applies before first paint,
   eliminating the brief flash of dark bg + grayscale logo on mobile.
   JS-based hide (barba-bundle.js:38 IIFE and runPageOnceAnimation mobile
   branch) remains as belt-and-suspenders for runtime state.
   ------------------------------------------- */

@media (max-width: 767px) {
  [data-load-wrap] {
    display: none !important;
  }
}


/* -------------------------------------------
   PRELOADER — failsafe auto-hide at 6s
   If the JS bundle crashes or the GSAP timeline hangs before setting
   display:none, this animation fades the wrap out so the site stays
   usable. display isn't animatable — using opacity + visibility +
   pointer-events. Inline display:none from GSAP still hides normally.
   ------------------------------------------- */

@keyframes pfest-loader-failsafe {
  0%, 99% { opacity: 1; visibility: visible; pointer-events: auto; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

[data-load-wrap] {
  animation: pfest-loader-failsafe 6s linear forwards;
}


/* -------------------------------------------
   MENU BUTTON — mobile pre-hide
   Desktop: preloader wrap covers the button during JS setup.
   Mobile: preloader is skipped, so the button would flash visible
   until createMenuButtonRevealST's fromTo fires. Pre-hide via CSS
   matches GSAP's yPercent: 110 target state — no visible jump when
   GSAP takes over.
   ------------------------------------------- */

@media (max-width: 767px) {
  .desktop_menu-button {
    transform: translate(0, 110%);
  }

  .wf-design-mode .desktop_menu-button,
  .w-editor .desktop_menu-button {
    transform: none !important;
  }
}


/* -------------------------------------------
   FESTIVALS LIST — hover (hover-capable) + scroll-activate (no-hover)
   Register page festivals list. Hover-capable devices (mouse /
   trackpad) use :hover on the list to dim all headings and
   highlight the one being hovered. No-hover devices (touch)
   use JS-toggled classes driven by a virtual 45vh activation
   line (see festival-hover.js):
     .festivals_list.is-list-active         — line is inside the list
     .festivals_item-link.is-active         — line is inside this item
     [data-festival].is-active              — the matching polaroid
   Split on (hover: hover) / (hover: none), not viewport width —
   viewport is a proxy, hover capability is the real signal.
   Keeps :hover off touch devices that would otherwise require a
   double-tap to activate the link.
   ------------------------------------------- */

.heading-style-h4-56.is-festivals {
  transition: color 0.3s ease, font-variation-settings 0.3s ease;
}

.festivals_register-tag {
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .festivals_list:hover .heading-style-h4-56.is-festivals {
    color: #c4c4c4;
  }
  .festivals_list:hover .festivals_item-link:hover .heading-style-h4-56.is-festivals {
    color: #000000;
    font-variation-settings: 'slnt' -12;
  }
  .festivals_list:hover .festivals_item-link:hover .festivals_register-tag {
    background-color: #2D9EEA;
  }
}

/* !important on polaroid display/opacity/transform to override inline styles
   Webflow mouse interactions write on mousemove (inline without !important
   loses to CSS with !important). JS also strips inline display/opacity/
   transform from each polaroid on no-hover init as first-line defense. */
@media (hover: none) {
  [data-festival]:not(.festivals_item-link) {
    display: flex !important;
    opacity: 0 !important;
    transform: scale(0.9) rotate(3deg) !important;
    transition: opacity 0.4s ease, transform 0.4s ease;
    will-change: opacity, transform;
  }
  .festivals_list.is-list-active .heading-style-h4-56.is-festivals {
    color: #c4c4c4;
  }
  .festivals_item-link.is-active .heading-style-h4-56.is-festivals {
    color: #000000;
    font-variation-settings: 'slnt' -12;
  }
  .festivals_item-link.is-active .festivals_register-tag {
    background-color: #2D9EEA;
  }
  [data-festival].is-active:not(.festivals_item-link) {
    opacity: 1 !important;
    transform: scale(1) rotate(3deg) !important;
  }
}


/* -------------------------------------------
   BADLY CALLOUT — hide below 1250px
   ------------------------------------------- */

@media (max-width: 1239px) {
  .badly-callout {
    display: none;
  }
}


/* -------------------------------------------
   CHICAGO CALLOUT — hide below 1130px
   ------------------------------------------- */

@media (max-width: 1129px) {
  .chicago-callout {
    display: none;
  }
}


/* -------------------------------------------
   MODAL — attribute-driven show/hide
   ------------------------------------------- */

[data-modal] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

[data-modal="active"] {
  opacity: 1;
  visibility: visible;
}


/* -------------------------------------------
   NEWSLETTER FORM — mobile step visibility
   ------------------------------------------- */

[data-newsletter-step][hidden],
[data-newsletter-heading-step][hidden] {
  display: none !important;
}


/* -------------------------------------------
   VIMEO PLAYER — minimal custom player
   Click-to-play, click-to-pause, mute toggle (bottom-right).
   Vimeo's native chrome stripped via ?background=1 URL param.
   ------------------------------------------- */

.vimeo-player {
  pointer-events: auto;
  color: #efeeec;
  isolation: isolate;
  background-color: #131313;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 46.875rem;
  max-width: 100%;
  aspect-ratio: 46.875 / 31.25;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.vimeo-player[data-vimeo-update-size="cover"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.vimeo-player__iframe {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vimeo-player__before {
  padding-top: 62.5%;
}

/* Placeholder */
.vimeo-player__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  display: block;
  position: absolute;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"] .vimeo-player__placeholder {
  opacity: 0;
}

/* Dark overlay */
.vimeo-player__dark {
  opacity: 0.5;
  pointer-events: none;
  background-color: #131313;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  position: absolute;
}

.vimeo-player:not([data-vimeo-playing="true"]) .vimeo-player__dark {
  opacity: 0.33;
}

.vimeo-player:not([data-vimeo-activated="true"]):not([data-vimeo-playing="true"]) .vimeo-player__dark {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"] .vimeo-player__dark {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vimeo-player:hover .vimeo-player__dark {
    opacity: 0.33 !important;
  }
}

/* Play / Pause click areas */
.vimeo-player__play,
.vimeo-player__pause {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.vimeo-player__btn {
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  background-color: #64646433;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 9em;
  height: 9em;
  transition: opacity 0.3s linear;
  display: flex;
  position: relative;
}

.vimeo-player__btn-play-svg {
  width: 40%;
}

.vimeo-player__btn-pause-svg {
  width: 50%;
}

.vimeo-player .vimeo-player__pause {
  display: none;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__pause {
  display: flex;
}

.vimeo-player .vimeo-player__pause .vimeo-player__btn {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"]:not([data-vimeo-playing="true"]) .vimeo-player__pause .vimeo-player__btn,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]:hover .vimeo-player__pause .vimeo-player__btn {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"] .vimeo-player__pause .vimeo-player__btn {
    opacity: 0 !important;
  }
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__play {
  opacity: 0;
}

/* Loading spinner */
.vimeo-player__loading-svg {
  width: 9em;
  animation: vimeo-player-spin 1s linear infinite;
  transform-origin: center center;
}

@keyframes vimeo-player-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vimeo-player__loading {
  pointer-events: none;
  color: #00ADEF;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
  display: flex;
  position: absolute;
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__loading {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"] .vimeo-player__loading {
  opacity: 0;
}

/* Mute button — bottom-right corner, always visible */
.vimeo-player__mute {
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  bottom: 1em;
  right: 1em;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vimeo-player__volume-up-svg,
.vimeo-player__volume-mute-svg {
  width: 100%;
  position: absolute;
}

.vimeo-player .vimeo-player__mute svg:nth-child(2),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__mute svg:nth-child(1),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(2) {
  display: block;
}