/* SongTales landing page — motion, 3D props and the phone demos.
   Loaded only by index.html, on top of style.css (which the guide pages share). */

:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Header ---------- */
.site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(14, 131, 196, 0.12); }
.main-nav a:not(.btn) { position: relative; }
.main-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px;
  background: var(--yellow); transform: scaleX(0); transition: transform 0.3s var(--spring);
}
.main-nav a:not(.btn):hover::after { transform: scaleX(1); }
.logo-link img { transition: transform 0.5s var(--spring); }
.logo-link:hover img { transform: rotate(-10deg) scale(1.08); }

/* Reading progress under the sticky header. */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--yellow), var(--coral));
    transform-origin: 0 50%; transform: scaleX(0);
    animation: progress linear both; animation-timeline: scroll(root);
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ---------- Store badges ---------- */
.store-badge { transition: transform 0.25s var(--spring), box-shadow 0.25s ease; }
.store-badge:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(8, 62, 94, 0.35); }

/* ---------- Hero ---------- */
.hero { padding: 0; }
.hero .wrap { position: relative; z-index: 4; padding-bottom: 185px; }
/* style.css frames the old hero image; the new scene is all cutouts. */
.hero .hero-art img { border-radius: 0; box-shadow: none; }
.hero h1 .hl { position: relative; white-space: nowrap; display: inline-block; }
.hero h1 .hl svg {
  position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.38em; overflow: visible;
}
.hero h1 .hl path {
  fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 0;
}
/* A row of 3D clouds sitting on the hero's bottom edge, fading into the white section. */
.hero .cloud-floor {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 170px;
  pointer-events: none; font-size: 10px;
}
.hero .cloud-floor img { position: absolute; max-width: none; }
.hero .cloud-floor::after {
  content: ""; position: absolute; inset: 45% 0 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
}
@media (max-width: 860px) { .hero .cloud-floor { height: 100px; font-size: 5.5px; } }
.sky-note {
  position: absolute; z-index: 1; color: rgba(255, 255, 255, 0.35); font-size: 28px;
  pointer-events: none; user-select: none;
}

/* Hero stage: everything sized in em so the whole scene scales as one. */
.hero-stage {
  --mx: 0; --my: 0;
  position: relative; font-size: 10px; width: 44em; height: 64em; margin: 0 auto;
  perspective: 1200px;
}
.hero-stage .phone-wrap {
  position: absolute; left: 50%; top: 2em; width: 29em; margin-left: -14.5em; z-index: 2;
  transform: rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -5deg)) rotate(3deg);
  transition: transform 0.6s var(--ease-out);
}
.hero-stage .demo-chips { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
@media (max-width: 1060px) { .hero-stage { font-size: 8.4px; } }
@media (max-width: 860px) {
  .hero .wrap { padding-bottom: 110px; gap: 12px; }
  .hero-stage { font-size: 7.6px; }
}
@media (max-width: 400px) { .hero-stage { font-size: 7px; } }

/* White clay phone (same device as the store art in tools/store-screenshots). */
.phone {
  position: relative; padding: 0.95em; border-radius: 4.4em;
  background: linear-gradient(150deg, #ffffff 0%, #f3f1f7 45%, #dcd8e6 100%);
  box-shadow:
    0 3em 6em rgba(0, 35, 120, 0.4),
    0 1em 1.6em rgba(0, 35, 120, 0.25),
    inset 0 0.35em 0.4em rgba(255, 255, 255, 0.95),
    inset -0.4em -0.6em 1em rgba(110, 100, 150, 0.35);
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: 0.35em; border-radius: 0.3em;
  background: linear-gradient(90deg, #d8d4e2, #f5f3f9);
}
.phone::before { right: -0.25em; top: 26%; height: 14%; }
.phone::after { left: -0.25em; top: 20%; height: 8%; }
.phone .screen {
  position: relative; overflow: hidden; border-radius: 3.5em; background: #1b8fd6;
  aspect-ratio: 600 / 1304; box-shadow: 0 0 0 0.12em #eceaf2;
  isolation: isolate;
}
.phone .screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateY(4%) scale(1.02);
  transition: opacity 0.55s ease, transform 0.8s var(--ease-out);
}
.phone .screen img.is-active { opacity: 1; transform: none; }
.phone .screen img.is-leaving { opacity: 0; transform: translateY(-3%) scale(0.98); }
.phone .statusbar {
  position: absolute; z-index: 2; inset: 0 0 auto; height: 15.6%;
  display: flex; align-items: center; justify-content: space-between; padding: 0 9%;
  color: #fff; font: 800 1.2em/1 "Nunito", sans-serif; pointer-events: none;
}
.phone .statusbar .icons { display: flex; gap: 0.35em; align-items: center; }
.phone .statusbar svg { height: 0.8em; width: auto; fill: currentColor; }
.phone .camera {
  position: absolute; z-index: 2; left: 50%; top: 2.2%; width: 1.1em; height: 1.1em; margin-left: -0.55em;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3140, #07080c 70%);
}
/* A glossy sweep across the glass. */
.phone .screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 60%);
  transform: translateX(-100%);
}

