/* Miten se toimii -animaatio (Olli 24.10.2026: "voisko animaatio toimia paikallaan", ei vierityksen
   mukana eikä kolmea vaihetta). Kaksi puhelinta vierekkäin, muistelija (Eila) ja perhe (Aino), ja yksi tarina
   silmukkana viidessä vaiheessa: Aino kysyy ja kysymys ilmestyy Eilan ehdotuksiin, Eila puhuu, muisto tulee
   perheelle äänenä ja tekstinä, perhe vastaa (sydämiä, kommentti, lisäkysymys), ja Eila näkee vastaukset.
   Vuorossa oleva puhelin on edessä ja terävä, toinen sumennettu (Olli). Vieressä vaihtuu lyhyt teksti.
   Puhelinten sisältö mitoitetaan puhelimen leveyden mukaan (container query -yksiköt).
   "Vähennä liikettä": paikallaan oleva kuva (lopputilanne) ja kaikki tekstit allekkain. */

.how { display: grid; gap: var(--space-xl); align-items: center; }
/* Tietokoneella teksti vasemmalla ja puhelimet oikealla (Olli 24.10.2026); puhelimessa puhelimet ensin */
@media (min-width: 900px) {
  /* Kapeampi kokonaisuus ja tekstit lähellä puhelimia (Olli 24.10.2026: "nyt on laidasta laitaan ja keskellä
     iso väli"): kiinteät enimmäisleveydet, sarakkeet keskellä */
  /* Teksti ja puhelimet yhdessä keskellä, tyhjä tila reunoilla (Olli 24.10.2026: "laitoihin tyhjää, tuo väli pois").
     Osion otsikko samassa leveydessä, joten se alkaa samasta kohdasta kuin teksti. */
  .how { grid-template-columns: minmax(0, 360px) minmax(0, 600px); justify-content: center; column-gap: 32px; max-width: 992px; margin-inline: auto; }
  .how-stage { max-width: 600px; justify-self: start; }
  /* Osion otsikko keskellä (Olli 24.10.2026) */
  .how-section .section-head { max-width: 992px; margin-inline: auto; text-align: center; justify-items: center; }
  .how-copy { order: -1; }
}

.how-stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 520; justify-self: center; }
.how-phone {
  position: absolute; top: 0; width: 47%; aspect-ratio: 9 / 15.5; container-type: inline-size;
  border-radius: 12% / 7%; background: var(--c-surface); box-shadow: 0 0 0 6px var(--c-surface), 0 0 0 7px var(--c-border), var(--shadow-card);
  overflow: hidden;
}
/* Perhe vasemmalla ja muistelija oikealla (Olli 24.10.2026): kysymys kulkee lukusuuntaan perheeltä muistelijalle */
.how-phone--family { left: 2%; z-index: 1; }
.how-phone--narrator { right: 2%; top: 7%; z-index: 2; }

/* Vuorossa oleva puhelin edessä ja terävä, toinen pienempi ja sumennettu. Vaihdot kesken vaiheen animaatioina:
   vaihe 1 perhe → muistelija (kysymys saapuu), vaihe 3 muistelija → perhe (muisto saapuu). */
@keyframes how-dim { to { filter: blur(3px); opacity: 0.62; transform: scale(0.95); z-index: 1; } }
@keyframes how-undim { from { filter: blur(3px); opacity: 0.62; transform: scale(0.95); z-index: 1; } to { filter: none; opacity: 1; transform: none; z-index: 3; } }
.how[data-scene="1"] .how-phone--family { z-index: 3; animation: how-dim 700ms ease 3.6s forwards; }
.how[data-scene="1"] .how-phone--narrator { filter: blur(3px); opacity: 0.62; transform: scale(0.95); animation: how-undim 700ms ease 3.6s forwards; }
.how[data-scene="2"] .how-phone--family { filter: blur(3px); opacity: 0.62; transform: scale(0.95); }
.how[data-scene="2"] .how-phone--narrator { z-index: 3; }
.how[data-scene="3"] .how-phone--narrator { z-index: 3; animation: how-dim 700ms ease 2.4s forwards; }
.how[data-scene="3"] .how-phone--family { filter: blur(3px); opacity: 0.62; transform: scale(0.95); animation: how-undim 700ms ease 2.4s forwards; }
.how[data-scene="4"] .how-phone--family { z-index: 3; }
.how[data-scene="4"] .how-phone--narrator { filter: blur(3px); opacity: 0.62; transform: scale(0.95); }
.how[data-scene="5"] .how-phone--narrator { z-index: 3; }
.how[data-scene="5"] .how-phone--family { filter: blur(3px); opacity: 0.62; transform: scale(0.95); }

