/* Product stages: full-bleed sections dressed in each product's own brand (fonts, colours, art).
   Markup: worker/stages.js. Motion: js/stages.js. Everything reads fine with motion off. */

.stage { position: relative; isolation: isolate; overflow: hidden; }
.stage.rqs, .stage.lvs { width: min(1320px, calc(100% - 32px)); margin: 28px auto; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .85); }
@media (max-width: 560px) { .stage.rqs, .stage.lvs { width: calc(100% - 20px); border-radius: 22px; margin: 18px auto; } }
.stage *, .stage *::before, .stage *::after { box-sizing: border-box; }

/* =============== Relic Quest: the Grand Hunt =============== */

.rqs {
  --rqs-bg: #07070c; --gold: #d4a73a; --gold-hi: #ffe08a; --ink: #ece1c4; --ink-dim: #b8ab8c; --violet: #c9a2ff;
  --line: rgba(212, 167, 58, .28); --line-hi: rgba(212, 167, 58, .7);
  --display: "Cinzel", "Palatino Linotype", Georgia, serif; --decor: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --body: "EB Garamond", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  background: var(--rqs-bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5;
  padding: 40px 0; margin: 16px 0;
}
.rqs-sky { position: absolute; inset: 0; z-index: -3; background: #07070c url(/brands/relic-quest/tall-poster.jpg) 50% 0 / cover no-repeat; }
.rqs-sky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: .9; transform: translate3d(0, var(--par, 0px), 0) scale(1.15); }
.rqs-fade { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 50% 30%, transparent 0, rgba(7, 7, 12, .3) 55%, rgba(7, 7, 12, .8) 100%); }

/* flowing mist: three soft banks drifting at different speeds */
.rqs-mist { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.rqs-mist i { position: absolute; left: -50%; width: 200%; filter: blur(28px); mix-blend-mode: screen; opacity: .8; will-change: transform; }
.rqs-mist .m1 { bottom: -8%; height: 45%; background:
  radial-gradient(40% 50% at 15% 60%, rgba(190, 185, 225, .16), transparent 70%),
  radial-gradient(35% 45% at 45% 70%, rgba(170, 160, 210, .14), transparent 70%),
  radial-gradient(40% 50% at 75% 55%, rgba(200, 190, 230, .16), transparent 70%),
  radial-gradient(30% 40% at 95% 70%, rgba(170, 160, 210, .12), transparent 70%);
  animation: rqs-drift 46s ease-in-out infinite alternate; }
.rqs-mist .m2 { top: 30%; height: 40%; background:
  radial-gradient(30% 45% at 20% 50%, rgba(201, 162, 255, .10), transparent 70%),
  radial-gradient(35% 40% at 60% 40%, rgba(150, 140, 220, .09), transparent 70%),
  radial-gradient(25% 40% at 88% 55%, rgba(201, 162, 255, .08), transparent 70%);
  animation: rqs-drift 64s ease-in-out infinite alternate-reverse; }
.rqs-mist .m3 { top: -6%; height: 35%; background:
  radial-gradient(30% 40% at 30% 50%, rgba(255, 210, 140, .07), transparent 70%),
  radial-gradient(30% 40% at 80% 40%, rgba(255, 190, 120, .06), transparent 70%);
  animation: rqs-drift 80s ease-in-out infinite alternate; }
@keyframes rqs-drift { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(12%, -3%, 0); } }

.rqs-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
.rqs-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }

