/* =========================================================================
   03-unify — "Unify your finances"
   Pinned 200vh hero. A sticky slot holds the centered title + 5 floating
   parallax UI cards; below, a vertical taglines list cycles on scroll.
   Ported from HeroIntroduction.Zz5M2fap.css, scoped under ._hero-introduction.
   ========================================================================= */

/* --- Pinned region -------------------------------------------------------- */
._hero-introduction header {
  /* Sticky hold = height − 100vh slot. 180vh ⇒ the slot releases after 80vh
     of scroll — at 80% of the cards' 100vh scrub track (see 03-unify.js),
     so the assembly finishes while the section is already sliding up. */
  height: 180vh;
  margin-bottom: -40vh;
}
._hero-introduction header .sticky-slot {
  height: 100vh;
  position: sticky;
  top: 0;
}
._hero-introduction header h2 {
  /* Large display size at rest; JS shrinks it on scroll so it tucks fully
     behind the converging cards by the end. */
  font-size: clamp(72px, 16px + 100vw * .094, 190px);
  padding-bottom: .5em;
}

/* --- Floating snippet cards ----------------------------------------------- */
._hero-introduction .snippets {
  overflow: hidden;
}
._hero-introduction .snippets li {
  position: absolute;
}
._hero-introduction .snippets li .snippet {
  border-color: inherit;
  height: 100%;
  width: 100%;
}

/* Real UI/photo snippet fills the card, square-cropped, rounded, lifted. */
._hero-introduction .snippets li .snippet .ph-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .28);
}

/* Card 1 — peru */
._hero-introduction .snippets li:first-child {
  border-color: var(--accent-peru);
  left: 19%;
  top: 6.25%;
  transform: translate(-6%, -40%);
  width: clamp(140px, 122.138px + 100vw * .0458, 200px);
}
@media only screen and (max-width: 1290px) {
  ._hero-introduction .snippets li:first-child { top: 5%; }
}
@media only screen and (max-width: 1023px) {
  ._hero-introduction .snippets li:first-child { left: 75%; top: 14%; }
}
@media only screen and (max-width: 743px) {
  ._hero-introduction .snippets li:first-child { left: 82%; top: 4.75%; }
}

/* Card 2 — royalblue */
._hero-introduction .snippets li:nth-child(2) {
  border-color: var(--accent-royal);
  right: 16.75%;
  top: 3.125%;
  transform: translate(5%, -2%);
  width: clamp(154px, 134.344px + 100vw * .0504, 220px);
  z-index: 4;
}
@media only screen and (max-width: 1023px) {
  ._hero-introduction .snippets li:nth-child(2) { right: 38%; top: 10%; }
}
@media only screen and (max-width: 743px) {
  ._hero-introduction .snippets li:nth-child(2) { right: 38%; top: 4.75%; }
}

/* Card 3 — salmon */
._hero-introduction .snippets li:nth-child(3) {
  border-color: var(--accent-salmon);
  bottom: 20%;
  right: 13.75%;
  transform: translate(4%, -10%);
  width: clamp(168px, 146.55px + 100vw * .055, 240px);
  z-index: 2;
}
@media only screen and (max-width: 1290px) {
  ._hero-introduction .snippets li:nth-child(3) { bottom: 20%; right: 5%; }
}
@media only screen and (max-width: 1023px) {
  ._hero-introduction .snippets li:nth-child(3) { bottom: 10%; right: 20%; }
}
@media only screen and (max-width: 743px) {
  ._hero-introduction .snippets li:nth-child(3) { bottom: 4.75%; right: 3.5%; }
}
@media only screen and (max-width: 370px) {
  ._hero-introduction .snippets li:nth-child(3) { bottom: 4.75%; right: 2%; }
}

/* Card 4 — plum */
._hero-introduction .snippets li:nth-child(4) {
  border-color: var(--accent-plum);
  bottom: 8.25%;
  left: 31.25%;
  transform: translate(0);
  width: clamp(154px, 134.344px + 100vw * .0504, 220px);
  z-index: 5;
}
@media only screen and (max-width: 1290px) {
  ._hero-introduction .snippets li:nth-child(4) { bottom: 4%; }
}
@media only screen and (max-width: 1023px) {
  ._hero-introduction .snippets li:nth-child(4) { bottom: 12%; left: 20%; }
}
@media only screen and (max-width: 743px) {
  ._hero-introduction .snippets li:nth-child(4) { bottom: 4.75%; left: 3.5%; }
}

/* Card 5 — limegreen */
._hero-introduction .snippets li:nth-child(5) {
  border-color: var(--accent-lime);
  left: 1.75%;
  top: 37.25%;
  transform: translate(-6%, -10%);
  width: clamp(154px, 134.344px + 100vw * .0504, 220px);
  z-index: 3;
}
@media only screen and (max-width: 1023px) {
  ._hero-introduction .snippets li:nth-child(5) { left: 5%; top: 14%; }
}
@media only screen and (max-width: 743px) {
  ._hero-introduction .snippets li:nth-child(5) { left: unset; right: 78%; top: 4.75%; }
}

/* Snippets start hidden; JS reveals + parallaxes them on scroll. */
._hero-introduction .snippets .snippet {
  opacity: 0;
}

/* Taglines (Add/Send/Exchange) moved to their own section → 11-addsend.css */

/* --- Large desktop: scale title + cards in vw ----------------------------- */
@media only screen and (min-width: 2000px) {
  ._hero-introduction header h2 { font-size: 9.5vw; }
  ._hero-introduction .snippets li:first-child { width: 10vw; }
  ._hero-introduction .snippets li:nth-child(2) { width: 11vw; }
  ._hero-introduction .snippets li:nth-child(3) { width: 12vw; }
  ._hero-introduction .snippets li:nth-child(4),
  ._hero-introduction .snippets li:nth-child(5) { width: 11vw; }
}