/* COVERF home — full-screen panels.
   The banner fills the first screen; each scroll moves one whole section:
   the leaving section sinks, shrinks and fades while the next one slides up over it,
   and the new section's content rises in. */

:root {
  --deck-top: calc(3.5rem + 1px);
  --deck-lead: var(--announce-h);
  --deck-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  :root {
    --deck-top: calc(var(--header-h) + 1px);
    --deck-bottom: 0px;
  }
}

/* one screen = the space between the sticky header and the tab bar */
.home-deck { --deck-screen: calc(100svh - var(--deck-top) - var(--deck-bottom)); }

html.deck-on {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--deck-top);
  scroll-padding-bottom: var(--deck-bottom);
}

.home-deck .panel {
  position: relative;
  min-height: var(--deck-screen);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.home-deck .panel > .panel-inner { width: 100%; }
.deck-on .site-footer { scroll-snap-align: end; }

/* ---------- 1 · banner, edge to edge ---------- */
.home-deck .hero {
  padding: 0;
  height: calc(100svh - var(--deck-lead) - var(--deck-top) - var(--deck-bottom));
  min-height: 20rem;
  scroll-snap-align: end;
  background: var(--white);
}
.home-deck .hero-visual { position: absolute; inset: 0; overflow: hidden; }
.home-deck .hero-slides { aspect-ratio: auto; height: 100%; }
.home-deck .hero .hero-meter { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; background: rgba(255, 255, 255, 0.28); }
.home-deck .hero .hero-meter span { background: var(--white); }

.hero-down {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.5rem;
  width: 2.9rem;
  height: 2.9rem;
  margin-left: -1.45rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(13, 13, 13, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s var(--ease), opacity 0.3s;
  opacity: calc(1 - var(--ex, 0) * 3);
}
.hero-down::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 1.5px solid var(--white);
  border-bottom: 1.5px solid var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: deck-nudge 1.6s ease-in-out infinite;
}
.hero-down:hover { background: var(--accent); }
.hero-down-line { display: none; }
@keyframes deck-nudge { 50% { transform: translate(-50%, -10%) rotate(45deg); } }

/* ---------- 2 · intro text + marquee ---------- */
.home-intro > .panel-inner { flex: 1; display: flex; flex-direction: column; }
.home-deck .home-intro .hero-copy { margin-block: auto 0; padding-block: var(--s-5); }
.home-deck .home-intro .marquee { margin-top: auto; }

/* ---------- the other sections, sized to one screen ---------- */
.home-deck .home-story { padding-top: var(--s-section); }
.home-deck .cta-band { padding-block: var(--s-5); }

@media (max-width: 899px) {
  .home-deck .section { padding-block: var(--s-4); }
  .home-deck .section-head { margin-bottom: var(--s-3); }
  .home-deck .steps { gap: var(--s-3); }
  .home-deck .step { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 0.75rem; padding-top: var(--s-2); }
  .home-deck .step em { grid-row: span 2; margin: 0; font-size: var(--step-2); }
  .home-deck .step h3 { margin-bottom: 0.25rem; }
  .home-deck .story { gap: var(--s-3); }
  .home-deck .story img { aspect-ratio: auto; height: min(44svh, 26rem); }
  .home-deck .story h2 { margin-block: 0.6rem var(--s-2); font-size: var(--step-1); }
}

/* ---------- motion (JS sets --ex: 0 on screen → 1 fully left) ---------- */
.deck-motion .home-deck .panel > .panel-inner {
  transform-origin: 50% 0;
  transform: translate3d(0, calc(var(--ex, 0) * 32vh), 0) scale(calc(1 - var(--ex, 0) * 0.08));
  opacity: calc(1 - var(--ex, 0) * 1.15);
  will-change: transform, opacity;
}
.deck-motion .home-deck .hero > .hero-visual {
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--ex, 0) * 45%), 0) scale(calc(1 - var(--ex, 0) * 0.14));
  opacity: calc(1 - var(--ex, 0) * 1.05);
  border-radius: calc(var(--ex, 0) * 2rem);
}

/* content of the arriving section rises in, one row after the other */
.deck-motion .home-deck .panel:not(.hero) > .panel-inner > * {
  transition: opacity 0.7s ease, translate 0.9s var(--ease);
}
.deck-motion .home-deck .panel:not(.hero) > .panel-inner > :nth-child(2) { transition-delay: 0.12s; }
.deck-motion .home-deck .panel:not(.hero) > .panel-inner > :nth-child(3) { transition-delay: 0.24s; }
.deck-motion .home-deck .panel:not(.hero):not(.is-shown) > .panel-inner > * {
  opacity: 0;
  translate: 0 3rem;
  transition-delay: 0s;
  transition-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-down::before { animation: none; }
}

/* ---------- banners with a separate phone picture ---------- */
.hero-pic { position: absolute; inset: 0; background: center / cover no-repeat; }
.hero-pic-m { display: none; }
.hero-slide.has-mobile .hero-slide-hit { z-index: 1; }
@media (max-width: 899px) {
  .hero-pic-d { display: none; }
  .hero-pic-m { display: block; }
}

/* "New arrivals" stays off the phone home page (as before the panels) */
@media (max-width: 899px) {
  .home-deck .home-picks { display: none; }
}