/* Motion enhances the static page; content remains visible without JavaScript. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
body { overflow-x: clip; }
.hero-line { display: block; width: fit-content; }
.hero-scene { position: relative; overflow: hidden; isolation: isolate; }
.hero-scene .hero-bubbles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotate(1.5deg); transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.hero-example { isolation: isolate; }
.hero-example::before { content: ''; position: absolute; width: 91%; height: 93%; left: 3%; top: -6%; z-index: -1; background: radial-gradient(ellipse at center, #c5f5e1 0%, #e1f7e9 50%, transparent 70%); border-radius: 50%; }
.scene-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #428369; vertical-align: middle; }
.header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: linear-gradient(90deg, #62c5a4, #287e65); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; pointer-events: none; }
.header.is-scrolled { box-shadow: 0 5px 25px #17282a0b; }
.header { transition: box-shadow .3s; }
.flow-labels span { position: relative; overflow: hidden; transition: color .4s, background-color .4s, box-shadow .4s, transform .6s var(--ease-out); }
.flow-labels span::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: #5ec09e; transform: scaleX(0); transform-origin: left; }
.flow-labels span.active { transform: translateX(5px); }
.workflow.is-demonstrating .flow-labels span.active::after { animation: step-fill 1.4s linear both; }
.comparison-grid { transition: opacity .18s, transform .3s var(--ease-out); }
.comparison-grid.is-switching { opacity: .55; transform: translateY(5px); }
.example-picker button { position: relative; transition: border-color .3s, background-color .3s, box-shadow .3s, transform .4s var(--ease-out); }
.example-picker button[aria-pressed="true"] { box-shadow: 0 7px 20px #28675214; }
.example-picker button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: -2px; left: 18%; width: 64%; height: 3px; border-radius: 5px; background: var(--mint-dark); }
.image-button img { transition: transform .65s var(--ease-out); }
.button { position: relative; isolation: isolate; overflow: hidden; transition: transform .4s var(--ease-out), background-color .3s, box-shadow .4s; }
.button::before { content: ''; position: absolute; inset: -60% auto -60% -70%; width: 40%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, #ffffff30, transparent); pointer-events: none; z-index: -1; }
.button > span, .text-link > span { display: inline-block; transition: transform .4s var(--ease-out); }
.hero-filmstrip a { transition: transform .45s var(--ease-out), filter .4s; }
.hero-filmstrip img { transition: border-color .3s, box-shadow .3s; }
.shape-grid figure { transition: transform .55s var(--ease-out), background .4s, box-shadow .4s; }
.shape-grid img { transition: transform .5s var(--ease-out); }
.type-sticker { transition: transform .5s var(--ease-out); }
.steps button { transition: transform .4s var(--ease-out), border-color .3s, color .3s; }
.step-play { transition: transform .4s var(--ease-out); }
.faq-list summary::after { transition: transform .3s var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(180deg); }
.purchase-box { position: relative; transition: transform .5s var(--ease-out), box-shadow .5s; }
.purchase-box::before { content: ''; position: absolute; inset: -12px; border: 1px solid #76b29855; border-radius: inherit; z-index: -1; transform: rotate(-3deg); }
.purchase { isolation: isolate; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-4px); box-shadow: 0 10px 24px #17282a20; }
  .button:hover::before { animation: button-sheen .7s ease-out; }
  .button:hover > span { transform: translate(3px, -3px); }
  .text-link:hover > span { transform: translate(3px, 2px); }
  .hero-filmstrip a:hover { transform: translateY(-9px) rotate(-3deg); }
  .hero-filmstrip a:hover img { box-shadow: 0 10px 22px #17282a23; }
  .example-picker button:hover { transform: translateY(-5px); }
  .image-button:hover img { transform: scale(1.025); }
  .shape-grid figure:hover { transform: translateY(-12px) rotate(-2deg); background: #b3dfce; box-shadow: 0 14px 28px #28675220; }
  .shape-grid figure:nth-child(even):hover { transform: translateY(-12px) rotate(2deg); }
  .shape-grid figure:hover img { transform: scale(1.035); }
  .type-visual:hover .type-sticker { transform: rotate(-5deg) scale(1.04); }
  .steps button:hover { transform: translateY(-4px); }
  .steps button:hover .step-play { transform: translateX(5px); }
  .purchase-box:hover { transform: translateY(-5px); box-shadow: 0 18px 50px #2867521c; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-ready .hero-copy > .eyebrow { animation: rise-in .8s var(--ease-out) both; }
  .hero-ready .hero-line { animation: headline-in 1s var(--ease-out) .1s both; }
  .hero-ready .hero-line + .hero-line { animation-delay: .22s; }
  .hero-ready .hero-word::after { animation: underline-in 1s var(--ease-out) .6s both; }
  .hero-ready .hero-description { animation: rise-in .9s var(--ease-out) .28s both; }
  .hero-ready .hero-flow { animation: rise-in .9s var(--ease-out) .38s both; }
  .hero-ready .hero-actions, .hero-ready .hero-meta { animation: rise-in .9s var(--ease-out) .48s both; }
  .hero-ready .hero-art { animation: artwork-in 1.2s var(--ease-out) .15s both; }
  .hero-ready .hero-stamp { animation: stamp-in 1s var(--ease-out) .7s both; }
  .hero-ready .hero-note { animation: note-in 1s var(--ease-out) 1s both; }
  .hero-ready .hero-filmstrip a { animation: thumbnail-in .8s var(--ease-out) calc(.55s + var(--item, 0) * .08s) backwards; }
  .scene-pending .hero-bubbles { opacity: 0; }
  .scene-ready .hero-bubbles { transform-origin: 30% 58%; animation: bubble-pop 1.05s cubic-bezier(.22, 1, .36, 1) .55s both; }
  .scene-ready .scene-dot { animation: dot-ring 1.3s ease-out .9s 2; }
  .image-dialog[open] { animation: dialog-in .4s var(--ease-out); }
  .image-dialog[open]::backdrop { animation: backdrop-in .3s ease-out; }
  .faq-list details[open] > div { animation: rise-in .4s var(--ease-out); }
}

@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes headline-in { from { opacity: 0; transform: translateY(36px) rotate(2deg); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: translateY(0) rotate(0); clip-path: inset(-10% -10% -10% -10%); } }
@keyframes underline-in { from { transform: scaleX(0) rotate(-2deg); } to { transform: scaleX(1) rotate(-2deg); } }
@keyframes artwork-in { from { opacity: 0; translate: 25px 28px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bubble-pop { 0% { opacity: 0; transform: scale(.72) rotate(-5deg); } 65% { opacity: 1; transform: scale(1.025) rotate(.5deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes stamp-in { from { opacity: 0; scale: 1.35; } to { opacity: 1; scale: 1; } }
@keyframes note-in { from { opacity: 0; translate: 0 25px; rotate: 6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes thumbnail-in { from { opacity: 0; transform: translateY(25px) rotate(6deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes step-fill { to { transform: scaleX(1); } }
@keyframes dot-ring { 0% { box-shadow: 0 0 0 0 #42836960; } 100% { box-shadow: 0 0 0 8px #42836900; } }
@keyframes button-sheen { to { left: 140%; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px) {
  .hero-art { transform: rotate(1deg); }
  .hero-example::before { width: 105%; left: -2%; }
  .flow-labels span.active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene-pending .hero-bubbles { opacity: 1; }
  .hero-art { transform: rotate(1.5deg); }
  .comparison-grid.is-switching { opacity: 1; transform: none; }
  .button:hover, .hero-filmstrip a:hover, .example-picker button:hover, .image-button:hover img,
  .shape-grid figure:hover, .shape-grid figure:nth-child(even):hover, .shape-grid figure:hover img,
  .steps button:hover, .purchase-box:hover { transform: none; }
}