/* IdleNet motion layer, 2026-09-23.

   Narrative scenes, frosted-glass buttons, scroll reveals and the scroll-driven story. Loaded after
   styles.css so it wins where the two overlap. One reduced-motion block at the end stops every
   moving part on the site. */

/* ---------- glass buttons ---------- */
.btn {
  position: relative;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), 0 1px 0 rgb(0 0 0 / 0.35);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), backdrop-filter 0.22s ease,
    background 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}
.btn:hover {
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  backdrop-filter: blur(6px) saturate(170%);
  -webkit-backdrop-filter: blur(6px) saturate(170%);
  filter: brightness(1.1);
  transform: scale(1.035);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), 0 6px 18px -10px rgb(0 0 0 / 0.55);
}
.btn:active { transform: scale(0.995); }
.btn-ghost {
  background: rgb(255 255 255 / 0.5);
  border-color: rgb(0 0 0 / 0.5);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
}
.btn-ghost:hover { background: rgb(255 255 255 / 0.68); color: var(--ink); filter: brightness(1.04); }
.btn-gold { background: color-mix(in srgb, var(--accent) 80%, transparent); border-color: rgb(255 255 255 / 0.26); }
.btn-gold:hover { background: color-mix(in srgb, var(--accent) 72%, transparent); }
.invert .btn-ghost { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.42); color: var(--white); }
.invert .btn-ghost:hover { background: rgb(255 255 255 / 0.2); color: var(--white); }

/* ---------- scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- scenes ---------- */
.scene { border: 1px solid var(--line); background: var(--white); }
.scene-svg { display: block; width: 100%; height: auto; }
.scene-svg rect, .scene-svg path, .scene-svg g, .scene-svg line { transform-box: fill-box; }
.ln { fill: var(--white); stroke: var(--ink); stroke-width: 1; }
.fill-white { fill: var(--white); }
.fill-paper { fill: var(--paper-2); }
.fill-accent { fill: var(--accent); }
.ln-solid { fill: none; stroke: var(--ink); stroke-width: 1; }
.ln-dash { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; }
.lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; fill: var(--subtle); }
.invert .scene { background: transparent; border-color: rgb(255 255 255 / 0.28); }
.invert .ln { fill: transparent; stroke: rgb(255 255 255 / 0.8); }
.invert .fill-white { fill: transparent; }
.invert .fill-paper { fill: rgb(255 255 255 / 0.12); }
.invert .fill-accent { fill: rgb(255 255 255 / 0.88); }
.invert .ln-solid, .invert .ln-dash { stroke: rgb(255 255 255 / 0.55); }
.invert .lbl { fill: rgb(255 255 255 / 0.6); }

/* packets leaving the machine */
@keyframes pkt-run { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(142px); opacity: 0; } }
.pkt { fill: var(--accent); animation: pkt-run 2.4s linear infinite; animation-delay: var(--d, 0s); }
.invert .pkt { fill: rgb(255 255 255 / 0.88); }

/* the cap filling and easing back */
@keyframes cap-grow { from { transform: scaleX(0.1); } to { transform: scaleX(0.66); } }
.cap-fill { transform-origin: left center; animation: cap-grow 7s ease-in-out infinite alternate; }

/* blocks stacking up */
@keyframes blk-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.blk { transform-origin: center bottom; animation: blk-in 0.5s steps(3) both; animation-delay: calc(var(--i, 0) * 0.14s); }
.g2 .blk { animation-delay: calc(0.4s + var(--i, 0) * 0.14s); }
.g3 .blk { animation-delay: calc(0.8s + var(--i, 0) * 0.14s); }

/* the statement arriving after the month */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.statement { animation: fade-up 0.9s ease both 1.4s; }

/* flows from the pile to the assets */
@keyframes flow-dash { to { stroke-dashoffset: -24; } }
.flow { stroke-dasharray: 6 6; animation: flow-dash 1.8s linear infinite; }
.f2 { animation-duration: 2.2s; }
.f3 { animation-duration: 2.6s; }

/* the split landing in each asset. the scene classes carry an sc- prefix because the page already
   uses .bar for the header and .tick for a ticker chip */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sc-bar { transform-origin: left center; animation: bar-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.b2 { animation-delay: 0.18s; }
.b3 { animation-delay: 0.36s; }

/* the buy: a token leaves the pile and lands in the wallet */
@keyframes token-fly {
  0%, 12% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: translate(168px, 52px); opacity: 1; }
  74%, 100% { transform: translate(168px, 52px); opacity: 0; }
}
.token rect { animation: token-fly 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes tick-draw { 0%, 58% { stroke-dashoffset: 44; } 72%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 44; } }
.tick-path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 44; animation: tick-draw 5s linear infinite; }
.invert .tick-path { stroke: rgb(255 255 255 / 0.88); }
@keyframes line-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.line-mark { animation: line-pulse 5s ease-in-out infinite; }

/* holdings growing a notch */
@keyframes col-grow { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
.col { transform-origin: center bottom; animation: col-grow 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.c2 { animation-delay: 0.12s; }
.c3 { animation-delay: 0.24s; }
@keyframes notch { 0%, 55% { transform: scaleY(0.2); } 70%, 100% { transform: scaleY(1); } }
.c4 { animation: notch 4.5s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }

/* ---------- the scroll-driven story ---------- */
.story { position: relative; padding-block: 0; }
.story-track { height: 340svh; }
/* clears the sticky bar above it, so the loop is never half hidden behind the navigation */
.story-sticky { position: sticky; top: 64px; min-height: calc(100svh - 64px); display: grid; align-content: center; padding-block: clamp(36px, 5vw, 64px); }
.story-scene { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(16px, 2.6vw, 36px); align-items: center; }
@media (max-width: 900px) { .story-scene { grid-template-columns: 1fr; } .story-track { height: 300svh; } }
.story-stage { position: relative; border: 1px solid var(--line); background: var(--white); aspect-ratio: 2 / 1; overflow: hidden; }
.story-frame { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(8px, 1.6vw, 20px); opacity: 0; transform: translateY(12px) scale(0.99); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.story-frame.is-on { opacity: 1; transform: none; }
.story-steps { list-style: none; display: grid; }
.story-steps li { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); background: var(--white); opacity: 0.4; transition: opacity 0.3s ease, background 0.3s ease; }
.story-steps li + li { margin-top: -1px; }
.story-steps li b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.story-steps li span { font-size: 14.5px; color: var(--muted); }
.story-steps li.is-on { opacity: 1; background: var(--paper-2); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .pkt, .cap-fill, .blk, .statement, .flow, .sc-bar, .token rect, .tick-path, .line-mark, .col, .c4 { animation: none !important; }
  .blk, .sc-bar, .col { transform: none; opacity: 1; }
  .story-track { height: auto; }
  .story-sticky { position: static; min-height: 0; }
  .story-frame { position: relative; opacity: 1; transform: none; }
  .story-stage { aspect-ratio: auto; display: grid; gap: 12px; }
}

/* ---------- scene furniture ---------- */
.scene-h { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; margin-bottom: 10px; }
.scene-narrow { max-width: 520px; margin-inline: auto; }
.split > .scene { align-self: start; }