/* Zero Prep Tools - Landing page layout CSS
 * Semantic classes using design tokens only. No hard-coded colours.
 */

/* ============================================================
   Shared section container
   ============================================================ */
.landing-section {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ============================================================
   1. Hero
   ============================================================ */
.landing-hero {
  position: relative;
  padding-top: 72px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: center;
}

.landing-hero__copy {
  position: relative;
  z-index: 2;
}

.landing-hero__frame {
  position: relative;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--accent);
  transform: rotate(-2deg);
  margin-bottom: 8px;
}

.landing-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  margin: 6px 0 0;
}

.landing-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}

.landing-hero__sub {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 24px 0 0;
  max-width: 480px;
}

.landing-hero__ctas {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.landing-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.landing-hand-note {
  font-family: var(--font-hand);
  font-size: 21px;
  color: var(--ink-3);
  margin: 18px 0 0;
}

/* Play button circle */
.landing-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.landing-play-btn:hover {
  background: rgba(255, 255, 255, 0.82);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ============================================================
   2. Compatibility strip
   ============================================================ */
.landing-compat {
  padding-top: 8px;
  padding-bottom: 48px;
}

.landing-compat__strip {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

.landing-compat__label {
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--ink-2);
}

.landing-compat__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ============================================================
   3. Modules
   ============================================================ */
.landing-modules {
  padding-top: 24px;
  padding-bottom: 56px;
}

.landing-modules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* Compatibility badge row inside module cards */
.landing-module-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* Tone icon tile inside module cards */
.landing-module-tile {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   4. Live edits
   ============================================================ */
.landing-liveedits {
  padding-top: 8px;
  padding-bottom: 60px;
}

.landing-liveedits__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 44px;
  align-items: center;
}

/* Before → after crossfade frame. The "after" image is stacked on top of the
   "before" and its opacity loops, smoothly dissolving between the two scenes.
   Badges crossfade in sync so the label always matches the visible image. */
.landing-liveedits__xfade {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-0);
  box-shadow: var(--shadow-sm);
}

.landing-liveedits__xfade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Resting state (before the section scrolls into view): show the "before"
   image and badge, hide the "after" ones. The crossfade controller adds
   .is-playing on scroll-in, which kicks off the animations from this state. */
.landing-liveedits__xfade-img--after {
  opacity: 0;
}

.landing-liveedits__xfade-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.landing-liveedits__xfade-badge--after {
  opacity: 0;
}

.landing-liveedits__xfade.is-playing .landing-liveedits__xfade-img--after,
.landing-liveedits__xfade.is-playing .landing-liveedits__xfade-badge--after {
  animation: liveedit-xfade 7s ease-in-out infinite;
}

.landing-liveedits__xfade.is-playing .landing-liveedits__xfade-badge--before {
  animation: liveedit-xfade-out 7s ease-in-out infinite;
}

/* Hold each state, then dissolve. 0–40%: before. 50–90%: after. 100%: back. */
@keyframes liveedit-xfade {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes liveedit-xfade-out {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-liveedits__xfade-img--after,
  .landing-liveedits__xfade-badge--before,
  .landing-liveedits__xfade-badge--after {
    animation: none;
  }

  .landing-liveedits__xfade-img--after {
    opacity: 1;
  }

  .landing-liveedits__xfade-badge--before {
    opacity: 0;
  }

  .landing-liveedits__xfade-badge--after {
    opacity: 1;
  }
}

/* ============================================================
   5. Gallery band
   ============================================================ */
.landing-gallery-band {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 56px;
  padding-bottom: 56px;
}

.landing-gallery__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.landing-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ============================================================
   6. Pricing
   ============================================================ */
.landing-pricing {
  padding-top: 64px;
  padding-bottom: 72px;
}

.landing-pricing__head {
  text-align: center;
  margin-bottom: 36px;
}

.landing-pricing__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* Dark pay-as-you-go CTA card interior */
.landing-pricing__cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink-0);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: calc(-1 * var(--space-6));
  height: calc(100% + 2 * var(--space-6));
  box-sizing: border-box;
}

/* ============================================================
   Responsive — mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  .landing-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
  }

  .landing-h1 {
    font-size: 40px;
  }

  .landing-h2 {
    font-size: 28px;
  }

  .landing-modules__grid {
    grid-template-columns: 1fr;
  }

  .landing-liveedits__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .landing-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-pricing__grid {
    grid-template-columns: 1fr;
  }

  .landing-pricing__cta-card {
    margin: 0;
    height: auto;
  }

  .landing-modules {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .landing-liveedits {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .landing-gallery-band {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .landing-pricing {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ============================================================
   Responsive — small mobile (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .landing-gallery__grid {
    grid-template-columns: 1fr;
  }

  .landing-h1 {
    font-size: 34px;
  }
}

/* Centre the hero on mobile — left-aligned text leaves the circled "on the fly"
   running off the screen edge, so centre everything and drop the -1em nudge. */
@media (max-width: 768px) {
  .landing-hero__copy {
    text-align: center;
  }

  .landing-hero__ctas {
    justify-content: center;
  }

  .landing-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .landing-hero .ds-annotation {
    margin-left: 0 !important;
  }
}

/* ============================================================
   Full-section hero background video (desktop only).
   Mobile keeps the small card-frame video (.landing-hero__frame).
   ============================================================ */
.landing-hero__bg {
  display: none;
}

.landing-hero__bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-hero__bg-iframe {
  border: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* Cover the (wide) section without letterboxing the 16:9 video — scale a 16:9
     iframe to fill both dimensions and let overflow:hidden on the parent crop it. */
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.landing-hero__bg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #ffffff 0%, #ffffff 30%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 76%);
}

/* Bare, semi-transparent play glyph — no circle/border. Hidden on mobile. */
.landing-hero__bg-play {
  display: none;
}

@media (min-width: 769px) {
  .landing-hero {
    min-height: 520px;
    align-items: center;
  }

  .landing-hero__bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .landing-hero__copy {
    z-index: 2;
  }

  /* The full-section background replaces the small card frame on desktop. */
  .landing-hero__frame {
    display: none;
  }

  .landing-hero__bg-play {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
  }

  .landing-hero__bg-play svg {
    width: 76px;
    height: 76px;
    fill: rgba(255, 255, 255, 0.7);
    stroke: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
    transition: fill var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  .landing-hero__bg-play:hover svg {
    fill: rgba(255, 255, 255, 0.95);
    transform: scale(1.08);
  }
}