.how-screen { position: absolute; inset: 0; background: var(--c-bg); font-size: 5.4cqw; line-height: 1.35; color: var(--c-ink); }
.how-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.45em; line-height: 1.15; }
.how-eyebrow { font-size: 0.78em; font-weight: var(--fw-bold); color: var(--c-accent-text); }
.how-card { border-radius: 1.1em; background: var(--c-surface); box-shadow: var(--shadow-card); padding: 0.9em; }
.how-muted { color: var(--c-ink-mid); font-size: 0.85em; }

/* Kerrokset: kunkin vaiheen näkymä, näkyvissä vain omissa vaiheissaan (data-on) */
.how-layer { position: absolute; inset: 11cqw 7cqw 8cqw; display: grid; align-content: start; gap: 0.7em; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms; }
/* Muistelijan näkymissä enemmän tilaa (Olli: "vähän tyhjää tilaa muistelijan ruutuun") */
.how-phone--narrator .how-layer { inset: 14cqw 8cqw 10cqw; gap: 1em; }
.how[data-scene="1"] .how-layer[data-on~="1"], .how[data-scene="2"] .how-layer[data-on~="2"],
.how[data-scene="3"] .how-layer[data-on~="3"], .how[data-scene="4"] .how-layer[data-on~="4"],
.how[data-scene="5"] .how-layer[data-on~="5"] { opacity: 1; visibility: visible; transition-delay: 0s; }

/* --- Perhe, vaihe 1: Aino kirjoittaa kysymyksen --- */
.how-input { border: 1.5px solid var(--c-field-line); border-radius: 0.8em; background: var(--c-surface); padding: 0.7em 0.8em; min-height: 2.9em; }
.how-typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; border-right: 2px solid var(--c-accent); }
.how[data-scene="1"] .how-typed { animation: how-type 1.9s steps(19, end) 0.5s forwards, how-caret 0.8s step-end 0.5s 3; }
.how[data-scene="2"] .how-typed, .how.is-static .how-typed { max-width: 100%; border-right-color: transparent; }
@keyframes how-type { to { max-width: 100%; border-right-color: transparent; } }
@keyframes how-caret { 50% { border-right-color: transparent; } }
.how-send { justify-self: start; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5em 1em; border-radius: 999px; background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: 0.9em; }
.how-sent { display: inline-flex; align-items: center; gap: 0.35em; color: var(--c-success); font-weight: var(--fw-bold); font-size: 0.85em; opacity: 0; }
.how-sent .i, .how-send .i { width: 1.1em; height: 1.1em; }
.how[data-scene="1"] .how-sent { animation: how-in 500ms ease 2.8s forwards; }
.how[data-scene="2"] .how-sent { opacity: 1; }

/* Kysymysehdotukset Kysy Eilalta -ruudun alla (Olli 24.10.2026) */
.how-ideas-h { margin-top: 0.6em; font-weight: var(--fw-bold); }
.how-idea { padding: 0.65em 0.8em; border-radius: 0.9em; background: var(--c-surface); box-shadow: var(--shadow-card); font-weight: var(--fw-bold); font-size: 0.9em; line-height: 1.25; }

/* --- Muistelija, vaihe 1: kysymys ilmestyy ehdotuksiin ja valitaan --- */
.how-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6em; align-items: start; padding: 0.8em; border-radius: 0.9em; background: var(--c-surface); box-shadow: var(--shadow-card); font-weight: var(--fw-bold); font-size: 0.95em; line-height: 1.25; border: 2px solid transparent; }
.how-radio { width: 1.05em; height: 1.05em; margin-top: 0.1em; border-radius: 50%; border: 2px solid var(--c-field-line); }
.how-chip { display: inline-block; margin-bottom: 0.3em; padding: 0.15em 0.6em; border-radius: 999px; background: var(--c-accent-soft); font-size: 0.75em; }
.how-choice--new { opacity: 0; transform: translateY(-0.8em); }
.how[data-scene="1"] .how-choice--new { animation: how-drop 600ms var(--ease-out, ease) 3.9s forwards, how-pick 300ms ease 5.6s forwards; }
.how[data-scene="1"] .how-choice--new .how-radio { animation: how-radio 300ms ease 5.6s forwards; }
@keyframes how-drop { to { opacity: 1; transform: none; } }
@keyframes how-pick { to { border-color: var(--c-accent); } }
@keyframes how-radio { to { border-color: var(--c-accent); background: radial-gradient(circle, var(--c-accent) 0 45%, transparent 50%); } }

