/* Belavo motion system — purposeful, fast, interruptible. Every effect is skipped under prefers-reduced-motion. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --t-fast: 160ms; --t-base: 260ms; --t-slow: 520ms;
}
/* 1. Feedback: every interactive element answers within one frame. */
a, .tile, .btn, .toc a, .chip { transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 36px -18px rgba(26,213,213,0.35), 0 1px 0 rgba(255,255,255,0.04) inset; }
.tile:active, .btn:active { transform: scale(0.985); transition-duration: 80ms; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -14px rgba(255,255,255,0.45); }
/* Hover-reveal arrow on tiles: affordance without clutter. */
.tile { position: relative; }
.tile::after { content: "→"; position: absolute; right: 16px; top: 16px; color: var(--teal); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; transform: none; }
/* 2. Orientation: a reading-progress bar and a sticky header that lightens as you scroll. */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--teal), #fff); z-index: 40; pointer-events: none; }

/* 3. Continuity: content enters on load and on scroll, staggered so the eye has an order to follow. */
.enter { opacity: 0; transform: translateY(14px); }
.enter.in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.enter.in.delay-1 { transition-delay: 60ms; } .enter.in.delay-2 { transition-delay: 120ms; } .enter.in.delay-3 { transition-delay: 180ms; } .enter.in.delay-4 { transition-delay: 240ms; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
/* Headline letter sweep (same idea as the iOS intro): words arrive with a soft blur, read as one line. */
@keyframes sweep { to { opacity: 1; filter: blur(0); transform: none; } }
/* 4. Place: the active section is marked in the contents list while you read. */
.toc a { transition: color var(--t-fast), padding-left var(--t-base) var(--ease-out); }
.toc a.active { color: var(--teal); padding-left: 6px; }
.toc a.active::before { content: "•"; margin-right: 6px; }
h2[id] { scroll-margin-top: 84px; }
h2[id].flash { animation: flash 1200ms var(--ease-out); }
@keyframes flash { 0% { color: var(--teal); } 100% { color: var(--white); } }
/* 5. Progressive disclosure: long sections can be collapsed; the chevron turns, the body slides. */
details.fold { border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; margin: 14px 0; background: var(--glass); }
details.fold summary { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray); transform: rotate(45deg); transition: transform var(--t-base) var(--ease-spring); }
details.fold[open] summary::after { transform: rotate(-135deg); }
details.fold .body { padding-bottom: 14px; }
details.fold[open] .body { animation: slide 320ms var(--ease-out); }
@keyframes slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* 6. Back to top: appears only when it is useful. */
.totop { position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(27,31,34,0.7); backdrop-filter: blur(12px); color: var(--white); display: grid; place-items: center; opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); z-index: 30; cursor: pointer; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { border-color: var(--teal); }
/* 7. Copy-link on headings: feedback is a chip that fades, never a modal. */
h2[id] { position: relative; }
h2[id] .anchor { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); color: var(--gray); opacity: 0; font-size: 18px; transition: opacity var(--t-fast); text-decoration: none; }
h2[id]:hover .anchor, h2[id] .anchor:focus-visible { opacity: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: #fff; color: var(--black); font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); z-index: 45; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Ambient pearl sheen on the wordmark, slow and rare, like the iOS welcome button. */
.wordmark { background: linear-gradient(100deg, #fff 40%, #d9f7f7 50%, #fff 60%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 9s linear infinite; }
@keyframes sheen { 0%, 70% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (hover: none) { .tile:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .enter, .reveal,   .wordmark { background: none; color: var(--white); -webkit-text-fill-color: initial; }
}