@layer motion {
  /* Tile-shaped decoration belongs to the page, never to the product screenshot. */
  .hero-product { perspective:1200px; isolation:isolate; }
  .tile-atmosphere { position:absolute; inset:-38px -18px; pointer-events:none; z-index:-1; overflow:clip; }
  .tile-atmosphere i { position:absolute; display:block; width:64px; height:64px; background:color-mix(in srgb,var(--accent) 7%,transparent); border:1px solid color-mix(in srgb,var(--accent) 15%,transparent); }
  .tile-atmosphere i:nth-child(1) { top:0; left:22%; width:110px; height:28px; }
  .tile-atmosphere i:nth-child(2) { right:0; top:12%; width:30px; height:110px; }
  .tile-atmosphere i:nth-child(3) { right:14%; bottom:0; width:94px; height:26px; }
  .tile-atmosphere i:nth-child(4) { left:0; bottom:12%; width:28px; height:72px; }
  .product-screen { position:relative; transform-origin:50% 50%; }
  .product-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,20%),#ffffff10,transparent 65%); opacity:0; }
  .reading-progress { position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:var(--accent); transform:scaleX(var(--reading-progress,0)); transform-origin:left; pointer-events:none; }
  .site-header.is-scrolled { box-shadow:0 8px 28px #00000008; }
  [data-theme="dark"] .site-header.is-scrolled { box-shadow:0 8px 30px #00000025; }
  .site-footer nav { align-items:center; }

  @media(prefers-reduced-motion:no-preference) {
    :root[data-motion="on"] .site-header { transition:box-shadow .35s,background .35s; }
    .motion-ready [data-reveal] { transition:opacity .75s cubic-bezier(.2,.75,.2,1),translate .75s cubic-bezier(.2,.75,.2,1),filter .75s; transition-delay:var(--reveal-delay,0ms); }
    .motion-ready [data-reveal]:not(.is-visible) { opacity:0; translate:0 24px; filter:blur(3px); }
    .motion-ready .hero-product[data-reveal]:not(.is-visible) { translate:0 38px; }
    :root[data-motion="on"] .hero-product .product-screen { transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s; }
    :root[data-motion="on"] .hero-product:hover .product-screen::after { opacity:1; transition:opacity .4s; }
    :root[data-motion="on"] .tile-atmosphere i { animation:tile-arrive 1.4s cubic-bezier(.16,1,.3,1) both; }
    :root[data-motion="on"] .tile-atmosphere i:nth-child(2) { animation-delay:.14s; }
    :root[data-motion="on"] .tile-atmosphere i:nth-child(3) { animation-delay:.28s; }
    :root[data-motion="on"] .tile-atmosphere i:nth-child(4) { animation-delay:.42s; }
    :root[data-motion="on"] .hero .tiny-grid i { animation:grid-arrive .75s cubic-bezier(.16,1,.3,1) both; }
    :root[data-motion="on"] .hero .tiny-grid i:nth-child(2) { animation-delay:.09s; }
    :root[data-motion="on"] .hero .tiny-grid i:nth-child(3) { animation-delay:.18s; }
    :root[data-motion="on"] .hero .tiny-grid i:nth-child(4) { animation-delay:.27s; }
    :root[data-motion="on"] .status-dot { animation:status-pulse 1.8s ease-out 2; }
    :root[data-motion="on"] .button,:root[data-motion="on"] .coffee-link { transition:transform .25s cubic-bezier(.2,.75,.2,1),background .25s,box-shadow .25s; }
    :root[data-motion="on"] .button:hover,:root[data-motion="on"] .coffee-link:hover { transform:translateY(-3px); box-shadow:0 8px 26px #0078d41a; }
    :root[data-motion="on"] .button:active,:root[data-motion="on"] .coffee-link:active { transform:translateY(0) scale(.98); }
    :root[data-motion="on"] .button svg,:root[data-motion="on"] .text-link>span,:root[data-motion="on"] .resource-list a>span:last-child { transition:transform .25s; }
    :root[data-motion="on"] .primary:hover svg { transform:translateY(2px); }
    :root[data-motion="on"] .text-link:hover>span,:root[data-motion="on"] .resource-list a:hover>span:last-child { transform:translate(3px,-2px); }
    :root[data-motion="on"] .tab-list button { transition:color .25s,border-color .25s,padding .25s; }
    :root[data-motion="on"] .tab-list button[aria-selected="true"] { padding-left:12px; }
    :root[data-motion="on"] .faq-list details[open] p { animation:detail-arrive .3s ease-out; }
    :root[data-motion="on"] .screenshot-dialog[open] { animation:dialog-arrive .35s cubic-bezier(.16,1,.3,1); }
    :root[data-motion="on"] .screenshot-dialog[open]::backdrop { animation:backdrop-arrive .3s ease-out; }
    :root[data-motion="on"]::view-transition-old(root) { animation:theme-leave .28s ease-out both; }
    :root[data-motion="on"]::view-transition-new(root) { animation:theme-enter .42s ease-out both; }
  }
  @keyframes tile-arrive { from { opacity:0; transform:translateY(22px) scale(.82); } to { opacity:1; transform:none; } }
  @keyframes grid-arrive { from { opacity:0; transform:scale(.3) rotate(-90deg); } to { opacity:1; transform:none; } }
  @keyframes status-pulse { 0% { box-shadow:0 0 0 0 #42b6a044; } 80%,100% { box-shadow:0 0 0 8px #42b6a000; } }
  @keyframes detail-arrive { from { opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } }
  @keyframes dialog-arrive { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
  @keyframes backdrop-arrive { from { opacity:0; } to { opacity:1; } }
  @keyframes theme-leave { to { opacity:0; } }
  @keyframes theme-enter { from { opacity:0; } to { opacity:1; } }
  @media(max-width:600px) {
    .tile-atmosphere { inset:-22px 0; }
    .tile-atmosphere i:nth-child(1),.tile-atmosphere i:nth-child(3) { height:14px; }
    .tile-atmosphere i:nth-child(2),.tile-atmosphere i:nth-child(4) { display:none; }
    .motion-ready [data-reveal]:not(.is-visible) { translate:0 14px; }
  }
  @media(prefers-reduced-motion:reduce) {
    .motion-ready [data-reveal]:not(.is-visible) { opacity:1; translate:none; filter:none; }
    .product-screen { transform:none !important; }
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
  }
  :root[data-motion="off"] { scroll-behavior:auto; }
  :root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation:none !important; transition:none !important; }
  :root[data-motion="off"] .button:hover { transform:none; }
  @media(forced-colors:active) { .tile-atmosphere,.reading-progress,.product-screen::after { display:none; } }
}