/* Floating 3D props. The wrapper follows the pointer, the image floats. */
.prop {
  position: absolute; z-index: 3; --d: 1;
  transform: translate3d(calc(var(--mx) * var(--d) * 1.6em), calc(var(--my) * var(--d) * 1.6em), 0);
  transition: transform 0.7s var(--ease-out);
}
.prop.back { z-index: 1; }
.prop img {
  width: 100%; display: block; cursor: pointer;
  filter: drop-shadow(0 1.2em 1.4em rgba(0, 45, 140, 0.3));
  -webkit-user-drag: none; user-select: none;
}
.prop.person img { cursor: default; filter: drop-shadow(0 1.4em 2em rgba(0, 45, 140, 0.35)); }

/* Screen-step chips under the hero phone. */
.demo-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8em; }
.demo-chip {
  position: relative; overflow: hidden; border: 0; cursor: pointer;
  font: 700 1.4em/1 "Baloo 2", sans-serif; color: #fff;
  background: rgba(255, 255, 255, 0.18); padding: 0.55em 1em 0.45em; border-radius: 999px;
  backdrop-filter: blur(6px); transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--spring);
}
@media (max-width: 860px) { .demo-chip { font-size: 1.7em; } }
.demo-chip:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.3); }
.demo-chip.is-active { background: #fff; color: var(--blue-deep); }
.demo-chip::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--coral); transform-origin: 0 50%; transform: scaleX(0);
}
.demo-chip:focus-visible, .guide-card:focus-visible, .store-badge:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------- How it works: sticky phone ---------- */
.how { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.how-phone-col { position: sticky; top: 96px; }
.how-phone-col .hero-stage { height: auto; width: 30em; padding: 2em 0 4em; }
.how-phone-col .phone-wrap { position: relative; left: auto; top: auto; margin: 0 auto; width: 26em; transform: rotate(-2deg); }
.steps-v { position: relative; display: flex; flex-direction: column; gap: 22vh; padding: 10vh 0 18vh; }
.steps-v .track {
  position: absolute; left: 51px; top: 10vh; bottom: 18vh; width: 4px; border-radius: 4px; background: #e2f2fb;
}
.steps-v .track i {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(var(--p, 0));
  background: linear-gradient(var(--blue), var(--coral));
}
.steps-v .step { position: relative; z-index: 1; text-align: left; padding: 28px 28px 28px 104px; transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, transform 0.5s var(--ease-out); }
.steps-v .step .num { position: absolute; left: 26px; top: 26px; margin: 0; transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s var(--spring); }
.steps-v .step h3 { font-size: 1.35rem; }
.step-shot { display: none; }
html.js .steps-v .step:not(.is-active) { transform: scale(0.97); }
html.js .steps-v .step:not(.is-active) > * { opacity: 0.5; }
.steps-v .step > * { transition: opacity 0.4s ease; }
.steps-v .step.is-active { border-color: #bfe5f8; box-shadow: var(--shadow); }
.steps-v .step.is-active .num { background: var(--blue); color: #fff; transform: scale(1.1); }
@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; gap: 0; }
  .how-phone-col { display: none; }
  .steps-v { gap: 20px; padding: 0; }
  .steps-v .track { display: none; }
  .steps-v .step { padding: 26px 24px; text-align: center; }
  .steps-v .step .num { position: static; margin: 0 auto 16px; }
  html.js .steps-v .step:not(.is-active) { transform: none; }
  html.js .steps-v .step:not(.is-active) > * { opacity: 1; }
  .step-shot {
    display: block; width: 62%; max-width: 230px; margin: 20px auto 0; border-radius: 26px;
    border: 6px solid #f3f1f7; box-shadow: var(--shadow);
  }
}

/* ---------- Features ---------- */
.feature { align-items: flex-start; transition: transform 0.35s var(--spring), box-shadow 0.35s ease, border-color 0.35s ease; }
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #bfe5f8; }
.feature .icon3d { flex: none; width: 64px; height: 64px; margin-top: -4px; }
.feature .icon3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 45, 140, 0.2)); }
.feature:hover .icon3d img { animation: boing 0.8s var(--spring); }