/* left: the animated logo, the pitch, the way in */
.rqs-brand { display: flex; align-items: center; gap: 22px; }
.rqs-brand > div { flex: 1; min-width: 0; }
.rqs-left, .rqs-right { min-width: 0; }
.rqs-medallion { position: relative; flex: none; width: 128px; aspect-ratio: 1; animation: rqs-float 7s ease-in-out infinite; }
.rqs-medallion > img { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; animation: rqs-breathe 5s ease-in-out infinite; }
.rqs-medallion .ring { position: absolute; border-radius: 50%; z-index: 1; }
.rqs-medallion .a { inset: -9%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 140, 60, .55) 28%, transparent 36% 62%, rgba(110, 170, 255, .55) 70%, transparent 78%); filter: blur(10px); animation: rqs-spin 14s linear infinite; }
.rqs-medallion .b { inset: -4%; border: 1px dashed rgba(255, 220, 140, .3); animation: rqs-spin 60s linear infinite reverse; }
.rqs-magic { position: absolute; inset: -45%; width: 190%; height: 190%; z-index: 3; pointer-events: none; overflow: visible; }
.rqs-magic .ribbon { stroke-dasharray: 26 74; animation: rqs-flow 7s linear infinite; }
.rqs-magic .r2 { stroke-dasharray: 18 82; animation-duration: 9s; animation-direction: reverse; }
.rqs-magic .r3 { stroke-dasharray: 12 88; animation-duration: 5.5s; opacity: .7; }
@keyframes rqs-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rqs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rqs-breathe { 0%, 100% { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .8)); } 50% { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 24px rgba(255, 190, 90, .4)); } }
@keyframes rqs-spin { to { transform: rotate(360deg); } }

.rqs-word { position: relative; width: min(300px, 100%); margin: 0; overflow: hidden;
  -webkit-mask: url(/brands/relic-quest/wordmark.webp) center / 100% 100% no-repeat; mask: url(/brands/relic-quest/wordmark.webp) center / 100% 100% no-repeat; }
