/* Home page: one idea per screen, large type, gentle scroll reveals.
   Builds on the tokens in style.css. */

.scenes { display: block; }

.scene {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10vh 0;
}

.scene--hero { min-height: calc(100vh - 110px); padding-top: 4vh; position: relative; }

.mega {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 11ch;
  text-wrap: balance;
}

.headline {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  text-wrap: balance;
}

.headline--small { font-size: var(--fs-h3); line-height: var(--lh-h3); }

.scene-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted-text);
  max-width: 34ch;
  margin: 0 auto 26px;
  text-wrap: balance;
}

.scene .btn-row { justify-content: center; margin-top: 6px; }

.kicker {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 34px;
}

/* Moods: four big words */
.moods { list-style: none; margin: 0; padding: 0; display: grid; gap: 7vh; }
.moods li { display: grid; gap: 8px; }
.moods .big {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.moods li:nth-child(2) .big { color: var(--accent); }
.moods .line { color: var(--muted-text); font-size: var(--fs-body); }

/* Times: large numerals */
.times {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 clamp(18px, 4vw, 56px);
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: normal;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.02em;
}
.times span:not(:last-of-type)::after {
  content: "";
  display: inline-block;
  width: 0.12em;
  height: 0.12em;
  border-radius: 50%;
  background: var(--divider);
  margin-left: clamp(18px, 4vw, 56px);
  vertical-align: middle;
}
.times span small { margin-left: 0.2em; }
.times small {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-text);
}

/* Split scene: text + app picker */
.scene--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}
.scene--split .scene-sub { margin-left: 0; }
.scene--split .picker { margin: 0 0 0 auto; }