/* --- Muistelija, vaihe 2: Puhu ja äänitys, nappi ja ääniaalto alempana (Olli) --- */
.how-q { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.2em; line-height: 1.2; }
.how-puhu { justify-self: center; display: grid; place-items: center; align-content: center; gap: 0.2em; width: 6.4em; height: 6.4em; margin: 0.6em 0 0; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: 1em; box-shadow: 0 0 0 0.5em var(--c-accent-soft), var(--shadow-card); position: relative; }
.how-puhu .i { width: 2.1em; height: 2.1em; }
.how[data-scene="2"] .how-puhu { animation: how-rec 300ms ease 1.3s forwards; }
.how[data-scene="2"] .how-puhu::before { content: ""; position: absolute; inset: -0.5em; border-radius: 50%; border: 0.4em solid var(--c-danger); opacity: 0; animation: how-pulse 1.8s ease-out 1.6s infinite; }
@keyframes how-rec { to { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 0 0 0.45em var(--c-danger), var(--shadow-card); } }
@keyframes how-pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.how-timer { justify-self: center; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--c-ink-mid); font-size: 0.9em; }
.how-live { display: flex; align-items: center; justify-content: center; gap: 0.22em; height: 2.4em; }
/* Muistelijan äänitys (Olli 24.10.2026: "tyhjää tilaa muistelijan ruutuun, nappi ja ääniaalto alemmas"): kysymys
   ylhäällä, ääniaalto, aika ja Puhu-nappi ruudun alaosassa kuten sovelluksessa, jossa päänappi on alareunassa */
.how-phone--narrator .how-layer[data-on="2"], .how-phone--narrator .how-layer[data-on~="3"] { display: flex; flex-direction: column; align-items: stretch; gap: 0.5em; }
.how-rec-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding-bottom: 0.9em; }
/* Ääniaalto ja aika ylempänä, nappi alareunassa (Olli 24.10.2026: "nosta ääniaaltoa, tilaa on") */
.how-rec-bottom .how-timer { margin-bottom: 1.8em; }
/* Tauko-nappi äänityksen aikana kuten sovelluksessa (Olli 24.10.2026) */
.how-pausebtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-width: 7em; margin-top: 0.9em; padding: 0.55em 1.1em; border-radius: 999px; border: 1.5px solid var(--c-field-line); background: var(--c-surface); font-weight: var(--fw-bold); font-size: 0.9em; opacity: 0; }
.how-pausebtn .i { width: 1em; height: 1em; }
.how[data-scene="2"] .how-pausebtn { animation: how-in 400ms ease 1.5s forwards; }
.how-rec-bottom .how-live { height: 3em; }
.how-live i { display: block; width: 0.28em; height: 18%; border-radius: 0.2em; background: var(--c-accent); }
.how[data-scene="2"] .how-live i { animation: how-bar 1000ms ease-in-out 1.5s infinite alternate; }
.how-live i:nth-child(2n) { animation-duration: 800ms !important; }
.how-live i:nth-child(3n) { animation-duration: 1250ms !important; }
.how-live i:nth-child(5n) { animation-delay: 1.8s !important; }
@keyframes how-bar { 0% { height: 15%; } 100% { height: 95%; } }

/* --- Muistelija, vaihe 3: muisto lähti perheelle --- */
.how-done { justify-self: center; display: grid; place-items: center; width: 6.4em; height: 6.4em; margin: 0.6em auto 0.4em; border-radius: 50%; background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface)); color: var(--c-success); box-shadow: 0 0 0 0.5em var(--c-success), var(--shadow-card); transform: scale(0.6); opacity: 0; }
.how-done .i { width: 3em; height: 3em; stroke-width: 2.4; }
.how[data-scene="3"] .how-done { animation: how-pop 600ms var(--ease-out, ease) 0.3s forwards; }
@keyframes how-pop { 70% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
.how-center { text-align: center; }

/* --- Perhe, vaiheet 3–4: ilmoitus, muisto ja vastaukset --- */
.how-notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6em; align-items: center; padding: 0.7em; border-radius: 1em; background: var(--c-surface); box-shadow: var(--shadow-card); font-size: 0.85em; line-height: 1.25; transform: translateY(-140%); opacity: 0; }
.how[data-scene="3"] .how-notif { animation: how-notif 4.2s ease 2.6s forwards; }
/* Ilmoitus on tässä vaiheessa jo näkymätön, joten paikkaa ei leikata (overflow hidden muutti korkeutta heti).
   Ilmoituksen paikka pysyy vaiheen 4 alussa ja painuu kokoon pehmeästi vasta sydänten jälkeen, samalla kun muiston
   teksti tiivistyy, joten kortti nousee kerran eikä kesken sydänten (Olli 24.10.2026: "töksähtää") */
