/* ============================================
   Sticky Steps — Premium palette & type
   ============================================ */

:root {
  --bg: #f3efe8;
  --bg-deep: #ebe6dc;
  --ink: #1c1915;
  --ink-soft: #4a453c;
  --ink-muted: #7a7368;
  --ink-faint: #a39c90;
  --accent: #9a7b4f;
  --accent-soft: rgba(154, 123, 79, 0.55);
  --line: rgba(28, 25, 21, 0.08);
  --shadow: 0 24px 60px rgba(28, 25, 21, 0.1), 0 8px 20px rgba(28, 25, 21, 0.05);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", system-ui, -apple-system, sans-serif;
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--ink);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #faf7f2 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.45;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  border: 0;
}

/* ---------- Intro / Outro ---------- */

.sticky-steps-start {
  text-align: center;
  align-items: flex-end;
  min-height: 42dvh;
  display: flex;
  padding-bottom: 1.5rem;
}

.sticky-steps-end {
  text-align: center;
  align-items: flex-start;
  min-height: 48dvh;
  display: flex;
  padding-top: 1.5rem;
}

.sticky-steps__h1 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
  font-size: min(6.5em, 16vw);
  font-weight: 500;
  line-height: 0.92;
  color: var(--ink);
  font-style: italic;
}

/* ---------- Section ---------- */

.sticky-steps {
  min-height: 100dvh;
  position: relative;
  overflow: clip;
  background: transparent;
}

.sticky-steps__container {
  max-width: 74em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
  width: 100%;
}

.sticky-steps__collection {
  min-height: 100dvh;
  display: flex;
  position: relative;
}

.sticky-steps__list {
  gap: 30dvh;
  flex-flow: column;
  flex: 1;
  padding-top: calc(50dvh - 7.5em);
  padding-bottom: calc(50dvh - 7.5em);
  display: flex;
  width: 100%;
}

/* NO position:relative on item */
.sticky-steps__item {
  display: block;
  width: 100%;
}

/* ---------- Text ---------- */

.sticky-steps__text {
  gap: 2em;
  flex-flow: column;
  width: 50%;
  padding-right: 6em;
  display: flex;
  position: relative;
  z-index: 2;
}

.sticky-steps__eyebrow {
  font-family: var(--font-body);
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.22em;
  opacity: 1;
}

.sticky-steps__h2 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
  font-size: min(5.75em, 14vw);
  font-weight: 500;
  line-height: 0.92;
  color: var(--ink);
}

.sticky-steps__p {
  font-family: var(--font-body);
  color: var(--ink-muted);
  margin: 0;
  font-size: min(1.125em, 4.2vw);
  font-weight: 400;
  line-height: 1.65;
  max-width: 30ch;
  letter-spacing: 0.01em;
  opacity: 1;
}

/* ---------- Media (absolute to collection) ---------- */

.sticky-steps__media {
  width: 50%;
  height: 100%;
  padding-left: 3em;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.sticky-steps__sticky {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  position: sticky;
  top: 0;
}

/*
  Portrait oval / capsule (NOT a circle):
  aspect-ratio 3/4 + huge border-radius
*/
.sticky-steps__visual {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 500em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #e5dfd4 0%, #d4cdc2 100%);
  opacity: 0;
  will-change: opacity;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.sticky-steps__cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}

/* ---------- Desktop status (text only; images via GSAP) ---------- */

@media screen and (min-width: 992px) {
  [data-sticky-steps-item-status] .sticky-steps__visual {
    pointer-events: none;
  }

  /* CSS fallback if GSAP missing */
  html:not(.has-gsap) [data-sticky-steps-item-status] .sticky-steps__visual {
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
  }

  html:not(.has-gsap) [data-sticky-steps-item-status="before"] .sticky-steps__visual,
  html:not(.has-gsap) [data-sticky-steps-item-status="active"] .sticky-steps__visual {
    opacity: 1;
  }

  html:not(.has-gsap) [data-sticky-steps-item-status="active"] .sticky-steps__media {
    z-index: 5;
  }

  html:not(.has-gsap) [data-sticky-steps-item-status="before"] .sticky-steps__media {
    z-index: 4;
  }

  html:not(.has-gsap) [data-sticky-steps-item-status="after"] .sticky-steps__media {
    z-index: 1;
  }

  [data-sticky-steps-item-status] .sticky-steps__text {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.22;
  }

  [data-sticky-steps-item-status="active"] .sticky-steps__text {
    opacity: 1;
  }

  /* Keep accent readable when dimmed */
  [data-sticky-steps-item-status]:not([data-sticky-steps-item-status="active"]) .sticky-steps__eyebrow {
    color: var(--accent-soft);
  }
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 991px) {
  .sticky-steps__list {
    gap: 7.5em;
    padding-top: 10em;
    padding-bottom: 10em;
  }

  .sticky-steps__text {
    width: 100%;
    padding-bottom: 5em;
    padding-right: 0;
  }

  .sticky-steps__media {
    width: min(100%, 22em);
    height: auto;
    padding-left: 0;
    position: relative;
    top: auto;
    right: auto;
    pointer-events: auto;
  }

  .sticky-steps__sticky {
    min-height: auto;
    position: relative;
    top: auto;
    justify-content: flex-start;
  }

  .sticky-steps__visual {
    opacity: 1;
    aspect-ratio: 3 / 4;
    border-radius: 500em;
  }
}

@media screen and (max-width: 767px) {
  .sticky-steps__text {
    gap: 1.5em;
  }

  .sticky-steps__h2 {
    font-size: min(3.25em, 12vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sticky-steps-item-status] .sticky-steps__visual,
  [data-sticky-steps-item-status] .sticky-steps__text {
    transition: none !important;
  }
}