/* =========================================================================
   Leave Studio — polish layer
   Loaded AFTER the app bundle. All overrides are prefixed with .site-wrap
   so they out-specify the runtime-injected app styles.
   ========================================================================= */

/* ---------- 1. Lenis: official helpers (missing from the bundle) -------- */
html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Anchor targets clear the sticky header (Lenis reads scroll-margin-top). */
.site-wrap [id] { scroll-margin-top: 102px; }
@media (max-width: 980px) { .site-wrap [id] { scroll-margin-top: 90px; } }
@media (max-width: 700px) { .site-wrap [id] { scroll-margin-top: 86px; } }

/* ---------- 2. Design tokens for accessible variants -------------------- */
:root {
  --px-orange-text: #a3401b; /* small text on light bgs — 4.7:1+ everywhere */
  --px-orange-mid: #c25122;   /* large orange on tinted bgs — passes 3:1 */
  --px-muted: #56645a;        /* muted micro copy on light bgs — 4.7:1+ */
  --px-tab: #6b7a6d;          /* inactive atlas tab — passes 3:1 */
}

/* ---------- 3. Contrast: orange micro text (light sections only) -------- */
.site-wrap .section-label:not(.section-label-light) .section-label-number,
.site-wrap .eyebrow-spark,
.site-wrap .roadmap-step > span,
.site-wrap .trip-row-index,
.site-wrap .partner-list div span,
.site-wrap .about-description .micro-label {
  color: var(--px-orange-text);
}
/* On tinted/darker light bgs the larger orange needs 3:1, not 4.5:1 */
.site-wrap .contact-cross,
.site-wrap .contact-content .display-title em {
  color: var(--px-orange-mid);
}
/* Dark sections keep the brand orange (it already passes there). */

/* ---------- 4. Contrast: muted greys on light bgs ----------------------- */
.site-wrap .team-chart-months,
.site-wrap .team-preview-top,
.site-wrap .trip-row-main small,
.site-wrap .atlas-metrics span,
.site-wrap .atlas-metrics small,
.site-wrap .atlas-image-foot span,
.site-wrap .atlas-image-foot small,
.site-wrap .atlas-identity small,
.site-wrap .atlas-status,
.site-wrap .atlas-chapter-label,
.site-wrap .atlas-trip-list > .micro-label,
.site-wrap .atlas-tab-end,
.site-wrap .weekend-index-copy > .micro-label,
.site-wrap .weekend-index-copy p,
.site-wrap .hero-action-note,
.site-wrap .hero-side-note,
.site-wrap .roadmap-step p,
.site-wrap .founder-card > p,
.site-wrap .sample-disclaimer,
.site-wrap .feature-savings p,
.site-wrap .savings-mini strong small,
.site-wrap .savings-mini-bottom span,
.site-wrap .contact-kicker,
.site-wrap .contact-bottom p {
  color: var(--px-muted);
}
/* Inactive atlas tabs: 26px serif needs 3:1; captions need 4.5:1 */
.site-wrap .atlas-tab:not(.is-active) { color: var(--px-tab); }
.site-wrap .atlas-tab:not(.is-active):hover { color: var(--forest); }
.site-wrap .atlas-tab span { color: var(--px-muted); }
/* Leave days: white on a deeper orange clears 4.5:1 */
.site-wrap .bridge-day.leave-day { background: var(--px-orange-mid); }

/* ---------- 5. Contrast: white text over photography -------------------
   Scrims are tuned so 9px captions clear 4.5:1 even against a worst-case
   pure-white photo (alpha >= .85 where the text sits). ------------------- */
.site-wrap .hero-photo-shade {
  background: linear-gradient(
    to top,
    rgba(11, 28, 24, .9) 0%,
    rgba(11, 28, 24, .84) 14%,
    transparent 46%
  );
}
.site-wrap .hero-photo-caption,
.site-wrap .atlas-image-top,
.site-wrap .atlas-image-bottom {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 14px rgba(0, 0, 0, .55);
}
.site-wrap .atlas-image-overlay {
  background: linear-gradient(
    to bottom,
    rgba(4, 21, 13, .92) 0%,
    rgba(4, 21, 13, .86) 15%,
    transparent 46%,
    rgba(4, 21, 13, .88) 78%,
    rgba(4, 21, 13, .92) 100%
  );
}
.site-wrap .partners-photo-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 16px rgba(0, 0, 0, .65);
}
.site-wrap .partners-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(
    to top,
    rgba(9, 32, 26, .92) 0%,
    rgba(9, 32, 26, .8) 22%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.site-wrap .partners-photo-label { z-index: 2; }

/* ---------- 6. Micro-interactions --------------------------------------- */
.site-wrap .weekend-dots span {
  transition: transform .3s ease;
}
.site-wrap .weekend-dots span:hover { transform: scale(1.4); }

.site-wrap .bridge-day {
  transition: transform .25s ease, box-shadow .25s ease;
}
.site-wrap .bridge-day:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(35, 57, 43, .16);
}

.site-wrap .partner-list div {
  transition: padding-left .3s ease, background-color .3s ease;
}
.site-wrap .partner-list div:hover {
  padding-left: 10px;
  background: rgba(29, 48, 41, .05);
}

.site-wrap .roadmap-step { transition: border-color .3s ease; }
.site-wrap .roadmap-step:hover { border-top-color: var(--orange); }

.site-wrap .button-primary:active,
.site-wrap .button-light:active,
.site-wrap .button-outline:active {
  transform: translateY(0) scale(.985);
}
.site-wrap .header-cta:active { transform: scale(.96); }

.site-wrap .menu-toggle { transition: color .25s ease, transform .25s ease; }
.site-wrap .menu-toggle:active { transform: scale(.94); }

.site-wrap .mobile-menu nav a {
  transition: color .25s ease, padding-left .25s ease;
}
.site-wrap .mobile-menu nav a:hover {
  color: var(--orange);
  padding-left: 8px;
}

/* Marquee: pause on hover so it is readable */
.editorial-marquee:hover .marquee-track { animation-play-state: paused; }

/* Atlas tab underline draws in on activation */
.site-wrap .atlas-tab.is-active::after {
  transform-origin: left center;
  animation: px-tab-in .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes px-tab-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Tab panel swap */
.site-wrap .atlas-content.px-swap {
  animation: px-swap .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes px-swap {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 7. Scroll progress under the sticky header ------------------ */
.site-header .px-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- 8. Reveal-on-scroll (applied by JS, below-fold only) -------- */
.px-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1) var(--px-delay, 0s),
    transform .8s cubic-bezier(.22, 1, .36, 1) var(--px-delay, 0s);
}
.px-reveal.px-in {
  opacity: 1;
  transform: none;
}

/* ---------- 9. Typographic + scrollbar polish --------------------------- */
.site-wrap p { text-wrap: pretty; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: #c3c9bd;
  border-radius: 999px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--forest); }
* { scrollbar-color: #c3c9bd var(--paper); scrollbar-width: thin; }

/* ---------- 10. Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .px-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-wrap .atlas-content.px-swap,
  .site-wrap .atlas-tab.is-active::after { animation: none !important; }
}