/* =========================================================
   HERO LAYOUT
   ========================================================= */

/* Center 1728px-wide hero on large screens; % positions are relative to .hero-stage */
.auto-1 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--background);
  display: flex;
  justify-content: center;
}

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 1728px;
  height: min(78.24vw, 1352px);
  flex-shrink: 0;
}

/* Background ghost photo stack */
.auto-2,
.auto-4 {
  position: absolute;
  left: 6.0185%;
  top: 24.3352%;
  width: 33.2176%;
  height: 56.5828%;
  border-radius: min(1.39vw, 24px);
  overflow: hidden;
}

.auto-2 {
  opacity: 0.2;
  filter: blur(0.5px);
}

.auto-4 {
  opacity: 0.07;
}

.auto-5,
.auto-6 {
  position: absolute;
  left: 11.4583%;
  top: 17.9719%;
  width: 33.2176%;
  height: 56.5828%;
  border-radius: min(1.39vw, 24px);
  overflow: hidden;
}

.auto-5 {
  opacity: 0.4;
  filter: blur(0.5px);
}

.auto-6 {
  opacity: 0.14;
}

.auto-3,
.auto-11 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 50%;
}

/* Main hero card */
.auto-7 {
  position: absolute;
  left: 15.2894%;
  top: 6.1698%;
  width: 36.0417%;
  height: 63.9349%;
  background-color: var(--background);
  border: min(0.23vw, 4px) solid var(--main-text);
  border-radius: min(1.39vw, 24px);
  box-shadow: min(0.23vw, 4px) min(0.23vw, 4px) 0 0 var(--main-text);
  overflow: hidden;
}

/* In-card layers: unchanged from original vw/px so the portrait crop matches */
.auto-8 {
  position: absolute;
  left: min(2.38vw, 41px);
  top: min(1.68vw, 29px);
  width: min(4.98vw, 86px);
  height: min(1.27vw, 22px);
}

.auto-9 {
  width: 100%;
  height: 100%;
  display: block;
}

.auto-10,
.auto-12 {
  position: absolute;
  left: min(1.25vw, 21.58px);
  top: min(4.23vw, 73.12px);
  width: min(33.18vw, 573.64px);
  height: min(44.28vw, 765.14px);
  border-radius: min(1.39vw, 24px);
  overflow: hidden;
}

.auto-10 {
  filter: blur(0.5px);
}

.auto-12 {
  opacity: 0.35;
}

/* Hero text */
.auto-13 {
  position: absolute;
  left: 56.713%;
  top: 20.7101%;
  width: 35.3009%;
  display: flex;
  flex-direction: column;
  gap: min(1.39vw, 24px);
}

.auto-14 {
  font-size: min(2.08vw, 36px);
  letter-spacing: min(0.083vw, 1.44px);
  color: var(--green-text);
  line-height: normal;
}

.auto-15 {
  font-size: min(3.70vw, 64px);
  letter-spacing: min(0.148vw, 2.56px);
  color: var(--main-text);
  line-height: 1.1;
  /* Pull product block up slightly to match the intended gap below it. */
  margin-top: calc(-1 * min(0.35vw, 6px));
}

.auto-16 {
  font-size: min(1.39vw, 24px);
  letter-spacing: min(0.056vw, 0.96px);
  color: var(--green-text);
  line-height: normal;
}

/* =========================================================
   RECENT WORK SECTION
   ========================================================= */

.auto-17 {
  width: 100%;
  background-color: var(--light-text);
}

.auto-18 {
  max-width: 1728px;
  margin: 0 auto;
  padding-bottom: min(14.70vw, 254px);
}

.auto-19 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: min(8.80vw, 152px) min(6.13vw, 106px) min(5.61vw, 97px) min(6.02vw, 104px);
}

