/* Visible illustration loops pause offscreen, in background tabs, or on request. */
.miniature-paper > div {
  transition: transform 260ms var(--ease-out);
}
.miniature-paper i { transform-origin: left center; }
.file-card { transition: transform 260ms var(--ease-out); }
.coffee-mark { position: relative; }
.coffee-mark::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #d2bb8b16, transparent 70%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.coffee-steam { transform-box: fill-box; transform-origin: center; }
.site-header .button > svg,
.download-button > svg,
.coffee-actions .button > span,
.hero-aside .text-action > span,
.feature .text-action > span,
.coffee-actions .text-action > span,
.install-links a > span {
  display: inline-block;
  transition: transform 160ms var(--ease-out);
}
.site-header nav a { position: relative; }
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.download-intro .button:active,
.coffee-actions .button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .coffee-section:hover .coffee-mark::before { opacity: 1; }
  .site-header nav a:hover::after { transform: scaleX(1); }
  .site-header .button:hover > svg,
  .download-button:hover > svg { transform: translateY(2px); }
  .hero-aside .text-action:hover > span { transform: translate(-2px, 2px); }
  .coffee-actions .button:hover > span,
  .feature .text-action:hover > span,
  .coffee-actions .text-action:hover > span,
  .install-links a:hover > span { transform: translate(2px, -2px); }
}

.feature-heading-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d2bb8b40; border-radius: 6px; background: #d2bb8b0b; color: #d2bb8b; font-size: 11px; min-height: 36px; }
.motion-toggle[hidden], .demo-play-button[hidden] { display: none; }
.motion-toggle:disabled { opacity: .65; cursor: default; }
.motion-toggle-icon { width: 12px; text-align: center; }
.demo-playback { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.demo-play-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d2bb8b70; border-radius: 6px; background: #d2bb8b1a; padding: 10px 13px; color: #ecdcba; font-size: 11px; min-height: 40px; }
.demo-play-button:disabled { opacity: .6; }
.miniature-paper > div { animation: paper-sway 4.8s var(--ease-move) infinite; }
.miniature-paper i { animation: paper-line 4.8s var(--ease-move) infinite; }
.keycap { animation: key-tap 2.4s var(--ease-out) infinite; }
.waveform i { animation: wave-dance 1.4s var(--ease-move) infinite alternate; }
.waveform i:nth-child(2n) { animation-delay: -.9s; }
.waveform i:nth-child(3n) { animation-delay: -.35s; }
.waveform i:nth-child(5n) { animation-delay: -1.2s; }
.sound-rings { animation: sound-ripple 2.4s var(--ease-out) infinite; }
.file-back { animation: files-left 5s var(--ease-move) infinite; }
.file-middle { animation: files-right 5s var(--ease-move) infinite; }
.file-front { animation: files-front 5s var(--ease-move) infinite; }
.coffee-mark svg { width: 44px; height: 44px; overflow: visible; }
.coffee-steam { stroke-width: 1.8; animation: coffee-rise 2.8s var(--ease-move) infinite; }
.coffee-steam:last-child { animation-delay: -1.4s; }
.app-icon { animation: icon-float 5s var(--ease-move) infinite; }
.miniature-paper > div, .miniature-paper i, .keycap, .waveform i, .sound-rings, .file-card, .coffee-steam, .app-icon { animation-play-state: paused; }
html[data-page-motion=running] .motion-in-view :is(.miniature-paper > div, .miniature-paper i, .keycap, .waveform i, .sound-rings, .file-card, .coffee-steam),
html[data-page-motion=running] .app-icon.motion-in-view { animation-play-state: running; }
@keyframes paper-sway {
  0%,100% { transform: translateX(-50%) translateY(7px) rotate(-9deg); }
  50% { transform: translateX(-50%) translateY(-15px) rotate(-1deg); }
}
@keyframes paper-line { 0%,15%,100% { transform: scaleX(.2); opacity: .35; } 55%,85% { transform: scaleX(2.1); opacity: 1; } }
@keyframes key-tap { 0%,20%,42%,65%,100% { transform: translateY(0) rotate(-7deg); } 27%,51% { transform: translateY(7px) rotate(-4deg); } }
@keyframes wave-dance { from { transform: scaleY(.35); opacity: .45; } to { transform: scaleY(1.85); opacity: 1; } }
@keyframes sound-ripple { from { transform: scale(.82); opacity: .9; } to { transform: scale(1.2); opacity: .1; } }
@keyframes files-left { 0%,100% { transform: translateX(-68%) rotate(-5deg); } 50% { transform: translateX(-112%) translateY(-5px) rotate(-19deg); } }
@keyframes files-right { 0%,100% { transform: translateX(-32%) rotate(5deg); } 50% { transform: translateX(12%) translateY(-5px) rotate(21deg); } }
@keyframes files-front { 0%,100% { transform: translateX(-50%) translateY(5px) rotate(-2deg); } 50% { transform: translateX(-50%) translateY(-12px) rotate(2deg); } }
@keyframes coffee-rise { 0% { transform: translateY(7px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes icon-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@media(max-width:600px) {
  .feature-heading-meta { gap: 12px; }
  .motion-toggle { min-height: 40px; }
  .demo-playback { align-items: flex-start; justify-content: flex-start; margin-top: 9px; gap: 4px; }
  .demo-play-button { min-height: 44px; font-size: 11px; }
  .demo-playback #sound-status { width: 100%; padding-left: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .miniature-paper > div, .miniature-paper i, .keycap, .waveform i, .sound-rings, .file-card, .coffee-steam, .app-icon { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .miniature-paper > div, .file-card, .coffee-steam,
  .site-header .button > svg, .download-button > svg,
  .coffee-actions .button > span, .hero-aside .text-action > span,
  .feature .text-action > span, .coffee-actions .text-action > span,
  .install-links a > span, .site-header nav a::after { transition: none; }
  .feature-paper:hover .miniature-paper > div { transform: translateX(-50%) rotate(-6deg); }
  .feature-files:hover .file-back { transform: translateX(-95%) rotate(-13deg); }
  .feature-files:hover .file-middle { transform: translateX(-8%) rotate(14deg); }
  .feature-files:hover .file-front { transform: translateX(-50%) rotate(-2deg); }
  .site-header .button:hover > svg, .download-button:hover > svg,
  .coffee-actions .button:hover > span, .hero-aside .text-action:hover > span,
  .feature .text-action:hover > span, .coffee-actions .text-action:hover > span,
  .install-links a:hover > span, .download-intro .button:active,
  .coffee-actions .button:active { transform: none; }
}