/*
 * YMStudio visual foundation.
 * This layer intentionally leaves the existing colours, font sizes,
 * content, spacing, and section order unchanged.
 */

:root {
  --font-heading: "Be Vietnam Pro", sans-serif;
}

/*
 * `overflow-x: hidden` makes the document root a competing scroll container
 * in Chromium and prevents sticky storytelling sections from pinning.
 * `clip` preserves horizontal containment without breaking sticky positioning.
 */
html,
body {
  overflow-x: clip !important;
}

/* Use the existing Be Vietnam Pro family everywhere. */
.font-heading,
.page-title,
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

/* Remove only the animated hero fireflies. */
[style*="--ff-lo"],
[style*="--ff-hi"] {
  display: none !important;
}

/* Replace capsule CTAs and chips with compact rectangular corners. */
.cta-btn,
.eyebrow-chip,
a[class*="rounded-full"][class*="px-"],
button[class*="rounded-full"][class*="px-"],
span[class*="rounded-full"][class*="px-"],
div[class*="rounded-full"][class*="px-"] {
  border-radius: 0.25rem !important;
}

/* Keep image and service cards, but remove the soft app-card treatment. */
main [class*="rounded-xl"][class*="border"] {
  border-radius: 0.25rem !important;
  box-shadow: none !important;
}

main a[href^="/work/"][class*="rounded-xl"] > div:first-child {
  border-radius: 0.125rem !important;
}

/* Turn the repeated Why Me tiles into quieter editorial panels. */
main section.scroll-mt-24.bg-paper
  [class*="rounded-xl"][class*="border"][class*="bg-white"] {
  min-height: 9.5rem !important;
  height: auto !important;
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 1.5rem 0 !important;
}

main section.scroll-mt-24.bg-paper
  [class*="rounded-xl"][class*="border"][class*="bg-white"]
  > div:last-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Stop repeated cards from expanding like dashboard widgets. */
main [class*="hover:grow"],
main [class*="focus-within:grow"] {
  flex-grow: 1 !important;
}

main [class*="hover:shadow"] {
  box-shadow: none !important;
}

/*
 * Scroll-led partnership story.
 * The section stays in place while each benefit rolls through the focal point.
 * Scrolling upward reverses the sequence; the portrait is the final step.
 */
#why-me.ym-why-scroll {
  position: relative;
  height: 220svh;
  min-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#why-me.ym-why-scroll .ym-why-shell {
  position: relative;
  height: 100%;
}

#why-me.ym-why-scroll .ym-why-intro {
  position: relative;
  z-index: 3;
  margin-bottom: 0 !important;
  max-width: 31rem;
  padding-top: 0;
  text-align: left;
}

#why-me.ym-why-scroll .ym-why-motion {
  position: sticky;
  top: 0;
  display: grid !important;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(20rem, 1.15fr);
  width: 100%;
  height: 100svh;
  margin-top: 0;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  overflow: hidden;
  opacity: 1 !important;
  perspective: 900px;
  transform: none !important;
}

#why-me.ym-why-scroll .ym-why-sequence {
  position: relative;
  display: block !important;
  flex: none !important;
  width: 100%;
  height: min(46vh, 26rem);
}

#why-me.ym-why-scroll .ym-why-step {
  --ym-step-opacity: 0;
  --ym-step-y: 8rem;
  --ym-step-scale: 0.96;
  --ym-step-rotate: -8deg;
  --ym-step-order: 1;

  position: absolute !important;
  top: 50%;
  left: 50%;
  z-index: var(--ym-step-order);
  width: min(42rem, calc(100vw - 3rem)) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 !important;
  border-width: 1px 0 !important;
  border-color: rgb(33 60 69 / 18%) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: var(--ym-step-opacity) !important;
  filter: none !important;
  pointer-events: none;
  transform:
    translate3d(-50%, calc(-50% + var(--ym-step-y)), 0)
    rotateX(var(--ym-step-rotate))
    scale(var(--ym-step-scale)) !important;
  transform-origin: 50% 50%;
  transition:
    transform 90ms ease-out,
    opacity 150ms ease-out;
  will-change: transform, opacity;
}

#why-me.ym-why-scroll .ym-why-step[data-active] {
  pointer-events: auto;
}

#why-me.ym-why-scroll
  .ym-why-step:not(.ym-why-portrait)
  > div:first-child {
  display: flex !important;
  margin: 0 auto clamp(1.25rem, 3vh, 1.75rem);
  border-radius: 0.25rem !important;
}

#why-me.ym-why-scroll
  .ym-why-step:not(.ym-why-portrait)
  > div:last-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  text-align: center;
}

#why-me.ym-why-scroll .ym-why-step .card-text {
  margin-right: auto;
  margin-left: auto;
}

#why-me.ym-why-scroll .ym-why-portrait {
  width: min(22rem, calc(100vw - 3rem)) !important;
  height: min(58vh, 30rem) !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
}

/*
 * Scroll-led selected work story (homepage only).
 * The heading scrolls up and away in normal flow, then the sequence pins
 * to the full viewport and each project rolls through the focal point,
 * matching the partnership story physics above.
 */
