/* The home page's movement. Everything here stands still for prefers-reduced-motion. */
body.home { overflow-x: hidden; }
.eyebrow { text-transform: uppercase; letter-spacing: 1.4px; font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 14px; }
.eyebrow.light { color: var(--peach); }

/* Soft light drifting behind the hero */
.glow { position: absolute; inset: 0 0 auto 0; height: 900px; overflow: hidden; pointer-events: none; z-index: -1; }
.glow span { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(90px); opacity: .55; }
.glow span:first-child { background: #F8D5BF; top: -160px; right: -120px; animation: drift 18s ease-in-out infinite alternate; }
.glow span:last-child { background: #E6DDF4; top: 260px; left: -220px; width: 520px; height: 520px; opacity: .45; animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-60px, 50px) scale(1.08); } }
.breathe { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 3px 18px rgba(214,150,90,.38); transform: scale(1.04); } }

/* Hero */
.hero { padding-top: 40px; padding-bottom: 40px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.glint { position: relative; overflow: hidden; }
.glint::after { content: ""; position: absolute; inset: 0; width: 90px; left: -120px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: glint 5s ease-in-out 1.5s infinite; }
@keyframes glint { 0%, 70% { left: -120px; } 100% { left: 110%; } }
.hear { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px; padding: 13px 22px; font: 700 17px "Figtree", -apple-system, system-ui, sans-serif; cursor: pointer; }
.hear:hover { background: rgba(43,33,29,.05); }
.hear .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.hear[aria-pressed="true"] { background: var(--ink); color: #FFF8F1; }
.hear[aria-pressed="true"] .dot { animation: pulse 1s ease-in-out infinite; background: var(--peach); }

.listen { position: relative; transition: transform .25s ease; }
.listen.shake { animation: shake .42s ease; }
@keyframes shake { 20% { transform: translateX(-4px) rotate(-.4deg); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.listening { transition: background .3s, color .3s; }
.listening.heard { background: #ECE6F7; color: #6E5BB0; }
.listening.heard::before { background: #8B7BC0; }
.listening.slow { background: #FFE8C2; color: #9A5B12; }
.listening.slow::before { background: #E3A23B; animation-duration: 2.4s; }
.keys .w, .keys .b { transition: background .12s ease, box-shadow .12s ease; }
.keys .w.on { background: var(--lit); box-shadow: inset 0 -6px 14px rgba(180,85,44,.18); }
.keys .w.stray { background: #E1D8F6; box-shadow: inset 0 -6px 14px rgba(110,91,176,.25); }
.keys .w.gold { background: #FFE6B5; box-shadow: inset 0 -6px 14px rgba(227,162,59,.3); }
.keys .b.on { background: var(--accent); }
.wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; margin-top: 16px; }
.wave i { display: block; width: 4px; border-radius: 2px; background: var(--peach); height: 4px; transition: height .08s linear; }
.remark { min-height: 86px; }
.remark .said { transition: opacity .35s; }
.remark .said .cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chips { display: flex; gap: 8px; margin-top: 14px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.chips.show { opacity: 1; transform: none; }
.chip { font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #FFF8F1; transition: box-shadow .3s; }
.chip.ghost { background: var(--pill); color: var(--muted); }
.chip.pressed { box-shadow: 0 0 0 4px rgba(244,165,126,.45); }

/* The stave drifting under the hero (the app's welcome) */
.stave { height: 92px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); margin: 6px 0 40px; }
.stave-track { display: flex; width: max-content; animation: stave 42s linear infinite; }
.stave-track svg { display: block; height: 92px; width: auto; }
@keyframes stave { to { transform: translateX(-50%); } }

/* Story sections */
.story { padding: 40px 24px 40px; }
.row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; padding: 56px 0; }
.row.flip .copy { order: 2; }
.row h2, .keepsake h2, .cta h2 { font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -1px; margin: 0 0 16px; }
.row p { color: var(--muted); font-size: 18px; margin: 0; }
.visual { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 26px; box-shadow: 0 18px 50px rgba(91,60,30,.08); position: relative; overflow: hidden; }
.visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(244,165,126,.16), transparent 60%); }
.visual:hover::before { opacity: 1; }

/* 01 hears: a sound turning into notes */
.hears { display: grid; grid-template-columns: 1fr 40px 1.3fr; align-items: center; gap: 10px; min-height: 230px; }
.hears span { display: block; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 10px; text-transform: uppercase; letter-spacing: .8px; }
.hears .bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 120px; }
.hears .bars i { width: 4px; border-radius: 2px; background: var(--peach); height: 8%; }
.in .hears .bars i { animation: sound 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.07s); }
@keyframes sound { 0%, 100% { height: 10%; } 30% { height: var(--h); } 60% { height: 25%; } }
.hears .arrow { height: 2px; background: linear-gradient(90deg, var(--peach), var(--accent)); position: relative; }
.hears .arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--accent); }
.hears .roll { position: relative; }
.hears .lines { position: relative; height: 120px; border-radius: 12px; background: repeating-linear-gradient(0deg, #FBF4EA 0 20px, #FFFDF9 20px 40px); border: 1px solid var(--line); overflow: hidden; }
.hears .notes { position: absolute; inset: 0 0 26px 0; }
.hears .notes b { position: absolute; height: 14px; border-radius: 4px; background: var(--accent); opacity: 0; transform: translateX(-14px); }
.in .hears .notes b { animation: noteIn 4.4s ease-out infinite; animation-delay: calc(var(--i) * .32s); }
@keyframes noteIn { 0% { opacity: 0; transform: translateX(-14px); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 02 shows: yours, then on time (the app's show card) */
.shows .title { font-weight: 700; color: var(--ink); margin: 0 0 14px; font-size: 16px; }
.lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; margin-bottom: 10px; }
.lane.yours { background: var(--ink); color: #FFF8F1; }
.lane.target { background: #F6EFE6; }
.lane .tag { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.lane .tag i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--peach); color: var(--ink); }
.lane.target .tag i { background: #3D302A; color: #FFF8F1; }
.track { position: relative; height: 30px; }
.track b { position: absolute; top: 9px; width: 9%; height: 12px; border-radius: 6px; background: #D9C9B8; }
.lane.yours .track b { background: #8C7B6E; }
.track b:nth-child(1) { left: 0%; } .track b:nth-child(2) { left: 12.5%; } .track b:nth-child(3) { left: 25%; } .track b:nth-child(4) { left: 37.5%; }
.track b:nth-child(5) { left: 50%; } .track b:nth-child(6) { left: 62.5%; } .track b:nth-child(7) { left: 75%; } .track b:nth-child(8) { left: 87.5%; }
.track b.late { background: var(--peach); left: 44%; box-shadow: 0 0 0 3px rgba(244,165,126,.25); }
.in .track b.late { animation: fixLate 7s ease-in-out infinite; }
@keyframes fixLate { 0%, 55% { left: 44%; background: var(--peach); } 68%, 92% { left: 37.5%; background: #F2C46B; box-shadow: 0 0 0 4px rgba(242,196,107,.35), 0 0 18px rgba(242,196,107,.6); } 100% { left: 44%; } }
.track .head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); left: 0; opacity: 0; }
.in .track .head { animation: sweep 3.5s linear infinite; }
@keyframes sweep { 0% { left: 0; opacity: 1; } 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.buttons { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.btn { flex: 1; text-align: center; padding: 12px; border-radius: 999px; background: #F6EFE6; font-weight: 700; font-size: 15px; white-space: nowrap; }
.btn.dark { background: var(--ink); color: #FFF8F1; }

/* 03 remembers: the gap shrinking, take after take */
.remembers .take { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.remembers .take:nth-child(2) { transition-delay: .5s; } .remembers .take:nth-child(3) { transition-delay: 1s; }
.in .remembers .take { opacity: 1; transform: none; }
.remembers .n { font-weight: 700; color: var(--muted); font-size: 15px; }
.remembers .gap { height: 12px; background: #F6EFE6; border-radius: 6px; overflow: hidden; }
.remembers .gap i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--peach), var(--accent)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.remembers .take:nth-child(2) .gap i { transition-delay: .6s; } .remembers .take:nth-child(3) .gap i { transition-delay: 1.1s; }
.in .remembers .gap i { width: var(--w); }
.remembers .ms { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.remembers .remark.small { margin-top: 18px; min-height: 0; font-size: 16px; opacity: 0; transition: opacity .6s 1.8s; }
.in .remembers .remark.small { opacity: 1; }

/* Keepsake */
.keepsake { background: #1E1714; color: #FFF8F1; padding: 100px 0; margin-top: 60px; position: relative; overflow: hidden; }
.keepsake::before { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; right: -160px; top: -200px; background: radial-gradient(circle, rgba(242,196,107,.22), transparent 65%); }
.keepsake .inner { display: grid; grid-template-columns: 1fr 360px; gap: 72px; align-items: center; position: relative; }
.keepsake p { color: #D7C9BC; font-size: 18px; }
.phone { position: relative; width: 330px; justify-self: center; border-radius: 48px; padding: 12px; background: #0E0B0A; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 2px #3A2F2A; }
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 38px; background: #222; }
.phone .sound { position: absolute; right: 26px; bottom: 26px; border: 0; border-radius: 999px; padding: 9px 14px; font: 700 13px "Figtree", -apple-system, system-ui, sans-serif; background: rgba(255,248,241,.92); color: var(--ink); cursor: pointer; }

/* Closing */
.cta { text-align: center; padding: 110px 24px 120px; }
.cta p { color: var(--muted); font-size: 19px; margin: 0 0 28px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
  .keepsake .inner { grid-template-columns: 1fr; }
  .row.flip .copy { order: 0; }
  .keepsake { padding: 70px 0; }
  .keepsake .inner { gap: 40px; }
  .phone { width: 280px; }
  .lane { grid-template-columns: 96px 1fr; }
  .hears { grid-template-columns: 1fr 26px 1.4fr; }
}
@media (max-width: 420px) {
  .visual { padding: 18px; border-radius: 22px; }
  .lane .tag { font-size: 14px; }
  .actions { gap: 10px; }
  .hear, .store { padding: 13px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hears .notes b { opacity: 1; transform: none; }
  .remembers .take { opacity: 1; transform: none; }
  .remembers .gap i { width: var(--w); }
  .remembers .remark.small, .chips { opacity: 1; }
}

/* Phones: Ivory's remark on the first screen, and a nav that fits. */
@media (max-width: 560px) {
  nav.site a[href="#how"], nav.site a[href="#keepsake"] { display: none; }
  .hero { padding-top: 4px; padding-bottom: 24px; gap: 22px; }
  .hero .eyebrow { display: none; }
  .hero h1 { font-size: 40px; margin-bottom: 12px; }
  .hero p.lede { font-size: 17px; margin-bottom: 18px; }
  .hero .small { display: none; }
  .listen { padding: 14px; }
  .listen .top { margin-bottom: 10px; }
  .keys { height: 86px; }
  .wave { height: 22px; margin-top: 10px; }
  .remark { min-height: 0; padding: 12px 14px; margin-top: 10px; font-size: 16px; }
  .chips { margin-top: 10px; }
  .stave { margin-bottom: 10px; }
}