/* ============================================================
   doorstep animations — scroll-driven showpiece
   ============================================================ */

/* ----- Background shift ----- */

.bg-shift {
  position: fixed;
  inset: 0;
  background: var(--light-gray);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* ----- Scroll reveal (base) ----- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

[data-reveal="left"] {
  transform: translateX(-36px);
}

[data-reveal="right"] {
  transform: translateX(36px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

/* In the single-column layout a sideways slide reaches past the viewport edge,
   so those reveals rise instead. */
@media (max-width: 959px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(28px);
  }
}

/* Depth cards — 3D rise */
[data-depth] {
  perspective: 900px;
  transform-style: preserve-3d;
}

[data-reveal="depth"] {
  opacity: 0;
  transform: translateY(40px) scale(0.96) rotateX(6deg);
  transform-origin: center bottom;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 100ms);
}

[data-reveal].is-visible,
[data-reveal="depth"].is-visible {
  opacity: 1;
  transform: none;
}

/* ----- Word-by-word split headlines ----- */

.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.split-word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s var(--ease);
  transition-delay: calc(var(--wi, 0) * 45ms + 80ms);
}

[data-reveal].is-visible .split-word,
.hero__copy.is-visible .split-word,
.section__header.is-visible .split-word,
.is-visible [data-split] .split-word {
  transform: translateY(0);
}

/* ----- Parallax (translate composes with reveal transforms) ----- */

[data-parallax] {
  translate: 0 var(--py, 0px);
  will-change: translate;
}

/* ----- Hero float + tilt ----- */

.phone-wrap {
  perspective: 1000px;
}

.phone-wrap:has([data-tilt]) {
  animation: phone-wrap-float 6s var(--ease) infinite;
}

@keyframes phone-wrap-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.phone[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-2deg);
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
  will-change: transform;
}

@keyframes blob-drift {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.06;
  }
}

.hero__blob--2 {
  animation: blob-drift 12s ease-in-out infinite reverse;
}

/* ----- Inside-screen choreography ----- */

/* Rows cascade in whenever their screen becomes active */
.phone__layer.is-active .phone__row,
.phone__layer.is-active .phone__field,
.phone__layer.is-active .phone__chip {
  animation: row-in 0.55s var(--ease) both;
}

.phone__layer.is-active .phone__row:nth-child(1),
.phone__layer.is-active .phone__field:nth-of-type(1),
.phone__layer.is-active .phone__chip:nth-child(1) {
  animation-delay: 0.16s;
}

.phone__layer.is-active .phone__row:nth-child(2),
.phone__layer.is-active .phone__field:nth-of-type(2),
.phone__layer.is-active .phone__chip:nth-child(2) {
  animation-delay: 0.24s;
}

.phone__layer.is-active .phone__row:nth-child(3),
.phone__layer.is-active .phone__chip:nth-child(3) {
  animation-delay: 0.32s;
}

.phone__layer.is-active .phone__row:nth-child(4),
.phone__layer.is-active .phone__field:nth-of-type(3),
.phone__layer.is-active .phone__chip:nth-child(4) {
  animation-delay: 0.4s;
}

.phone__layer.is-active .phone__label,
.phone__layer.is-active .phone__meta,
.phone__layer.is-active .phone__days {
  animation: row-in 0.5s var(--ease) both;
  animation-delay: 0.12s;
}

.phone__layer.is-active .phone__row:nth-child(5) {
  animation-delay: 0.48s;
}

.phone__layer.is-active .phone__note {
  animation: row-in 0.55s var(--ease) both;
  animation-delay: 0.52s;
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Status pills pop after the row lands */
.phone__layer.is-active .phone__pill {
  animation: pill-pop 0.45s var(--ease) both;
  animation-delay: 0.5s;
}

@keyframes pill-pop {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Verified check stamps onto the profile photo */
.phone__layer.is-active .phone__thumb::after,
.phone-wrap .phone__thumb::after {
  animation: check-stamp 0.5s var(--ease) both;
  animation-delay: 0.55s;
}

@keyframes check-stamp {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-25deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Glare and tilt track the pinned scroll progress (--p comes from the scroll engine) */
.phone--showcase .phone__screen::after {
  translate: calc((var(--p, 0) * 62%) - 26%) 0;
}

.phone--showcase {
  transform: perspective(1400px) rotateY(calc(7deg - var(--p, 0) * 12deg))
    rotateX(calc(1.5deg - var(--p, 0) * 3deg));
  transform-style: preserve-3d;
}

/* On narrow screens the mockup sits above the copy and is scaled down instead
   of tilted — the perspective reads as skewed at that size. */
@media (max-width: 959px) {
  .phone--showcase {
    transform: scale(var(--phone-scale, 0.78));
    transform-origin: top center;
  }

  /* The three applicant rows sit in a stacked column here — parallax
     just slides the whole card up and down as you scroll past it. */
  .split__visual[data-parallax] {
    translate: none;
  }
}

/* ----- Soft pulse on green dot ----- */

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
  }
}

.hero__eyebrow-dot {
  animation: pulse 2.2s ease-out infinite;
}

/* ----- Step line draw (desktop) ----- */

@media (min-width: 860px) {
  .steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--ease);
  }

  .steps.is-visible::before {
    transform: scaleX(1);
  }
}

/* ----- Showcase step enter polish ----- */

.showcase__step.is-active .showcase__title {
  animation: showcase-title-in 0.7s var(--ease) both;
}

@keyframes showcase-title-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  [data-reveal="depth"] {
    opacity: 1;
    transform: none;
  }

  .split-word {
    transform: none !important;
  }

  .phone,
  .phone[data-tilt],
  .phone--showcase,
  .phone-wrap:has([data-tilt]) {
    transform: none !important;
    animation: none !important;
  }

  .phone__layer.is-active .phone__row,
  .phone__layer.is-active .phone__field,
  .phone__layer.is-active .phone__chip,
  .phone__layer.is-active .phone__pill,
  .phone__layer.is-active .phone__label,
  .phone__layer.is-active .phone__meta,
  .phone__layer.is-active .phone__days,
  .phone__layer.is-active .phone__note,
  .phone__thumb::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .phone--showcase .phone__screen::after {
    translate: none !important;
  }

  .steps::before {
    transform: none;
  }

  .bg-shift {
    opacity: 0 !important;
  }

  .nav__progress {
    display: none;
  }

  .showcase__track {
    height: auto !important;
  }

  .showcase__stage {
    position: relative !important;
    height: auto !important;
    padding-block: var(--space-6);
  }

  .showcase__steps {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .showcase__step {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .showcase__rail {
    display: none;
  }

  /* The mockup is not scaled here, so it needs its full height back */
  .showcase__phone-wrap {
    height: auto;
  }

  .phone__layer {
    position: relative !important;
    opacity: 0;
    transform: none !important;
  }

  .phone__layer.is-active {
    opacity: 1;
  }

  [data-parallax] {
    translate: none !important;
  }
}