.ym-work-scroll {
  position: relative;
  height: 300svh;
}

.ym-work-scroll .ym-work-shell {
  height: 100%;
}

.ym-work-scroll .ym-work-sequence {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  /* clip (not hidden) with a small bleed margin: the tilted active card's
     perspective projection is a few px wider than the container, and plain
     `hidden` was shaving the left edge of the metadata text. The margin lets
     that bleed show while the far rolled-out cards (120px+ away) stay clipped. */
  overflow: clip;
  overflow-clip-margin: 32px;
  perspective: 900px;
}

.ym-work-scroll .ym-work-step {
  --ym-step-opacity: 0;
  --ym-step-y: 8rem;
  --ym-step-scale: 0.96;
  --ym-step-rotate: -8deg;
  --ym-step-order: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--ym-step-order);
  width: 100%;
  opacity: var(--ym-step-opacity) !important;
  pointer-events: none;
  transform:
    translate3d(-50%, calc(-50% + var(--ym-step-y)), 0)
    rotateX(var(--ym-step-rotate))
    scale(var(--ym-step-scale)) !important;
  transform-origin: 50% 50%;
  transition:
    transform 90ms ease-out,
    opacity 150ms ease-out;
  will-change: transform, opacity;
}

.ym-work-scroll .ym-work-step[data-active] {
  pointer-events: auto;
}

/*
 * The project row itself stays untouched. Only its vertical footprint is
 * sized so a full row fills the pinned viewport while it rolls.
 */
.ym-work-scroll .ym-work-step article {
  padding: clamp(1.25rem, 3vh, 2rem) 0 !important;
}

/* Project name sits ~10% larger than the default ProjectRow title, scoped to
   the homepage scroll-story only (Work page title is unchanged). */
.ym-work-scroll .ym-work-step article h3 {
  font-size: clamp(1.2375rem, 1.43vw, 1.375rem) !important;
}

.ym-work-scroll .ym-work-step article > a {
  height: min(34vh, 24rem);
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

@media (min-width: 1024px) {
  .ym-work-scroll .ym-work-step article > a {
    height: min(72vh, 46rem);
  }
}

@supports not (height: 100svh) {
  #why-me.ym-why-scroll {
    height: 220vh;
  }

  #why-me.ym-why-scroll .ym-why-motion {
    height: 100vh;
  }

  .ym-work-scroll {
    height: 300vh;
  }

  .ym-work-scroll .ym-work-sequence {
    height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  main [class*="hover:grow"],
  main [class*="focus-within:grow"] {
    transition: none !important;
  }

  #why-me.ym-why-scroll {
    height: auto;
    min-height: 0;
    padding-top: clamp(4rem, 10vh, 8rem) !important;
    padding-bottom: clamp(4rem, 10vh, 8rem) !important;
  }

  #why-me.ym-why-scroll .ym-why-shell {
    height: auto;
  }

  #why-me.ym-why-scroll .ym-why-intro {
    margin-bottom: 3rem !important;
  }

  #why-me.ym-why-scroll .ym-why-motion {
    position: relative;
    display: block !important;
    height: auto;
    overflow: visible;
  }

  #why-me.ym-why-scroll .ym-why-sequence {
    display: grid !important;
    height: auto;
    gap: 1.5rem;
  }

  #why-me.ym-why-scroll .ym-why-step {
    position: relative !important;
    top: auto;
    left: auto;
    width: 100% !important;
    opacity: 1 !important;
    filter: none;
    pointer-events: auto;
    transform: none !important;
    transition: none;
  }

  #why-me.ym-why-scroll .ym-why-portrait {
    width: min(22rem, 100%) !important;
    margin-right: auto;
    margin-left: auto;
  }

  .ym-work-scroll {
    height: auto;
  }

  .ym-work-scroll .ym-work-shell {
    height: auto;
  }

  .ym-work-scroll .ym-work-sequence {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .ym-work-scroll .ym-work-step {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    opacity: 1 !important;
    pointer-events: auto;
    transform: none !important;
    transition: none;
  }

  .ym-work-scroll .ym-work-step article {
    padding: clamp(2.5rem, 5vw, 4rem) 0 !important;
  }

  .ym-work-scroll .ym-work-step article > a {
    height: auto;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .ym-work-scroll .ym-work-step article > a {
    aspect-ratio: auto !important;
    min-height: clamp(37.5rem, 55vw, 47.5rem) !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  #why-me.ym-why-scroll {
    height: 240svh;
  }

  #why-me.ym-why-scroll .ym-why-motion {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: 1fr;
    height: 100svh;
    padding-top: clamp(5rem, 10vh, 7rem);
    padding-bottom: clamp(2rem, 5vh, 3rem);
    gap: 1rem;
  }

  #why-me.ym-why-scroll .ym-why-intro {
    max-width: 34rem;
  }

  #why-me.ym-why-scroll .ym-why-sequence {
    height: 48vh;
  }

  .ym-work-scroll {
    height: 320svh;
  }

  .ym-work-scroll .ym-work-step article {
    padding: 1rem 0 !important;
  }

  .ym-work-scroll .ym-work-step article > a {
    height: min(30vh, 18rem);
  }
}