.auto-20 {
  display: inline-flex;
  align-items: center;
  gap: min(0.69vw, 12px);
  background-color: var(--green-accent);
  border: min(0.116vw, 2px) solid var(--main-text);
  border-radius: min(1.39vw, 24px);
  box-shadow: min(0.46vw, 8px) min(0.46vw, 8px) 0 0 var(--main-text);
  padding: min(1.16vw, 20px) min(2.08vw, 36px);
  cursor: pointer;
}

.auto-21 {
  font-size: min(1.39vw, 24px);
  letter-spacing: min(0.056vw, 0.96px);
  color: var(--main-text);
  line-height: 1.1;
  white-space: nowrap;
}

.auto-21-arrow {
  width: 0.95em;
  height: 0.95em;
  object-fit: contain;
  display: block;
}

/* Shared project card shell */
.auto-22,
.auto-31 {
  cursor: pointer;
  background-color: var(--background);
  border: min(0.23vw, 4px) solid var(--main-text);
  border-radius: min(1.57vw, 27.14px);
  box-shadow: min(0.46vw, 8px) min(0.46vw, 8px) 0 0 #07062b;
  padding: min(2.88vw, 49.7px) min(4.97vw, 85.7px);
}

.auto-22 {
  margin: 0 min(6.02vw, 104px) min(5.59vw, 97px);
}

.auto-31 {
  margin: 0 min(6.02vw, 104px);
}

.auto-23 {
  display: flex;
  gap: min(1.62vw, 28px);
  justify-content: flex-end;
  margin-bottom: min(1.91vw, 33px);
}

.auto-24,
.auto-25 {
  padding: min(0.69vw, 12px) min(0.93vw, 16px);
  border-radius: min(0.93vw, 16px);
  font-size: min(1.39vw, 24px);
  letter-spacing: min(0.056vw, 0.96px);
  color: var(--main-text);
  white-space: nowrap;
  line-height: 1.1;
}

.auto-24 {
  background-color: var(--pink-accent);
}

.auto-25 {
  background-color: var(--green-accent);
}

.auto-26 {
  height: min(37.62vw, 650px);
  overflow: hidden;
  border-radius: min(0.46vw, 8px);
  margin-bottom: min(1.79vw, 31px);
}

.auto-27,
.auto-32 {
  width: 100%;
  height: 105.04%;
  object-fit: cover;
}

.auto-27 {
  margin-top: -4.99%;
}

.auto-28 {
  display: flex;
  flex-direction: column;
  gap: min(0.23vw, 4px);
}

.auto-29 {
  font-size: min(2.08vw, 36px);
  letter-spacing: min(0.083vw, 1.44px);
  color: var(--main-text);
  line-height: 1.1;
}

.auto-30 {
  font-size: min(1.39vw, 24px);
  letter-spacing: min(0.056vw, 0.96px);
  color: var(--main-text);
  line-height: normal;
}

