/* Apple-style depth, scroll reveals and the hero scene. Loaded after site.css on every page. */

/* ── Depth: hairlines first, one very soft shadow. (The app's own shadows are heavier.) ── */
:root { --shadow-1: none; --shadow-2: none; --shadow-3: 0 22px 44px -24px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .07); }
:root[data-theme="dark"] { --shadow-1: none; --shadow-2: none; --shadow-3: 0 22px 44px -24px rgba(0, 0, 0, .75), 0 0 0 .5px rgba(255, 255, 255, .09); }
.frame { border-radius: 14px; }

/* ── Reveal on scroll: only once site.js has run, and never with reduced motion ── */
.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }

/* ── The hero scene: a looping picture built from the app's real content ──────────────────
   One 16 s cycle. Every element is drawn in its FINAL state and the keyframes only describe how it gets there,
   so with reduced motion (animations off) the finished picture is what you see. */
.hero-stage { --cycle: 16s; position: relative; width: min(100%, 560px, calc((100svh - 9rem) * 1.16)); aspect-ratio: 580 / 500; margin-inline: auto; font-size: 12px; line-height: 1.4; color: var(--text-primary); animation: hs-master var(--cycle) linear infinite; }
@keyframes hs-master { 0% { opacity: 0; transform: translateY(10px); } 4%, 91% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

.hs-window { position: absolute; inset: 0 7% 13% 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--bg-surface); box-shadow: var(--shadow-3); }
.hs-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; flex: none; background: var(--bg-window); border-bottom: .5px solid var(--separator); }
.hs-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--fill-pressed); display: block; }
.hs-bar > span { margin-left: 8px; font-weight: 600; color: var(--text-secondary); }
.hs-pill { position: relative; margin-left: auto; width: 118px; height: 22px; font-weight: 600; font-size: 11px; }
.hs-pill > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; color: var(--text-secondary); }
.hs-pill > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.hs-p1 { opacity: 0; color: var(--accent) !important; animation: hs-p1 var(--cycle) infinite; }
.hs-p1::before { background: none !important; border: 1.5px solid var(--accent); border-right-color: transparent; animation: hs-spin .7s linear infinite; }
.hs-p2 { animation: hs-p2 var(--cycle) infinite; }
@keyframes hs-p1 { 0%, 40% { opacity: 0; } 41%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes hs-p2 { 0%, 39% { opacity: 1; } 40%, 48% { opacity: 0; } 49%, 100% { opacity: 1; } }
@keyframes hs-spin { to { transform: rotate(360deg); } }

.hs-body { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 0; }
.hs-code { padding: 14px 4px 0 0; font: 11.5px/22px var(--font-mono); border-right: .5px solid var(--separator); overflow: hidden; }
.hs-ln { display: flex; white-space: nowrap; }
.hs-ln > i { flex: none; width: 26px; padding-right: 10px; text-align: right; font-style: normal; color: var(--text-tertiary); }
.hs-t { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; width: calc(var(--n) * 1ch); }
.hs-t .k { color: var(--syn-cmd); font-weight: 400; }
.hs-t1 { --n: 17; animation: hs-t1 var(--cycle) infinite steps(17, end); }
.hs-t2 { --n: 24; animation: hs-t2 var(--cycle) infinite steps(24, end); }
.hs-t3 { --n: 28; animation: hs-t3 var(--cycle) infinite steps(28, end); }
.hs-t4 { --n: 27; animation: hs-t4 var(--cycle) infinite steps(27, end); }
@keyframes hs-t1 { 0%, 3% { width: 0; } 9%, 100% { width: calc(var(--n) * 1ch); } }
@keyframes hs-t2 { 0%, 10% { width: 0; } 19%, 100% { width: calc(var(--n) * 1ch); } }
@keyframes hs-t3 { 0%, 20% { width: 0; } 30%, 100% { width: calc(var(--n) * 1ch); } }
@keyframes hs-t4 { 0%, 31% { width: 0; } 40%, 100% { width: calc(var(--n) * 1ch); } }
.hs-word { position: relative; display: inline-block; }
.hs-word u { text-decoration: none; }
.hs-word .hs-us { position: absolute; left: 0; top: 0; opacity: 0; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--warning); text-decoration-thickness: 1px; text-underline-offset: 3px; animation: hs-us var(--cycle) infinite; }
.hs-uk { animation: hs-uk var(--cycle) infinite; }
@keyframes hs-us { 0%, 80% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes hs-uk { 0%, 80% { opacity: 0; } 81%, 100% { opacity: 1; } }

.hs-pdf { display: grid; place-items: start center; padding: 16px 16px 0; background: var(--bg-pdf); overflow: hidden; }
.hs-page { width: 100%; max-width: 190px; height: 260px; padding: 18px 16px; border-radius: 4px 4px 0 0; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.hs-h { height: 7px; width: 46%; margin: 0 auto 14px; border-radius: 2px; background: #2b2b2e; animation: hs-bar var(--cycle) infinite; }
.hs-l { display: block; height: 4px; margin-bottom: 7px; border-radius: 2px; background: #cfcfd4; width: var(--w); transform-origin: left; animation: hs-bar var(--cycle) infinite; }
.hs-h { animation-name: hs-bar-h; }
.hs-l:nth-child(2) { animation-name: hs-bar-1; } .hs-l:nth-child(3) { animation-name: hs-bar-2; } .hs-l:nth-child(4) { animation-name: hs-bar-3; }
.hs-l:nth-child(5) { animation-name: hs-bar-4; } .hs-l:nth-child(6) { animation-name: hs-bar-5; } .hs-l:nth-child(7) { animation-name: hs-bar-6; }
@keyframes hs-bar-h { 0%, 8% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
@keyframes hs-bar-1 { 0%, 18% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }
@keyframes hs-bar-2 { 0%, 22% { transform: scaleX(0); } 28%, 100% { transform: scaleX(1); } }
@keyframes hs-bar-3 { 0%, 28% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }
@keyframes hs-bar-4 { 0%, 34% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes hs-bar-5 { 0%, 42% { transform: scaleX(0); } 47%, 100% { transform: scaleX(1); } }
@keyframes hs-bar-6 { 0%, 44% { transform: scaleX(0); } 49%, 100% { transform: scaleX(1); } }
.hs-fig { height: 46px; margin: 12px 0 8px; border: 1px solid #cfcfd4; border-radius: 5px; animation: hs-fade var(--cycle) infinite; }
@keyframes hs-fade { 0%, 48% { opacity: 0; } 54%, 100% { opacity: 1; } }

/* The floating cards. The outer element only floats; the inner one fades and pops. */
.hs-float { position: absolute; animation: hs-float 7s ease-in-out infinite alternate; }
.hs-float.f2 { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes hs-float { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
.hs-card { padding: 12px 14px; border-radius: 14px; background: var(--bg-surface); box-shadow: var(--shadow-3); }

.hs-refs { right: 0; bottom: 0; width: 66%; }
.hs-refs .hs-card { animation: hs-refs var(--cycle) infinite; }
@keyframes hs-refs { 0%, 48% { opacity: 0; transform: translateY(14px) scale(.97); } 52%, 100% { opacity: 1; transform: none; } }
.hs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 650; font-size: 12.5px; }
.hs-head small { font-weight: 500; font-size: 11px; color: var(--text-secondary); position: relative; width: 130px; height: 15px; }
.hs-head small > span { position: absolute; right: 0; top: 0; white-space: nowrap; }
.hs-s1 { opacity: 0; animation: hs-s1 var(--cycle) infinite; }
.hs-s2 { animation: hs-s2 var(--cycle) infinite; }
@keyframes hs-s1 { 0%, 51% { opacity: 0; } 52%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes hs-s2 { 0%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }
.hs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 31px; border-top: .5px solid var(--separator); }
.hs-row > b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-slot { position: relative; flex: none; width: 92px; height: 22px; display: flex; justify-content: flex-end; align-items: center; }
.hs-slot .badge { font-size: 10.5px; padding: 1px 8px; }
.hs-slot .sp { position: absolute; right: 8px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--text-tertiary); border-right-color: transparent; opacity: 0; }
.hs-row:nth-of-type(1) .badge { animation: hs-pop1 var(--cycle) infinite; } .hs-row:nth-of-type(2) .badge { animation: hs-pop2 var(--cycle) infinite; }
.hs-row:nth-of-type(3) .badge { animation: hs-pop3 var(--cycle) infinite; } .hs-row:nth-of-type(4) .badge { animation: hs-pop4 var(--cycle) infinite; }
.hs-row:nth-of-type(1) .sp { animation: hs-spin .7s linear infinite, hs-sp1 var(--cycle) infinite; } .hs-row:nth-of-type(2) .sp { animation: hs-spin .7s linear infinite, hs-sp2 var(--cycle) infinite; }
.hs-row:nth-of-type(3) .sp { animation: hs-spin .7s linear infinite, hs-sp3 var(--cycle) infinite; } .hs-row:nth-of-type(4) .sp { animation: hs-spin .7s linear infinite, hs-sp4 var(--cycle) infinite; }
@keyframes hs-pop1 { 0%, 56% { opacity: 0; transform: scale(.6); } 59%, 100% { opacity: 1; transform: none; } }
@keyframes hs-pop2 { 0%, 59% { opacity: 0; transform: scale(.6); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes hs-pop3 { 0%, 62% { opacity: 0; transform: scale(.6); } 65%, 100% { opacity: 1; transform: none; } }
@keyframes hs-pop4 { 0%, 65% { opacity: 0; transform: scale(.6); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes hs-sp1 { 0%, 52% { opacity: 0; } 53%, 56% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes hs-sp2 { 0%, 52% { opacity: 0; } 53%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes hs-sp3 { 0%, 52% { opacity: 0; } 53%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes hs-sp4 { 0%, 52% { opacity: 0; } 53%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }

.hs-spell { right: 2%; top: 17%; width: 52%; }
.hs-spell .hs-card { animation: hs-spellcard var(--cycle) infinite; }
@keyframes hs-spellcard { 0%, 70% { opacity: 0; transform: translateY(14px) scale(.97); } 74%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }
.hs-spell strong { display: block; font-weight: 650; font-size: 12px; }
.hs-spell p { margin: 3px 0 9px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.hs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 24px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 11px; color: var(--success); background: var(--success-soft); animation: hs-press var(--cycle) infinite; }
.hs-btn > span { white-space: nowrap; }
.hs-b1 { animation: hs-b1 var(--cycle) infinite; }
.hs-b2 { position: absolute; animation: hs-b2 var(--cycle) infinite; }
@keyframes hs-b1 { 0%, 78% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes hs-b2 { 0%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes hs-press { 0%, 76% { transform: none; background: var(--accent-soft); color: var(--accent); } 78% { transform: scale(.94); background: var(--accent-soft); color: var(--accent); } 80%, 100% { transform: none; background: var(--success-soft); color: var(--success); } }

@media (prefers-reduced-motion: reduce) {
  .hero-stage, .hero-stage * { animation: none !important; }
  .hs-spell { display: none; }
  .hs-us { display: none; }
  .hs-b1 { display: none; }
  .hs-s1 { display: none; }
}