/* ============================================================================
   POPGRIT — "Look" (First Look, page-id-29) motion module
   ----------------------------------------------------------------------------
   Scoped ENTIRELY to body.page-id-29. Three layers, escalating in weight:
     1. Section reveals  — pure CSS Scroll-Driven Animations (no JS; targets the
                           real Elementor container IDs). Degrades to static on
                           browsers without animation-timeline (e.g. Firefox).
     2. Hero / closing   — cinematic background <video> (JS-injected) with the
                           notahotel-style "expand" move (inset card → full-bleed).
     3. Lenis momentum   — see look-motion.js (its required CSS lives at the foot).
   Reduced-motion users opt out of all of it. Container IDs come from the live
   _elementor_data: hero 735b5a6 · feature ee721ff · listingA 5e99f34 ·
   listingB 419eeea · closing f128508.
   ============================================================================ */

/* ---- 1. Consistent reveal vocabulary -------------------------------------- */
@keyframes pg-reveal-in {
  from { opacity: 0; transform: translateY(48px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  /* Each section eases up + resolves as it enters the viewport. Because every
     element rides its OWN view() timeline, lower elements arrive slightly later
     — an organic stagger with no per-element delays. */
  body.page-id-29 .elementor-element-ee721ff,
  body.page-id-29 .elementor-element-5e99f34,
  body.page-id-29 .elementor-element-419eeea,
  body.page-id-29 .elementor-element-f128508 {
    animation: pg-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 40%;
  }
  /* Post cards within the two listing sections cascade individually. */
  body.page-id-29 .elementor-element-5e99f34 .elementor-post,
  body.page-id-29 .elementor-element-419eeea .elementor-post {
    animation: pg-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 34%;
  }
}

/* ---- 2a. Hero: full-bleed video tile that expands on scroll ---------------- */
/* .pg-hero / .pg-hero-media are added by look-motion.js, so if JS is absent the
   hero simply stays the original text block — no broken state. */
body.page-id-29 .pg-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column !important;    /* override Elementor row -> stack the copy as one caption */
  align-items: flex-start !important;   /* hard-left */
  justify-content: flex-end !important; /* anchored to the bottom */
  gap: .4em;
  padding: 0 clamp(22px,5vw,64px) clamp(44px,8vh,92px) !important;
  overflow: clip;
}
/* The hero copy ("Never Seen" + tagline) — one tidy bottom-left group, above the video */
body.page-id-29 .pg-hero > *:not(.pg-hero-media):not(.pg-hero-link) {
  position: relative;
  z-index: 1;
  text-align: left !important;
  margin-left: 0 !important;
  max-width: min(560px, 86vw);
}
/* Reset Elementor widget gutters so heading + tagline text share the CTA's left edge */
body.page-id-29 .pg-hero .elementor-widget-container { padding-left: 0 !important; margin-left: 0 !important; }
body.page-id-29 .pg-hero .elementor-heading-title,
body.page-id-29 .pg-hero .elementor-widget-text-editor p { margin-left: 0 !important; text-indent: 0 !important; }
body.page-id-29 .pg-hero .elementor-widget-text-editor,
body.page-id-29 .pg-hero .elementor-widget-text-editor * { text-align: left !important; }
/* CTA box left edge sits flush with the caption text. The alignment itself
   comes from look-motion.js placing the CTA INSIDE the tagline's .e-con-inner
   (so it inherits the text's exact, breakpoint-correct left edge). align-self
   keeps the box sized to its label inside that stretch flex column, instead of
   spanning the full caption width. */
body.page-id-29 .pg-hero-cta { margin-left: 0; align-self: flex-start; }
body.page-id-29 .pg-hero-media {
  /*position: absolute;*/
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
  /* --pg-expand goes 0 → 1 on scroll (set in JS): inset rounded card → full-bleed */
  margin: calc(18px * (1 - var(--pg-expand, 0))) calc(34px * (1 - var(--pg-expand, 0)));
  border-radius: calc(22px * (1 - var(--pg-expand, 0)));
  will-change: margin, border-radius;
}
body.page-id-29 .pg-hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.page-id-29 .pg-hero-media::after {     /* legibility scrim */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(10,10,10,.50) 0%,
              rgba(10,10,10,.22) 42%,
              rgba(10,10,10,.72) 100%);
  pointer-events: none;
}
/* The hero is a clickable doorway to the First Look story (no visible label —
   the whole hero is the link; cursor + the heading carry the affordance). */
body.page-id-29 .pg-hero-link {
  position: absolute; inset: 0; z-index: 3;
  display: block; cursor: pointer; text-decoration: none;
}

/* ---- Consistent subtle "ghost" CTA — hero "Exclusive Drop" + Slot 2 "Read the story" ---- */
body.page-id-29 .pg-cta,
body.page-id-29 .elementor-element-ee721ff .elementor-button {
  display: inline-flex !important;
  align-items: center; gap: 8px;
  padding: 12px 22px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  font-size: 12.5px !important; line-height: 1 !important;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  text-decoration: none !important; box-shadow: none !important;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
body.page-id-29 .elementor-element-ee721ff .elementor-button .elementor-button-text { color: inherit !important; }
body.page-id-29 .pg-hero-cta { margin-top: .55em; }
body.page-id-29 .pg-hero-cta::after { content: "\2009\2192"; }   /* thin-space + arrow */
/* hover → teal: the hero CTA lights on hero-hover (the link overlays it); Slot 2 on its own hover */
body.page-id-29 .pg-hero:hover .pg-hero-cta,
body.page-id-29 .elementor-element-ee721ff .elementor-button:hover {
  border-color: #21c7b6 !important;
  color: #21c7b6 !important;
  background: rgba(33,199,182,.07) !important;
}

/* ---- 2b. Slot 2 "Story" is a NATIVE Elementor section (ee721ff): editorial
   copy + atlantis background image, authored in Elementor. No custom media is
   injected here — it only receives the shared scroll reveal (section 1 above). */

/* ---- 3. Reduced motion: opt out of everything ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.page-id-29 .elementor-element-ee721ff,
  body.page-id-29 .elementor-element-5e99f34,
  body.page-id-29 .elementor-element-419eeea,
  body.page-id-29 .elementor-element-f128508,
  body.page-id-29 .elementor-element-5e99f34 .elementor-post,
  body.page-id-29 .elementor-element-419eeea .elementor-post {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-id-29 .pg-hero-media { margin: 0 !important; border-radius: 0 !important; }
}

/* ---- Lenis required CSS (active only when JS adds .lenis to <html>) -------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { 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; }