@media (max-width: 680px) {
  .auto-18 {
    padding-bottom: min(12.31vw, 48px);
  }

  .hero-stage {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: min(10.26vw, 40px) min(6.15vw, 24px) min(8.21vw, 32px);
    gap: min(6.15vw, 24px);
  }

  .auto-2,
  .auto-4,
  .auto-5,
  .auto-6 {
    display: none;
  }

  .auto-13 {
    position: static;
    width: 100%;
    max-width: 32rem;
    text-align: left;
    align-items: flex-start;
    gap: min(4.1vw, 16px);
    order: 1;
  }

  .auto-14 {
    font-size: clamp(20px, 6.15vw, 28px);
    letter-spacing: min(0.18vw, 0.72px);
  }

  .auto-15 {
    font-size: clamp(40px, 10.26vw, 56px);
    letter-spacing: min(0.26vw, 1.04px);
    line-height: 1.05;
    margin-top: 0;
  }

  .auto-16 {
    font-size: clamp(16px, 4.62vw, 22px);
    letter-spacing: min(0.15vw, 0.6px);
  }

  .auto-7 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    height: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    align-self: stretch;
    order: 2;
  }

  .auto-8 {
    display: none;
  }

  .auto-10,
  .auto-12 {
    position: static;
    width: 100%;
    height: min(119.49vw, 582px);
    border-radius: min(4.62vw, 18px);
    overflow: hidden;
  }

  .auto-10 {
    filter: none;
  }

  .auto-12 {
    display: none;
  }

  .auto-19 {
    padding: min(9.23vw, 36px) min(6.15vw, 24px) min(6.15vw, 24px);
    align-items: center;
  }

  .auto-19 .auto-15 {
    font-size: clamp(28px, 7.18vw, 36px);
    letter-spacing: min(0.2vw, 0.8px);
    line-height: 1.05;
  }

  .auto-20 {
    min-height: min(8.72vw, 34px);
    padding: min(2.05vw, 8px) min(3.85vw, 15px);
    gap: min(1.03vw, 4px);
    border-radius: min(3.08vw, 12px);
  }

  .auto-22 {
    margin: 0 min(6.15vw, 24px) min(5.13vw, 20px);
    padding: min(4.1vw, 16px);
    border-radius: min(4.1vw, 16px);
  }

  .auto-31 {
    margin: 0 min(6.15vw, 24px);
    padding: min(4.1vw, 16px);
    border-radius: min(4.1vw, 16px);
  }

  .auto-26 {
    margin-bottom: min(4.1vw, 16px);
  }

  .auto-23 {
    gap: min(1.03vw, 4px);
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .auto-24,
  .auto-25 {
    padding: min(1.03vw, 4px) min(2.05vw, 8px);
    font-size: clamp(11px, 2.82vw, 13px);
    letter-spacing: min(0.08vw, 0.32px);
    line-height: 1.1;
    white-space: nowrap;
  }

  .auto-21 {
    font-size: clamp(14px, 3.59vw, 18px);
    line-height: 1;
  }

  .auto-21-arrow {
    width: 0.75em;
    height: 0.75em;
    display: block;
    flex-shrink: 0;
  }

  .auto-29 {
    font-size: clamp(18px, 5.13vw, 22px);
    letter-spacing: min(0.15vw, 0.6px);
    line-height: 1.05;
  }

  .auto-30 {
    font-size: clamp(12px, 3.59vw, 15px);
    letter-spacing: min(0.1vw, 0.4px);
    line-height: 1.1;
  }
}

/* Mobile hero: text from left, portrait card from right (CSS-only; no JS). */
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .hero-stage .auto-13 {
    animation: indexHeroMobileTextIn 1.35s cubic-bezier(0.33, 0.72, 0.42, 1) 0.08s both;
    will-change: transform, opacity;
  }

  .hero-stage .auto-7 {
    animation: indexHeroMobilePhotoIn 1.35s cubic-bezier(0.33, 0.72, 0.42, 1) 0.3s both;
    will-change: transform, opacity;
  }

  /*
   * Recent work (below hero): slide-ins run when .auto-18 gets .index-recent-in-view (scroll).
   * html.index-recent-mobile-animations is set by index-animations.js (mobile + motion only).
   */
  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-19 > .auto-15,
  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-19 > .auto-20,
  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-22,
  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-31 {
    opacity: 0;
    pointer-events: none;
  }

  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-19 > .auto-15,
  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-22 {
    transform: translate3d(-2rem, 0, 0);
  }

  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-19 > .auto-20,
  html.index-recent-mobile-animations .auto-18:not(.index-recent-in-view) .auto-31 {
    transform: translate3d(2rem, 0, 0);
  }

  html.index-recent-mobile-animations .auto-18.index-recent-in-view .auto-19 > .auto-15 {
    animation: indexHeroMobileTextIn 1.35s cubic-bezier(0.33, 0.72, 0.42, 1) 0.08s both;
    will-change: transform, opacity;
  }

  html.index-recent-mobile-animations .auto-18.index-recent-in-view .auto-19 > .auto-20 {
    animation: indexHeroMobilePhotoIn 1.35s cubic-bezier(0.33, 0.72, 0.42, 1) 0.3s both;
    will-change: transform, opacity;
  }

  html.index-recent-mobile-animations .auto-18.index-recent-in-view .auto-22 {
    animation: indexHeroMobileTextIn 1.35s cubic-bezier(0.33, 0.72, 0.42, 1) 0.42s both;
    will-change: transform, opacity;
  }

  html.index-recent-mobile-animations .auto-18.index-recent-in-view .auto-31 {
    animation: indexHeroMobilePhotoIn 1.35s cubic-bezier(0.33, 0.72, 0.42, 1) 0.58s both;
    will-change: transform, opacity;
  }
}