.how-notif-slot { display: grid; grid-template-rows: 1fr; }
.how-notif-slot > .how-notif { min-height: 0; }
.how[data-scene="4"] .how-notif-slot { animation: how-collapse 800ms var(--ease-out, ease) 3s forwards; }
.how[data-scene="5"] .how-notif-slot, .how.is-static .how-notif-slot { grid-template-rows: 0fr; margin-bottom: -0.7em; }
@keyframes how-collapse { to { grid-template-rows: 0fr; margin-bottom: -0.7em; } }
@keyframes how-notif { 0% { transform: translateY(-140%); opacity: 0; } 15% { transform: none; opacity: 1; } 80% { transform: none; opacity: 1; } 100% { transform: translateY(-140%); opacity: 0; } }
.how-av { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: 0.9em; }
.how-av--a { background: var(--c-highlight); color: var(--c-highlight-ink); }
.how-av--m { background: var(--c-accent-soft); color: var(--c-ink); }
.how-story { display: grid; gap: 0.55em; opacity: 0; transform: translateY(0.6em); }
.how[data-scene="3"] .how-story { animation: how-drop 600ms var(--ease-out, ease) 3.4s forwards; }
.how[data-scene="4"] .how-story, .how[data-scene="5"] .how-story { opacity: 1; transform: none; }
.how-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.12em; line-height: 1.2; }
.how-player { display: flex; align-items: center; gap: 0.5em; }
.how-play { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); }
.how-play .i { width: 1em; height: 1em; margin-left: 0.12em; }
.how-wave { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 1.8em; }
.how-wave i { display: block; width: 0.18em; border-radius: 0.2em; background: var(--c-wave); }
.how[data-scene="3"] .how-wave i { animation: how-played 0s linear forwards; animation-delay: calc(4.2s + var(--n) * 110ms); }
.how[data-scene="4"] .how-wave i, .how[data-scene="5"] .how-wave i { background: var(--c-accent); }
@keyframes how-played { to { background: var(--c-accent); } }
.how-text { font-family: var(--t-story-font); font-size: 0.9em; line-height: 1.45; }
.how-text span { opacity: 0; }
.how[data-scene="3"] .how-text span { animation: how-in 600ms ease forwards; animation-delay: calc(4.4s + var(--n) * 650ms); }
.how[data-scene="4"] .how-text span, .how[data-scene="5"] .how-text span { opacity: 1; }
@keyframes how-in { to { opacity: 1; } }
/* Vaiheessa 4 muisto tiivistyy, jotta vastaukset mahtuvat */
.how[data-scene="4"] .how-text { max-height: 7.3em; overflow: hidden; animation: how-shrink 800ms var(--ease-out, ease) 3s forwards; }
@keyframes how-shrink { to { max-height: 2.9em; } }
.how[data-scene="4"] .how-story.is-clamped .how-text, .how[data-scene="5"] .how-text, .how.is-static .how-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.how-foot { display: flex; justify-content: space-between; align-items: center; }
.how-heart { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.8em; border-radius: 999px; border: 1.5px solid var(--c-field-line); font-weight: var(--fw-bold); font-size: 0.9em; color: var(--c-ink-mid); font-variant-numeric: tabular-nums; transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease; }
.how-heart.is-on { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent); }
.how-heart .i { width: 1.15em; height: 1.15em; }
.how[data-scene="5"] .how-heart, .how.is-static .how-heart { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent); }

/* Perheen vastaukset muiston alla: kommentti ja lisäkysymys */
.how-reply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55em; align-items: start; padding: 0.65em 0.75em; border-radius: 1em; background: var(--c-surface); box-shadow: var(--shadow-card); font-size: 0.84em; line-height: 1.3; opacity: 0; transform: translateY(0.6em); }
.how-reply .how-av { width: 2em; height: 2em; font-size: 0.85em; }
.how[data-scene="4"] .how-reply--comment { animation: how-drop 600ms var(--ease-out, ease) 3.9s forwards; }
.how[data-scene="4"] .how-reply--ask { animation: how-drop 600ms var(--ease-out, ease) 5.5s forwards; }
.how[data-scene="5"] .how-reply, .how.is-static .how-reply { opacity: 1; transform: none; }

