/* TinyCast scroll-story: scene layout (hero, concept act, journey scrub,
   gallery, pricing), enter states, and the stepped no-JS / reduced-motion
   fallback backgrounds. */

main section { position: relative; }

/* ---------- Act 1: hero (day) ---------- */

.scene-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(5.5rem, 12svh, 8rem) 3rem;
}
.scene-hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero-copy h1 {
  font-family: var(--font-day-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--fg-ink);
  text-wrap: balance;
}
.hero-copy .highlight { color: var(--fg-accent); }
.hero-copy .lede {
  margin-block-start: 1.1rem;
  font-size: var(--fs-lede);
  color: var(--fg-muted);
  max-width: 34rem;
}
.hero-cta {
  margin-block-start: 2rem;
  display: flex;
  align-items: center;
  gap: 1.1rem 1.6rem;
  flex-wrap: wrap;
}
.hero-how {
  font-family: var(--font-day-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg-accent);
  text-decoration: none;
  padding-block: 0.4rem;
}
.hero-how:hover { text-decoration: underline; }
.hero-how span { display: inline-block; }

/* Hero art: a real framed iPhone floating over a warm ambient sun glow. */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  isolation: isolate;
}
.hero-orb {
  position: absolute;
  z-index: -1;
  inset-block-start: 4%;
  inset-inline-end: 6%;
  width: clamp(150px, 26vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFD37A 0%, #FFB23E 42%, rgba(255, 178, 62, 0) 72%);
  filter: blur(2px);
  animation: tc-float 7s ease-in-out infinite;
}
.hero-phone {
  width: clamp(210px, 26vw, 268px);
  animation: tc-float 6s ease-in-out infinite;
  animation-delay: 0.4s;
}
.hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Act 2: the concept (big statements over day -> early sunset).
     Fixed Sunbeam inks (not the lerped --fg vars): the sky under this act is
     day to ~60% sunset at worst, and #3B2A1E / #54432F stay >= 4.5:1 against
     the full-sunset frame (#F7A97E), so text never hits a low-contrast
     mid-lerp state here. ---------- */

.scene-concept { padding-block: clamp(3rem, 8svh, 6rem); }
.concept-block {
  min-height: 52svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.concept-huge {
  font-family: var(--font-day-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 7.5vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sb-ink);
  text-wrap: balance;
}
.concept-huge .highlight { color: var(--sb-accent-dark); }
.concept-sub {
  margin-block-start: 1.1rem;
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--concept-muted);
  max-width: 36rem;
  text-wrap: balance;
}
.concept-kicker {
  font-family: var(--font-day-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  color: var(--sb-ink);
  margin-block-end: 1.6rem;
}
.moment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  width: 100%;
  max-width: 46rem;
}
@media (min-width: 46rem) {
  .moment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.moment-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(240, 225, 204, 0.9);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem;
  text-align: center;
}
.moment-card .emoji { font-size: 1.7rem; display: block; margin-block-end: 0.4rem; }
.moment-card h3 {
  font-family: var(--font-day-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--sb-ink);
}
.moment-card p {
  font-size: 0.92rem;
  color: var(--concept-muted);
  line-height: 1.5;
  margin-block-start: 0.25rem;
}
.concept-trust {
  min-height: 34svh;
  display: grid;
  place-items: center;
  text-align: center;
}
.concept-trust p {
  font-family: var(--font-day-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.2vw, 1.8rem);
  color: var(--sb-ink);
  text-wrap: balance;
  max-width: 34rem;
}

/* ---------- Act 3: the journey (one phone, six beats) ---------- */

.scene-journey { height: 700svh; }
.journey-sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.journey-stage {
  position: relative;
  display: grid;
  place-items: center;
}
/* Fixed-size phone (300/658 aspect); screens slide inside it, no zoom. */
.journey-phone {
  width: min(calc(72svh * 0.4559), 80vw);
  transform-origin: center;
}

/* Night backdrop behind the phone (beats 4-6) */
.journey-night {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.journey-stage { z-index: 1; }
.journey-moon {
  position: absolute;
  inset-block-start: 10%;
  inset-inline-end: clamp(3%, 9vw, 14%);
  width: clamp(110px, 16vw, 200px);
}
.js-sky .journey-moon { transform: translateY(140px); }
.j-star {
  position: absolute;
  border-radius: 50%;
  background: var(--st-star);
  animation: tc-twk 3s ease-in-out infinite;
}

/* Captions: one per beat, cross-faded, always on a scrim pill so the text
   is readable over any sky frame (contrast fix). 0.62 alpha keeps
   #F7ECD8 >= 4.5:1 even over the lightest day sky. */
.journey-captions {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.j-caption {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 5.5svh);
  transform: translateX(50%);
  width: max-content;
  max-width: min(88vw, 30rem);
  text-align: center;
  opacity: 0;
  margin: 0;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: rgba(20, 10, 35, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  color: #F7ECD8;
  font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: 1.45;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .j-caption { background: rgba(24, 12, 40, 0.85); }
}
@media (min-width: 64rem) {
  /* Desktop: caption sits beside the phone, vertically centered. */
  .j-caption {
    inset-inline-start: clamp(2rem, 8vw, 10rem);
    inset-block-start: 50%;
    transform: translateY(-50%);
    text-align: start;
    max-width: 21rem;
    border-radius: 22px;
    padding: 0.85rem 1.3rem;
  }
}

/* ---------- Pricing + final CTA (night) ---------- */

/* Permanent night background: this scene sits in the sky's night-hold zone,
   so a solid background is visually identical, keeps text contrast computable
   for accessibility tooling, and covers the no-JS case. */
.scene-night-cta {
  padding-block: clamp(3.5rem, 9svh, 6rem);
  background: var(--sky-night);
  background-color: #241338; /* solid fallback under the gradient (a11y tooling + old browsers) */
  background-attachment: fixed; /* mirrors the fixed sky so the boundary is seamless */
}

/* ---------- Enter animations (engine mode only) ---------- */

.js-sky .fx {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.js-sky .fx-d1 { transition-delay: 0.12s; }
.js-sky .fx-d2 { transition-delay: 0.24s; }
.js-sky .is-in .fx {
  opacity: 1;
  transform: none;
}

/* ---------- Stepped fallback (no-JS and reduced motion).
     Hidden as soon as html.js-sky exists: the fixed sky takes over.
     The journey collapses to a static phone showing the player screen
     (audio stays tap-playable) with the captions listed below. ---------- */

html:not(.js-sky) .scene-hero,
html:not(.js-sky) .scene-concept { background: var(--sky-day); }
html:not(.js-sky) .scene-journey,
html:not(.js-sky) .scene-night-cta { background: var(--sky-night); }

html:not(.js-sky) .scene-journey {
  height: auto;
  padding-block: clamp(3rem, 8svh, 5rem);
}
html:not(.js-sky) .journey-sticky {
  position: static;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}
html:not(.js-sky) .journey-night { display: none; }
html:not(.js-sky) .journey-phone {
  transform: none !important;
  width: min(300px, 78vw);
}
html:not(.js-sky) .j-screen { opacity: 0 !important; visibility: hidden !important; }
html:not(.js-sky) .j-screen--player { opacity: 1 !important; visibility: visible !important; }
html:not(.js-sky) .scene-journey .phone-status { color: var(--st-on-dark); }
html:not(.js-sky) .journey-captions {
  position: static;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding-inline: var(--pad-inline);
}
html:not(.js-sky) .j-caption {
  position: static;
  opacity: 1 !important;
  transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 46rem) {
  /* Stack headline -> phone -> CTA. .hero-main dissolves so its children
     (copy + cta) can be ordered around the phone via flex order. */
  .scene-hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
  }
  .hero-main { display: contents; }
  .hero-copy { order: 1; }
  .hero-art { order: 2; min-height: 300px; }
  .hero-cta { order: 3; justify-content: center; margin-block-start: 0; }
  .hero-copy .lede { margin-inline: auto; }
}