@keyframes indexHeroMobileTextIn {
  from {
    opacity: 0;
    transform: translate3d(-2rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes indexHeroMobilePhotoIn {
  from {
    opacity: 0;
    transform: translate3d(2rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Desktop-only entrance animations (hero + recent work) ────────── */
@media (min-width: 681px) and (prefers-reduced-motion: no-preference) {
  /*
   * One shared easing + durations so hero + recent work feel like the same motion language.
   * Curve is a slow ease-out (steady middle, very soft landing — not “snappy”).
   */
  html.index-motion-desktop {
    /* Hero domino: slower + softer decel for a calmer stack-in */
    --index-anim-ease: cubic-bezier(0.33, 0.72, 0.42, 1);
    --index-anim-dur-ghost: 1.85s;
    --index-anim-dur-main: 1.75s;
    --index-anim-dur-text: 1.65s;
    --index-scroll-fade-dur: 0.95s;
  }

  html.index-motion-desktop .auto-2 {
    animation: indexHeroGhost2a var(--index-anim-dur-ghost) var(--index-anim-ease) 0s both;
  }

  html.index-motion-desktop .auto-4 {
    animation: indexHeroGhost2b var(--index-anim-dur-ghost) var(--index-anim-ease) 0s both;
  }

  html.index-motion-desktop .auto-5 {
    animation: indexHeroGhost5a var(--index-anim-dur-ghost) var(--index-anim-ease) 0.55s both;
  }

  html.index-motion-desktop .auto-6 {
    animation: indexHeroGhost6b var(--index-anim-dur-ghost) var(--index-anim-ease) 0.55s both;
  }

  html.index-motion-desktop .auto-7 {
    animation: indexHeroMain var(--index-anim-dur-main) var(--index-anim-ease) 0.92s both;
  }

  html.index-motion-desktop .auto-13 {
    animation: indexHeroText var(--index-anim-dur-text) var(--index-anim-ease) 1.45s both;
  }

  /*
   * Recent work (desktop): each row/card fades in when it nears the viewport and
   * fades out when it leaves — `index-scroll-visible` is toggled by IntersectionObserver.
   */
  html.index-motion-desktop .auto-18 .auto-19 > .auto-15,
  html.index-motion-desktop .auto-18 .auto-19 > .auto-20 {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity var(--index-scroll-fade-dur) var(--index-anim-ease),
      transform var(--index-scroll-fade-dur) var(--index-anim-ease);
  }

  html.index-motion-desktop .auto-18 .auto-22,
  html.index-motion-desktop .auto-18 .auto-31 {
    opacity: 0;
    will-change: opacity, transform;
  }

  html.index-motion-desktop .auto-18 .auto-19.index-scroll-visible > .auto-15,
  html.index-motion-desktop .auto-18 .auto-19.index-scroll-visible > .auto-20 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  html.index-motion-desktop .auto-18 .auto-19:not(.index-scroll-visible) .auto-20 {
    pointer-events: none;
  }
}

@keyframes indexHeroGhost2a {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 0.2;
    filter: blur(0.5px);
  }
}

@keyframes indexHeroGhost2b {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 0.07;
    filter: blur(0);
  }
}

@keyframes indexHeroGhost5a {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 0.4;
    filter: blur(0.5px);
  }
}

@keyframes indexHeroGhost6b {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 0.14;
    filter: blur(0);
  }
}

@keyframes indexHeroMain {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes indexHeroText {
  from {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}