.rqs-word img { display: block; width: 100%; height: auto; }
.rqs-word .shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 245, 210, .8) 48%, transparent 60%); transform: translateX(-110%); animation: rqs-sheen 6s 1.2s infinite; mix-blend-mode: overlay; }
@keyframes rqs-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.rqs-tag { font-family: var(--display); font-size: .92rem; letter-spacing: .12em; margin: 4px 0 0; color: var(--ink); }
.rqs-tag em { font-style: normal; color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 210, 120, .6); }
.rqs-sub { margin: 18px 0 0; color: #ddd1b3; }
.rqs-facts { list-style: none; display: flex; gap: 28px; padding: 0; margin: 18px 0 0; }
.rqs-facts li { display: flex; flex-direction: column; }
.rqs-facts b { font-family: var(--decor); font-size: 1.6rem; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 20px rgba(255, 200, 100, .35); font-variant-numeric: tabular-nums; }
.rqs-facts span { font-family: var(--display); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #8a8a96; margin-top: 4px; }
.rqs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rqs-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.rqs-btn.gold { color: #1b1305; background: linear-gradient(180deg, #ffe7a3, #d4a73a 55%, #b8862a); box-shadow: 0 10px 30px rgba(212, 167, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rqs-btn.gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: rqs-sheen 4.5s 1s infinite; }
.rqs-btn.ghost { color: var(--ink); border: 1px solid var(--line-hi); background: rgba(7, 7, 12, .45); }
.rqs-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(212, 167, 58, .45); }
.rqs-btn .ver { font-family: var(--body); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .75; }
.rqs-plat { margin: 12px 0 0; font-size: .9rem; color: var(--ink-dim); }
.rqs-plat a { color: var(--gold-hi); }

/* right: one panel, three tabs, a fixed height so nothing jumps */
.rqs-right { border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 17, 30, .62), rgba(9, 8, 14, .72)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); padding: 8px 18px 18px; }
.rqs-tabs { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--line); }
.rqs-tabs button { position: relative; padding: 12px 16px; border: 0; background: none; cursor: pointer; font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); transition: color .3s; }
.rqs-tabs button::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); transform: scaleX(0); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.rqs-tabs [aria-selected="true"] { color: var(--gold-hi); }
.rqs-tabs [aria-selected="true"]::after { transform: scaleX(1); }
.rqs-panel { height: 316px; padding-top: 12px; }
.rqs-panel:not([hidden]) { animation: rqs-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes rqs-in { from { opacity: 0; transform: translateY(8px); } }

/* the hand: one relic from each Hoard, fanned */
.rqs-hand { display: flex; justify-content: center; align-items: flex-end; height: 200px; padding-top: 22px; }
.rqs-card { --rot: calc((var(--i) - 3) * 7deg); --lift: calc(var(--d, 0) * 1px); position: relative; flex: none; width: 96px; aspect-ratio: 4 / 7; margin: 0 -7px; padding: 0; border: 1px solid rgba(212, 167, 58, .55); border-radius: 10px; overflow: hidden; cursor: pointer; background: #0b0b10;
  transform-origin: 50% 120%; transform: rotate(var(--rot)) translateY(var(--lift)); box-shadow: 0 16px 34px rgba(0, 0, 0, .7); transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s; z-index: calc(10 - var(--z, 0)); }
.rqs-card:nth-child(1), .rqs-card:nth-child(7) { --d: 18; --z: 3; } .rqs-card:nth-child(2), .rqs-card:nth-child(6) { --d: 8; --z: 2; } .rqs-card:nth-child(3), .rqs-card:nth-child(5) { --d: 2; --z: 1; }
.rqs-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rqs-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, .25) 45%, transparent 60%); transform: translateX(-100%); transition: transform .9s; mix-blend-mode: overlay; }
.rqs-card:hover, .rqs-card.on { transform: rotate(0deg) translateY(-22px) scale(1.12); z-index: 20; border-color: var(--gold-hi); box-shadow: 0 24px 50px rgba(0, 0, 0, .8), 0 0 30px rgba(255, 200, 100, .4); }
.rqs-card:hover::after, .rqs-card.on::after { transform: translateX(100%); }
.rqs-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.rqs-type { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #2a2a33, #0c0c10); border: 1px solid rgba(212, 167, 58, .75); }
.rqs-type img { width: 70%; }
.rqs-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34% 4px 7px; font-family: var(--display); font-weight: 700; font-size: .56rem; line-height: 1.15; color: #fff3d6; text-align: center; background: linear-gradient(180deg, transparent, rgba(5, 5, 9, .92) 70%); text-shadow: 0 1px 6px #000; }

.rqs-power { display: flex; gap: 14px; align-items: center; margin: 22px 8px 0; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-hi); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 200, 100, .12), rgba(12, 10, 18, .8) 60%); }
.rqs-power-ic { width: 44px; height: 44px; padding: 8px; border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 30%, #2a2a33, #0c0c10); border: 1px solid var(--gold); }
.rqs-power p { margin: 0; }
.rqs-power-top { font-family: var(--display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.rqs-power-top b { color: var(--gold); }
.rqs-power-name { font-family: var(--decor); font-size: 1.2rem; color: var(--gold-hi); text-shadow: 0 0 18px rgba(255, 210, 120, .45); line-height: 1.2; margin-top: 2px !important; }
.rqs-power-text { color: #e2d6ba; font-size: .95rem; }
.rqs-power.swap > div { animation: rqs-in .5s cubic-bezier(.2, .8, .2, 1); }

/* rules */
.rqs-rules { list-style: none; padding: 6px 8px 0; margin: 0; display: grid; gap: 16px; }
.rqs-rules li { display: flex; gap: 16px; align-items: flex-start; }
.rqs-num { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; font-family: var(--decor); font-size: .95rem; color: #1b1305; background: radial-gradient(circle at 40% 30%, #ffe7a3, #c9952b); box-shadow: 0 0 20px rgba(255, 200, 90, .4); }
.rqs-rules h4 { margin: 0; font-family: var(--display); font-size: 1.08rem; letter-spacing: .04em; color: #fff3d6; }
.rqs-rules p { margin: 4px 0 0; color: #d4c8aa; font-size: .98rem; line-height: 1.45; }

/* patrons */
.rqs-patrons { list-style: none; padding: 4px 4px 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.rqs-patrons li { display: flex; gap: 12px; align-items: center; }
.rqs-portrait { flex: none; width: 58px; aspect-ratio: 3 / 4; border-radius: 999px 999px 10px 10px; overflow: hidden; border: 1px solid var(--line-hi); box-shadow: 0 0 0 3px rgba(7, 7, 12, .7), 0 0 0 4px rgba(212, 167, 58, .25); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.rqs-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rqs-patrons li:hover .rqs-portrait { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(7, 7, 12, .7), 0 0 0 4px var(--gold-hi), 0 0 24px rgba(255, 200, 100, .35); }
.rqs-patrons b { font-family: var(--display); font-size: .88rem; color: #fff3d6; letter-spacing: .03em; }
.rqs-patrons em { font-size: .85rem; color: var(--ink-dim); }
.rqs-patrons p { margin: 2px 0 0; font-size: .82rem; line-height: 1.35; color: #c9bd9f; }
.rqs-patrons strong { color: var(--gold-hi); font-family: var(--display); font-size: .74rem; letter-spacing: .04em; }

@media (max-width: 960px) {
  .rqs-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .rqs { padding: 44px 0; font-size: 16px; }
  .rqs-medallion { width: 84px; }
  .rqs-brand { gap: 14px; }
  .rqs-facts { gap: 18px; }
  .rqs-right { padding: 6px 10px 14px; }
  .rqs-tabs button { padding: 11px 8px; letter-spacing: .1em; font-size: .66rem; }
  .rqs-panel { height: auto; min-height: 290px; }
  .rqs-hand { height: 160px; }
  .rqs-card { width: 62px; margin: 0 -6px; }
  .rqs-cap { font-size: .44rem; }
  .rqs-type { width: 18px; height: 18px; }
  .rqs-patrons { grid-template-columns: 1fr; gap: 10px; }
}

/* =============== Levitate: a day on a clock =============== */

.lvs {
  --paper: #F6F1E8; --card: #FFFCF7; --ink: #211C18; --ink-66: rgba(33, 28, 24, .66); --accent: #E0691C; --accent-ink: #A8410F; --teal: #0E7C6B;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Anek Latin", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --cream: #F3ECE2; --cream-2: rgba(243, 236, 226, .72); --cream-3: rgba(243, 236, 226, .48); --ember: #F0A238;
  background: radial-gradient(70% 110% at 12% 0%, rgba(240, 162, 56, .17), transparent 62%), radial-gradient(60% 90% at 95% 100%, rgba(224, 105, 28, .13), transparent 60%), #120d0b;
  color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.55; padding: 40px 0; margin: 16px 0;
}
.lvs-sky { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -2; opacity: .14; }
.lvs-sky > div { position: absolute; inset: 0; transition: opacity 1.4s ease; -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); }
.lvs-sky-a { background: linear-gradient(178deg, #A99BC4 0%, #D8BFB3 45%, #F6F1E8 100%); }
.lvs-sky-b { opacity: 0; }
.lvs-arc { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 220px; z-index: -1; pointer-events: none; }
.lvs-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 44px; align-items: center; }

.lvs-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 12px/1 var(--mono); letter-spacing: .3em; }
.lvs-brand img { width: 28px; height: 28px; border-radius: 8px; }
.lvs-k { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.lvs-h { margin: 14px 0 0; font: 400 clamp(38px, 4.2vw, 54px)/1 var(--serif); letter-spacing: -.015em; }
.lvs-h em { display: block; font-style: italic; }
.lvs-lead { margin: 16px 0 0; max-width: 420px; font-size: 16px; color: var(--cream-2); }

.lvs-day { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.lvs-day button { position: relative; width: 100%; display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: baseline; padding: 8px 14px; border: 1px solid transparent; border-radius: 16px; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; overflow: hidden; transition: background .4s, border-color .4s, box-shadow .4s; }
.lvs-day button:hover { background: rgba(255, 255, 255, .04); }
.lvs-t { font: 500 11px/1.6 var(--mono); letter-spacing: .08em; color: var(--cream-3); transition: color .4s; }
.lvs-what b { display: block; font: 400 18px/1.2 var(--serif); color: var(--cream-3); transition: color .4s; }
.lvs-what span { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--cream-2); transition: max-height .5s ease, opacity .4s, margin .4s; }
.lvs-day [aria-current="true"] { background: rgba(255, 246, 235, .07); border-color: rgba(255, 236, 214, .14); box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lvs-day [aria-current="true"] .lvs-t { color: var(--ember); }
.lvs-day [aria-current="true"] .lvs-what b { color: #FFF8EF; }
.lvs-day [aria-current="true"] .lvs-what span { max-height: 80px; opacity: 1; margin-top: 4px; }
.lvs-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 99px; background: rgba(255, 255, 255, .08); opacity: 0; }
.lvs-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #E0A03A, #E0691C); }
[aria-current="true"] .lvs-bar { opacity: 1; }
[aria-current="true"] .lvs-bar i { animation: lvs-bar var(--dur, 4200ms) linear both; animation-play-state: var(--play, running); }
@keyframes lvs-bar { to { width: 100%; } }

.lvs-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lvs-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 16px; font: 500 15px/1 var(--sans); color: #FFF8EF; text-decoration: none; background: linear-gradient(120deg, #B84A15, #8F3A11); box-shadow: 0 18px 36px -16px rgba(168, 65, 15, .8); transition: transform .3s, box-shadow .3s; }
.lvs-btn:hover { color: #FFF8EF; transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(168, 65, 15, .9); }
.lvs-btn.ghost { color: var(--cream); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 236, 214, .16); box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lvs-btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* the phone, as the app really looks */
.lvs-stagephone { position: relative; display: flex; justify-content: center; padding: 10px 0; }
.lvs-stagephone .lvs-phone { transform: scale(.72); transform-origin: 50% 0; margin: 0 -42px -168px; }
.lvs-phone { position: relative; width: 300px; height: 600px; flex: none; border-radius: 40px; color: var(--ink); background: var(--paper); overflow: hidden; box-shadow: 0 50px 100px -30px rgba(33, 28, 24, .6), 0 0 0 9px #1B1714, 0 0 0 10px rgba(255, 255, 255, .12); transition: background .6s; }
.lvs-phone.dark { background: #16110E; }
.lvs-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.lvs-scrim { position: absolute; left: 0; right: 0; top: 0; height: 250px; background: linear-gradient(180deg, rgba(22, 17, 14, .85), rgba(22, 17, 14, .45) 60%, rgba(22, 17, 14, 0)); opacity: 0; transition: opacity .6s; }
.lvs-phone.practice .lvs-frame { opacity: 1; animation: lvs-kenburns 7s ease-out both; }
.lvs-phone.practice .lvs-scrim { opacity: 1; }
@keyframes lvs-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.lvs-psky { position: absolute; inset: 0 0 auto 0; height: 230px; transition: background 1.2s ease, opacity .6s; }
.lvs-phone.dark .lvs-psky, .lvs-phone.dark .lvs-sun, .lvs-phone.dark .lvs-ring { opacity: 0; }
.lvs-sun { position: absolute; width: 180px; height: 110px; border-radius: 50%; filter: blur(22px); background: radial-gradient(circle, rgba(255, 240, 208, .95) 0%, rgba(245, 185, 105, .5) 48%, rgba(245, 185, 105, 0) 72%); transform: translate(-50%, -50%); transition: left 1.2s ease, top 1.2s ease, opacity .8s; pointer-events: none; }
.lvs-moon { position: absolute; right: 92px; top: 66px; width: 26px; height: 26px; border-radius: 50%; background: #FFF6E0; box-shadow: 0 0 26px 6px rgba(255, 246, 224, .45), inset -8px -5px 0 0 rgba(169, 155, 196, .9); opacity: 0; transition: opacity .8s; }
.lvs-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(33, 28, 24, .07); animation: lvs-driftc 11s ease-in-out infinite; transition: opacity .6s; }
.lvs-ring.r1 { width: 180px; height: 180px; left: -50px; top: 150px; }
.lvs-ring.r2 { width: 220px; height: 220px; right: -70px; top: -60px; animation-duration: 14s; }
@keyframes lvs-driftc { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
.lvs-status { position: relative; display: flex; justify-content: space-between; padding: 40px 22px 0; font: 500 11px/1 var(--mono); color: rgba(33, 28, 24, .7); transition: color .6s; }
.lvs-status span:last-child { font-size: 9px; letter-spacing: .18em; }
.lvs-phone.dark .lvs-status { color: rgba(246, 241, 232, .6); }
.lvs-scene { position: relative; padding: 0 22px; }
.lvs-scene.go { animation: lvs-scene .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes lvs-scene { from { opacity: 0; transform: translateY(12px); } }
.lvs-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(246, 241, 232, .14); z-index: 2; opacity: 0; }
.lvs-progress span { display: block; height: 100%; width: 36%; background: linear-gradient(90deg, #F0A238, #E0691C); }
.lvs-phone.practice .lvs-progress { opacity: 1; }
.lvs-phone.practice .lvs-progress span { animation: lvs-prog 4s linear both; }
@keyframes lvs-prog { from { width: 36%; } to { width: 42%; } }
.lvs-dock { position: absolute; left: 16px; right: 16px; bottom: 18px; height: 52px; border-radius: 26px; background: rgba(28, 23, 20, .92); display: flex; align-items: center; padding: 0 70px 0 6px; transition: opacity .5s, transform .5s; }
.lvs-phone.dark .lvs-dock { opacity: 0; transform: translateY(20px); }
.lvs-dock > span { flex: 1; text-align: center; font: 500 8.5px/1 var(--mono); letter-spacing: .14em; color: rgba(246, 241, 232, .5); }
.lvs-dock > span.on { color: #F6F1E8; }
.lvs-orb { position: absolute; right: 6px; top: -12px; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(140deg, #C9531B, #8F3A11); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #FFF8EF; animation: lvs-pulse 2.6s ease-out infinite; }
.lvs-orb small { font: 500 7.5px/1 var(--mono); letter-spacing: .14em; }
.lvs-orb b { font: 500 11px/1 var(--sans); }
@keyframes lvs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 106, 34, .38); } 70% { box-shadow: 0 0 0 18px rgba(224, 106, 34, 0); } }

/* scene pieces (ported from the app) */
.lvs-mono { font: 500 9px/1 var(--mono); letter-spacing: .2em; color: rgba(33, 28, 24, .68); margin: 0; }
.lvs-kick { font: 500 8.5px/1 var(--mono); letter-spacing: .2em; color: var(--accent-ink); }
.lvs-sh { margin: 6px 0 0; font: 400 32px/1.02 var(--serif); }
.lvs-card { margin-top: 20px; border-radius: 20px; background: var(--card); border: 1px solid rgba(33, 28, 24, .07); box-shadow: 0 22px 44px -26px rgba(33, 28, 24, .4); overflow: hidden; animation: lvs-rise .6s .3s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-card::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #E0A03A, #E0691C, #C9531B); }
.lvs-card-in { padding: 16px 18px 18px; }
.lvs-card-top { display: flex; justify-content: space-between; align-items: center; }
.lvs-card-top time { font: 500 9px/1 var(--mono); color: rgba(33, 28, 24, .68); }
.lvs-card h5 { margin: 9px 0 0; font: 400 24px/1.08 var(--serif); }
.lvs-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-66); }
.lvs-counts { font: 500 8.5px/1 var(--mono) !important; letter-spacing: .14em; color: var(--teal) !important; margin-top: 10px !important; }
.lvs-cta { margin-top: 14px; height: 44px; border-radius: 14px; background: linear-gradient(120deg, #B84A15, #8F3A11); color: #FFF8EF; display: flex; align-items: center; justify-content: center; font: 500 12.5px/1 var(--sans); transition: transform .15s, filter .3s; }
.lvs-cta.pressed { transform: scale(.96); filter: brightness(1.15); }
.lvs-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(33, 28, 24, .06); animation: lvs-rise .5s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-row .tm { font: 500 8.5px/1 var(--mono); letter-spacing: .14em; color: rgba(33, 28, 24, .68); min-width: 46px; }
.lvs-row .nm { flex: 1; font-size: 13.5px; line-height: 1.2; }
.lvs-row.done { opacity: .7; } .lvs-row.done .nm { text-decoration: line-through; }
.lvs-row .st { font: 500 8px/1 var(--mono); letter-spacing: .14em; color: rgba(33, 28, 24, .6); }
.lvs-row.done .st { color: var(--teal); }
.lvs-notif { position: relative; display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(24, 19, 16, .94); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); animation: lvs-drop .7s .1s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-notif-ic { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, #F0A238, #C9531B); flex: none; display: grid; place-items: center; }
.lvs-notif-ic span { width: 10px; height: 10px; border-radius: 50%; background: #FFF8EF; animation: lvs-breathe 1.2s ease-in-out infinite; }
.lvs-notif-top { display: flex; justify-content: space-between; font: 500 9px/1 var(--mono); color: rgba(246, 241, 232, .55); letter-spacing: .12em; }
.lvs-notif b { display: block; margin-top: 5px; font: 500 13.5px/1.2 var(--sans); color: #FFF8EF; }
.lvs-notif p { margin: 3px 0 0; font-size: 12px; line-height: 1.35; color: rgba(246, 241, 232, .7); }
.lvs-wave { position: absolute; right: 14px; top: -8px; display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.lvs-wave i { width: 3px; height: 6px; border-radius: 2px; background: #F0A238; animation: lvs-wave .9s ease-in-out infinite; }
.lvs-wave i:nth-child(2) { animation-delay: .15s; } .lvs-wave i:nth-child(3) { animation-delay: .3s; }
@keyframes lvs-wave { 0%, 100% { height: 5px; opacity: .6; } 50% { height: 14px; opacity: 1; } }
.lvs-cue { position: relative; margin-top: 18px; color: #F6F1E8; animation: lvs-rise .6s .2s both; }
.lvs-cue .lvs-kick { color: #F0B04A; }
.lvs-cue h5 { margin: 7px 0 0; font: 400 23px/1.1 var(--serif); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.lvs-cue p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(246, 241, 232, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.lvs-next { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 99px; background: rgba(22, 17, 14, .55); border: 1px solid rgba(246, 241, 232, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(246, 241, 232, .92); font-size: 11.5px; line-height: 1; animation: lvs-rise .5s 1.8s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-next .lvs-kick { color: #F0B04A; font-size: 8px; }
.lvs-next i { width: 6px; height: 6px; border-radius: 50%; background: #F0A238; animation: lvs-breathe 2s ease-in-out infinite; }
.lvs-nudge { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(24, 19, 16, .95); box-shadow: 0 20px 40px -18px rgba(33, 28, 24, .7); animation: lvs-rise .5s .25s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-nudge .lvs-kick { color: #7FD4C5; }
.lvs-nudge h5 { margin: 8px 0 0; font: 400 19px/1.2 var(--serif); color: #F6F1E8; }
.lvs-glasses { margin-top: 12px; display: flex; gap: 6px; }
.lvs-glass { width: 20px; height: 27px; border-radius: 5px 5px 9px 9px; border: 1.5px solid rgba(47, 168, 148, .55); background: linear-gradient(180deg, transparent 100%, rgba(47, 168, 148, .55) 100%); transition: background .5s; }
.lvs-glass.full { background: linear-gradient(180deg, transparent 12%, rgba(47, 168, 148, .55) 12%); animation: lvs-pour .5s ease both; }
@keyframes lvs-pour { from { opacity: .3; transform: translateY(4px); } }
.lvs-nudge-btns { margin-top: 12px; display: flex; gap: 8px; }
.lvs-nudge-btns span { flex: 1; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--sans); transition: transform .15s, filter .3s; }
.lvs-nudge-btns .yes { background: #0B6A5B; color: #F2FBF8; }
.lvs-nudge-btns .yes.pressed { transform: scale(.95); filter: brightness(1.25); }
.lvs-nudge-btns .no { border: 1px solid rgba(246, 241, 232, .28); color: rgba(246, 241, 232, .8); }
.lvs-stamp { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: rgba(14, 124, 107, .1); color: var(--teal); font: 500 9px/1 var(--mono); letter-spacing: .14em; animation: lvs-stamp .45s 1.9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lvs-stamp { from { opacity: 0; transform: scale(.6) rotate(-6deg); } }
.lvs-prep { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(224, 106, 34, .07); border: 1px solid rgba(224, 106, 34, .2); animation: lvs-rise .5s .45s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-prep > i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--accent); flex: none; animation: lvs-breathe 2s ease-in-out infinite; }
.lvs-prep b { font: 500 12.5px/1.3 var(--sans); } .lvs-prep small { font: 500 7.5px/1 var(--mono); letter-spacing: .14em; color: rgba(33, 28, 24, .5); }
.lvs-prep p { margin: 3px 0 0 !important; font-size: 11.5px !important; color: rgba(33, 28, 24, .7) !important; }
.lvs-seal { position: relative; text-align: center; color: #F6F1E8; padding-top: 70px; }
.lvs-seal .lvs-kick { color: #E0A03A; letter-spacing: .26em; }
.lvs-seal-ring { position: absolute; left: 50%; top: 150px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.lvs-seal-ring.a { width: 230px; height: 230px; border: 1px solid rgba(240, 162, 56, .3); animation: lvs-spinc 26s linear infinite; }
.lvs-seal-ring.b { width: 160px; height: 160px; border: 1px dashed rgba(240, 162, 56, .25); animation: lvs-spinc 18s linear infinite reverse; }
@keyframes lvs-spinc { to { transform: translate(-50%, -50%) rotate(360deg); } }
.lvs-streak { margin: 12px 0 0; font: 400 72px/1 var(--serif); font-variant-numeric: tabular-nums; animation: lvs-pop .7s .2s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lvs-pop { from { opacity: 0; transform: scale(.5); } }
.lvs-hi { margin: 4px 0 0; font: 400 14px/1 "Anek Devanagari", var(--sans); color: rgba(246, 241, 232, .7); }
.lvs-ladder { margin: 26px 10px 0; text-align: left; }
.lvs-rung { display: flex; align-items: center; gap: 10px; padding: 7px 0; animation: lvs-rise .5s cubic-bezier(.2, .9, .3, 1) both; }
.lvs-rung:nth-child(1) { animation-delay: .9s; } .lvs-rung:nth-child(2) { animation-delay: .7s; } .lvs-rung:nth-child(3) { animation-delay: .5s; }
.lvs-rung i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed rgba(246, 241, 232, .3); flex: none; }
.lvs-rung.past i { background: linear-gradient(140deg, #2FA894, #0B6A5B); border: 0; }
.lvs-rung.now i { background: linear-gradient(140deg, #F0A238, #C9531B); border: 0; box-shadow: 0 0 0 4px rgba(224, 106, 34, .25); }
.lvs-rung span { flex: 1; font: 500 13px/1 var(--sans); }
.lvs-rung.ahead span { color: rgba(246, 241, 232, .5); font-weight: 400; }
.lvs-rung em { font: 500 8.5px/1 var(--mono); letter-spacing: .1em; font-style: normal; color: rgba(246, 241, 232, .5); text-transform: uppercase; }
.lvs-rung.now em { color: #F0A238; }
@keyframes lvs-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lvs-drop { from { opacity: 0; transform: translateY(-28px) scale(.96); } }
@keyframes lvs-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: .9; } }

/* the finger that uses the app */
.lvs-tap { position: absolute; left: 0; top: 0; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.lvs-tap.show { opacity: 1; }
.lvs-tap.press { animation: lvs-press .45s ease; }
.lvs-tap.press::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); animation: lvs-ripple .6s ease-out; }
@keyframes lvs-press { 50% { scale: .8; } }
@keyframes lvs-ripple { to { inset: -22px; opacity: 0; } }


@media (max-width: 1080px) {
  .lvs-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone" "day phone"; row-gap: 22px; }
  .lvs-copy { grid-area: copy; } .lvs-stagephone { grid-area: phone; } .lvs-day { grid-area: day; }
}
@media (max-width: 700px) {
  .lvs { padding: 44px 0; }
  .lvs-in { grid-template-columns: 1fr; grid-template-areas: "copy" "phone" "day"; gap: 18px; }
  .lvs-stagephone .lvs-phone { transform: scale(.7); margin: 0 -45px -180px; }
  /* the day becomes a strip of times you can swipe through */
  .lvs-day { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .lvs-day li { flex: none; scroll-snap-align: start; }
  .lvs-day button { display: block; width: auto; padding: 8px 12px; border-color: rgba(255, 236, 214, .14); }
  .lvs-what { display: none; }
  .lvs-day [aria-current="true"] .lvs-what { display: block; max-width: 230px; }
  .lvs-day [aria-current="true"] .lvs-what span { display: none; }
}

/* =============== calm =============== */
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before, .stage *::after { animation: none !important; transition: none !important; }
  .rqs-embers, .rqs-sky video, .lvs-tap { display: none; }
}