/* --- Muistelija, vaihe 5: Eila näkee vastaukset --- */
.how-from { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6em; align-items: center; padding: 0.65em 0.75em; border-radius: 1em; background: var(--c-surface); box-shadow: var(--shadow-card); font-size: 0.86em; line-height: 1.25; opacity: 0; transform: translateY(0.8em); }
.how-from .i { width: 1.25em; height: 1.25em; color: var(--c-accent); }
.how-from--ask { grid-template-columns: auto minmax(0, 1fr); border: 2px solid var(--c-accent); }
.how[data-scene="5"] .how-from { animation: how-drop 600ms var(--ease-out, ease) forwards; animation-delay: calc(0.9s + var(--n) * 1.1s); }
.how.is-static .how-from { opacity: 1; transform: none; }

/* --- Teksti ja ohjaus --- */
.how-copy { display: grid; gap: var(--space-sm); align-content: center; }
.how-captions { position: relative; display: grid; list-style: none; padding: 0; margin: 0; }
.how-captions li { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 500ms ease, transform 500ms ease; font-size: var(--t-body-large-size); line-height: var(--t-body-large-line-height); }
.how-captions li b { display: block; font-family: var(--font-display); font-size: clamp(22px, 1vw + 18px, 28px); line-height: 1.2; margin-bottom: 8px; }
.how[data-scene="1"] .how-captions li[data-n="1"], .how[data-scene="2"] .how-captions li[data-n="2"],
.how[data-scene="3"] .how-captions li[data-n="3"], .how[data-scene="4"] .how-captions li[data-n="4"],
.how[data-scene="5"] .how-captions li[data-n="5"] { opacity: 1; transform: none; }
/* Pysäytä/Jatka huomaamattomana viivojen alla (Olli 24.10.2026); kosketusalue silti 44 px */
.how-controls { display: grid; justify-items: start; gap: 0; margin-top: var(--space-xs); }
.how-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 340px; }
.how-progress i { display: block; height: 6px; border-radius: 3px; background: var(--c-border); overflow: hidden; }
.how-progress i::after { content: ""; display: block; height: 100%; width: 0; background: var(--c-accent); }
.how-progress i.is-done::after { width: 100%; }
.how-progress i.is-now::after { animation: how-fill var(--how-ms, 7s) linear forwards; }
@keyframes how-fill { to { width: 100%; } }
.how-pause { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -4px; padding: 0 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-ink-mid); font: inherit; font-size: 15px; cursor: pointer; }
.how-pause:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.how-pause .i { width: 14px; height: 14px; }
.how.is-paused *, .how.is-paused *::before, .how.is-paused *::after { animation-play-state: paused !important; }

/* Paikallaan oleva kuva (vähennä liikettä): lopputilanne, vastaukset annettu ja Eila näkee ne */
.how.is-static .how-story, .how.is-static .how-text span { opacity: 1; transform: none; }
.how.is-static .how-wave i { background: var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
  .how *, .how *::before, .how *::after { animation: none !important; transition: none !important; }
  .how-controls { display: none; }
  .how-captions li { position: static; opacity: 1; transform: none; grid-area: auto; margin-bottom: var(--space-md); }
}

/* Kuvat ruuduissa kuten sovelluksessa (Olli 24.10.2026): muistelijan aloitusnäkymän yläosassa perheen kuva, joka
   häipyy pohjaväriin, ja perheen ruuduissa muistelijan pyöreä kuva */
.how-hero { position: relative; margin: -14cqw -8cqw 0; height: 50cqw; overflow: hidden; }
.how-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.how-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--c-bg) 96%); }
.how-hero .how-h { position: absolute; left: 8cqw; bottom: 1cqw; z-index: 1; }
.how-face { display: inline-block; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; object-fit: cover; object-position: 66% 18%; background: var(--c-accent-soft); }
.how-face--av { width: 2.2em; height: 2.2em; }
.how-h--face { display: flex; align-items: center; gap: 0.45em; }
.how-h--face .how-face { width: 1.6em; height: 1.6em; }
.how-storyhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55em; align-items: center; }