/* Hero: a scripted four-scene loop inside the phone frame. Pure DOM + CSS transitions;
   docs/landing/scenes.js toggles .is-active on a scene and .on on its timed parts. */
.device { justify-self: center; display: grid; gap: .9rem; justify-items: center; width: 100%; max-width: 380px; }
@media (min-width: 900px) { .device { width: 360px; } }
.scene-cap { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); min-height: 1.3em; text-align: center; }
.scene-cap .n { color: var(--chalk); margin-right: .5em; }
.dots { display: flex; gap: .5rem; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); transition: background .3s, width .3s; }
.dots span.on { background: var(--chalk); width: 22px; border-radius: 4px; }
.scene-list { display: none; margin: 0; padding: 0; list-style: none; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; gap: .3rem; }

.phone { width: 100%; background: var(--phone); border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px -30px rgba(10, 20, 40, .55), 0 0 0 2px var(--line); }
.screen { position: relative; aspect-ratio: 390 / 760; border-radius: 28px; overflow: hidden; background: var(--sheet); color: var(--ink); font-size: .9rem; line-height: 1.4; }
@media (max-width: 600px) { .device { max-width: 320px; } .phone { border-radius: 32px; padding: 9px; } .screen { border-radius: 24px; font-size: .84rem; } }

.scene { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; opacity: 0; transition: opacity .45s ease; }
.scene.is-active { opacity: 1; }
.appbar { display: flex; align-items: center; gap: .6rem; padding: 1rem .9rem .7rem; border-bottom: 1px solid var(--line); }
.appbar b { font-size: .98rem; }
.appbar small { display: block; color: var(--muted); font-size: .74rem; font-family: var(--f-mono); letter-spacing: .04em; }
.tile { flex: none; width: 34px; height: 34px; border-radius: 28%; display: grid; place-items: center; }
.tile svg { width: 58%; height: 58%; }
.tile.house { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--sheet)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 45%, transparent); }
.tile.hat { color: var(--tag-ink); background: var(--tag); }
.tile.office { color: var(--paper); background: var(--ink); }
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }

.chat { display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; padding: .9rem; min-height: 0; overflow: hidden; }
.chat > * { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.chat > .on { opacity: 1; transform: none; }
.chat > .gone { display: none; }
.b { max-width: 86%; padding: .55rem .75rem; border-radius: 14px; overflow-wrap: anywhere; }
.b.me { align-self: flex-end; background: var(--chalk); color: #fff; border-bottom-right-radius: 4px; }
:root[data-theme="dark"] .b.me { color: #07101e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b.me { color: #07101e; } }
.b.bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.meta { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted); display: flex; align-items: center; gap: .35rem; margin-top: .35rem; text-transform: uppercase; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: .7rem .8rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: tdot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.orb-wrap { align-self: center; display: grid; justify-items: center; gap: .4rem; padding: .4rem 0; }
.orb { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2 0%, #f5c400 38%, #b88a00 75%, #5a4300 100%); box-shadow: 0 0 26px rgba(245, 196, 0, .45); animation: orb 1.1s ease-in-out infinite; }
@keyframes orb { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.06); } }
.orb-wrap .meta { margin: 0; }

.card { align-self: stretch; border: 1.5px solid var(--ink); border-radius: 14px; padding: .75rem; background: var(--sheet); display: grid; gap: .45rem; }
.card .head { display: flex; gap: .55rem; align-items: center; }
.card .head b { display: block; font-size: .95rem; }
.card .head small { color: var(--muted); font-size: .76rem; }
.card p { font-size: .84rem; }
.pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.pills span { font-family: var(--f-mono); font-size: .66rem; font-weight: 700; letter-spacing: .03em; padding: .2rem .45rem; border-radius: 999px; background: var(--chalk-soft); color: var(--ink); }
.pills span.no { background: color-mix(in srgb, var(--muted) 18%, var(--sheet)); }
.card .meta { margin: 0; }
.tapbtn { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: .4rem; min-height: 40px; border-radius: 9px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: .86rem; }
.tapbtn.danger { background: #b3261e; color: #fff; }
.tapbtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); opacity: 0; }
.card.tapped .tapbtn::after { animation: ripple .6s ease-out; }
.card.tapped .tapbtn { filter: brightness(.88); }
@keyframes ripple { 0% { transform: scale(0); opacity: .9; } 100% { transform: scale(14); opacity: 0; } }
.done { align-self: flex-start; display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ok); }
.done .ico { width: 1.2em; height: 1.2em; }
.lockline { display: inline-flex; align-items: center; gap: .3rem; }

.ended { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--sheet); opacity: 0; transition: opacity .5s ease; }
.ended .body { display: grid; place-content: center; justify-items: center; gap: .7rem; text-align: center; padding: 1.5rem; }
.ended.on { opacity: 1; }
.ended .pw { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: var(--muted); }
.ended .pw svg { width: 30px; height: 30px; }
.ended .body b { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; text-transform: uppercase; line-height: 1; }
.ended .meta { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .scene, .chat > *, .ended { transition: none; }
  .orb, .typing i { animation: none; }
  .scene-cap, .dots { display: none; }
  .scene-list { display: grid; }
}