/* Dark full-bleed scene */
.scene--dark {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--ink);
  color: var(--bg);
  padding: 14vh 0;
}
.dark-inner {
  width: min(calc(100% - 2 * clamp(28px, 5vw, 88px)), 980px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scene--dark .scene-sub { color: #B9B6AC; }
.scene--dark .pair { width: 100%; margin-top: 8px; }
.scene--dark .clip { border-color: rgba(244, 240, 226, 0.22) !important; background: transparent !important; color: var(--bg); text-align: left; }
.scene--dark .clip .tag { color: #B9B6AC; }
.scene--dark .clip.tuned-432 .tag { color: var(--accent); }
.scene--dark .clip-times { color: #B9B6AC; }
.scene--dark.audio-compare button.clip-play { color: var(--bg); border-color: rgba(244, 240, 226, 0.6); }
.scene--dark.audio-compare .clip.tuned-432 button.clip-play { border-color: var(--accent); }
.scene--dark .note { color: #B9B6AC; max-width: 60ch; margin-top: 22px; }
.scene--dark .note a { color: var(--bg); }

.text-link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.scene--faq { min-height: auto; padding-bottom: 6vh; }
.scene--faq .faq { width: 100%; text-align: left; margin: 0 auto; }

/* Hero pulse: nine slow bars */
.pulse {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
}
.pulse span {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--divider);
  transform-origin: bottom;
  animation: pulse 2.8s ease-in-out infinite;
}
.pulse span:nth-child(5) { background: var(--accent); }
.pulse span:nth-child(2n) { animation-delay: -0.6s; }
.pulse span:nth-child(3n) { animation-delay: -1.3s; }
.pulse span:nth-child(4n) { animation-delay: -2s; }
@keyframes pulse {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

/* Reveal (only when reveal.js is active) */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pulse span { animation: none; transform: scaleY(0.6); }
}

@media (max-width: 860px) {
  .scene--split { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .scene--split .scene-sub { margin-left: auto; }
  .scene--split .picker { margin: 0 auto; text-align: left; }
}

@media (max-width: 620px) {
  .scene { min-height: 64vh; padding: 8vh 0; }
  .scene--hero { min-height: 78svh; }
  .times { font-size: 40px; gap: 0 10px; flex-wrap: nowrap; }
  .times span:not(:last-of-type)::after { margin-left: 10px; }
  .times small { font-size: var(--fs-micro); }
  .moods { gap: 5vh; }
}

.scene--dark .clip .icon-play path,
.scene--dark .clip .icon-pause rect { fill: var(--bg); }
.scene--dark .clip.tuned-432 .icon-play path,
.scene--dark .clip.tuned-432 .icon-pause rect { fill: var(--accent); }

/* ---------- Native scroll-driven motion (Chrome/Edge 115+, Safari 26+) ----------
   One noticeable motion per scene: mood words light up, numerals settle.
   Everything else is quiet polish. Older browsers use reveal.js; reduced
   motion shows the final state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: pt-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    .moods .big {
      animation: pt-light linear both;
      animation-timeline: view();
      animation-range: cover 18% cover 48%;
    }
    .times span {
      animation: pt-settle linear both;
      animation-timeline: view();
    }
    .times span:nth-child(1) { animation-range: entry 10% cover 30%; }
    .times span:nth-child(2) { animation-range: entry 25% cover 36%; }
    .times span:nth-child(3) { animation-range: entry 40% cover 42%; }
    .times span:nth-child(4) { animation-range: entry 55% cover 48%; }
    .times span:nth-child(5) { animation-range: entry 70% cover 54%; color: var(--accent); }
  }
}
@keyframes pt-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pt-light { from { opacity: 0.16; transform: scale(0.965); } to { opacity: 1; transform: none; } }
@keyframes pt-settle { from { opacity: 0; transform: translateY(0.18em); } to { opacity: 1; transform: none; } }
.times { font-variant-numeric: tabular-nums; }

/* ---------- Waveform (drawn from the file's own peaks) on the 440/432 players ---------- */
.audio-compare .clip-wave {
  display: block;
  width: 100%;
  height: 44px;
  pointer-events: none;
}

/* ---------- Paper grain + breathing light (owner kept, 2026-10-08) ---------- */
/* Paper grain removed (fresh look, owner 2026-10-08). */
.scene--dark { position: relative; overflow: hidden; isolation: isolate; }
.scene--dark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.85);
  background: radial-gradient(closest-side, rgba(226, 85, 44, 0.40), rgba(226, 85, 44, 0.14) 45%, transparent 72%);
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .scene--dark::before { animation: pt-breathe 12s ease-in-out infinite; }
}
@keyframes pt-breathe {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.82); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* The last scene on a page leads straight into the footer. */
.scenes > .scene:last-child { min-height: 48vh; padding-bottom: 4vh; }
/* Buttons on dark scenes */
.scene--dark .btn-primary { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.scene--dark .btn-ghost { color: var(--bg); border-color: rgba(244, 240, 226, 0.5); background: transparent; }

/* ---------- Sound hero (signature of the home page) ---------- */
.hero-sound { position: relative; }
.hero-play { gap: 10px; }
.hero-play .hp-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hero-sound.is-playing .hero-play .hp-icon { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.hero-wave { width: min(1100px, 100%); height: clamp(70px, 12vh, 120px); margin: 5vh auto 0; }
.hero-wave canvas { display: block; width: 100%; height: 100%; }
.hero-now { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-text); margin: 14px 0 0; opacity: 0; transition: opacity 0.6s; }
.hero-sound.is-playing .hero-now { opacity: 1; }

/* ---------- Mood colours and waveforms (the brand's visual system) ---------- */
:root { --m-focus: #2F5D8A; --m-reset: #E2552C; --m-calm: #4F7F62; --m-sleep: #3E3A78; }
.moods li:nth-child(2) .big { color: inherit; }
.mood--focus { --m: var(--m-focus); }
.mood--reset { --m: var(--m-reset); }
.mood--calm { --m: var(--m-calm); }
.mood--sleep { --m: var(--m-sleep); }
.mood-wave { display: block; width: min(280px, 70vw); height: 30px; margin: 4px auto 2px; }
.mood-wave rect { fill: var(--m); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .moods li .mood-wave rect { transform: scaleY(0.15); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 12ms); }
  .moods li.in .mood-wave rect,
  .moods li:hover .mood-wave rect { transform: none; }
}
.moods-also { margin: 7vh auto 0; max-width: 38ch; color: var(--muted-text); font-size: var(--fs-body); text-wrap: balance; }