/* ---------- Screenshots marquee ---------- */
#screenshots { position: relative; overflow: hidden; }
#screenshots .section-head { position: relative; }
.head-kid { position: absolute; top: -30px; width: 150px; pointer-events: none; }
.head-kid.left { right: calc(100% + 30px); }
.head-kid.right { left: calc(100% + 40px); top: 0; width: 140px; }
@media (max-width: 1080px) { .head-kid { display: none; } }
.marquee {
  display: flex; flex-direction: column; gap: 22px; margin: 0 calc(50% - 50vw); padding: 18px 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row { display: flex; width: max-content; gap: 22px; }
.marquee-row figure {
  width: 220px; flex: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transform: rotate(var(--r, -1.5deg)); transition: transform 0.4s var(--spring), box-shadow 0.4s ease;
}
.marquee-row figure:nth-child(even) { --r: 1.5deg; }
.marquee-row figure:hover { transform: rotate(0) scale(1.06); box-shadow: 0 18px 40px rgba(14, 131, 196, 0.3); }
.marquee-row img { width: 100%; }
@media (max-width: 760px) { .marquee-row figure { width: 160px; } }

/* ---------- Guides ---------- */
.guide-card .more { transition: transform 0.3s var(--spring); }
.guide-card:hover .more { transform: translateX(6px); }

/* ---------- FAQ ---------- */
.faq details { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.faq details[open] { border-color: #bfe5f8; box-shadow: var(--shadow); }
.faq summary::after { transition: transform 0.3s var(--spring); }
.faq details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height 0.35s var(--ease-out), opacity 0.3s ease, content-visibility 0.35s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; opacity: 1; }
}

/* ---------- CTA band ---------- */
.cta-band { padding-bottom: 0; }
.cta-band > :not(.cta-cloud):not(.prop) { position: relative; z-index: 2; }
.cta-band .family { display: block; width: min(520px, 92%); margin: 30px auto 0; }
.cta-cloud { position: absolute; z-index: 1; opacity: 0.9; pointer-events: none; }
.cta-band .prop { transform: none; }
@media (max-width: 760px) { .cta-band .prop { display: none; } }

/* ---------- Scroll reveal (only when JS is on to undo it) ---------- */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Motion (skipped entirely for reduced-motion users) ---------- */
@keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-0.9em) rotate(calc(var(--rot, 0deg) + 4deg)); } }
@keyframes boing {
  0% { transform: scale(1) rotate(var(--rot, 0deg)); }
  30% { transform: scale(1.25, 0.85) rotate(var(--rot, 0deg)); }
  55% { transform: scale(0.9, 1.12) rotate(calc(var(--rot, 0deg) - 8deg)); }
  100% { transform: scale(1) rotate(var(--rot, 0deg)); }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes sweep { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes chip-fill { to { transform: scaleX(1); } }
@keyframes sky-note { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px) rotate(20deg); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(-3deg); } 40% { transform: translateY(-22px) rotate(3deg); } }

@media (prefers-reduced-motion: no-preference) {
  .prop img { animation: float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite; }
  .prop img:hover { animation: boing 0.8s var(--spring); }
  .prop.person img { animation: none; }
  .hero-text > * { animation: rise 0.8s var(--ease-out) both; }
  .hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .hero-text > :nth-child(3) { animation-delay: 0.16s; }
  .hero-text > :nth-child(4) { animation-delay: 0.24s; }
  .hero-text > :nth-child(5) { animation-delay: 0.32s; }
  .hero h1 .hl path { animation: draw 1.1s 0.6s var(--ease-out) both; }
  .hero .hero-stage { animation: rise 1s 0.2s var(--ease-out) both; }
  .phone .screen::after { animation: sweep 7s ease-in-out 2s infinite; }
  .demo-chip.is-active::after { animation: chip-fill var(--interval, 3.4s) linear both; }
  .demo-chips.is-paused .demo-chip::after { animation-play-state: paused; }
  .sky-note { animation: sky-note var(--dur, 9s) linear var(--delay, 0s) infinite; }
  .marquee-row { animation: marquee 48s linear infinite; }
  .marquee-row.rev { animation-name: marquee-rev; animation-duration: 56s; }
  .marquee:hover .marquee-row { animation-play-state: paused; }
  .head-kid.left { animation: hop 1.6s ease-in-out infinite; }
  .cloud-floor img { animation: bob var(--dur, 9s) ease-in-out var(--delay, 0s) infinite; }
  .cta-cloud { animation: drift var(--dur, 60s) linear var(--delay, 0s) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-row [aria-hidden="true"], .marquee-row.rev { display: none; }
  .sky-note, .cta-cloud { display: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .phone .screen img { transition: opacity 0.2s ease; transform: none; }
}