@charset "UTF-8";

:root { --route-green: #263f34; --ink: #202421; --flow-duration: 10s; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.animation-preview { min-height: 100vh; display: grid; place-items: center; padding: clamp(.5rem, 3vw, 2rem); }
.web-flow { position: relative; width: min(100%, 1200px); aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid rgba(38,63,52,.1); background: radial-gradient(circle at 64% 42%, rgba(38,63,52,.045), transparent 30%), linear-gradient(180deg, #fff, #fbfcfb); box-shadow: 0 28px 80px rgba(31,44,37,.12); isolation: isolate; }
.web-flow::before { position: absolute; inset: 0; z-index: 2; pointer-events: none; content: ""; background: linear-gradient(90deg, rgba(255,255,255,.42), transparent 9%, transparent 91%, rgba(255,255,255,.42)); }
.web-flow__art { display: block; width: 100%; height: 100%; }
.web-flow__motion { animation-duration: var(--flow-duration); animation-timing-function: cubic-bezier(.77,0,.175,1); animation-iteration-count: infinite; animation-fill-mode: both; transform-box: fill-box; transform-origin: center; }
.web-flow__desktop { animation-name: desktop; }
.web-flow__screen-logo { animation-name: screen-logo; will-change: opacity, filter, transform; }
.web-flow__source { animation-name: source; }
.web-flow__source-line { animation: source-line var(--flow-duration) cubic-bezier(.77,0,.175,1) infinite both; }
.web-flow__audience { animation-name: audience; }
.web-flow__audience-ring { animation: audience-ring var(--flow-duration) cubic-bezier(.77,0,.175,1) infinite both; transform-box: fill-box; transform-origin: center; }
.web-flow__structure { animation-name: structure; }
.web-flow__wire { animation-name: wire; }
.web-flow__build { animation-name: build; }
.web-flow__design { animation-name: design; }
.web-flow__tools { animation-name: tools; }
.web-flow__code { animation-name: code; }
.web-flow__result { animation-name: result; }
.web-flow__phone { animation-name: phone; }
.web-flow__route { animation-name: route; stroke-dashoffset: 180; }
.web-flow__progress { position: absolute; left: 50%; bottom: .9rem; z-index: 4; display: flex; gap: .35rem; transform: translateX(-50%); }
.web-flow__progress i { display: block; width: clamp(1.2rem, 4vw, 2.5rem); height: 2px; background: rgba(38,63,52,.2); }

@keyframes desktop { 0% { opacity: 0; transform: translateY(16px) scale(.975); } 4%,96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px) scale(1.008); } }
@keyframes screen-logo { 0% { opacity: 0; filter: blur(12px); transform: translateY(5px) scale(.92); } 6%,36% { opacity: 1; filter: blur(0); transform: none; } 40% { opacity: 0; filter: blur(2px); transform: scale(1.02); } 41%,100% { opacity: 0; filter: blur(0); transform: none; } }
@keyframes source { 0% { opacity: 0; transform: translateX(-18px); } 3%,17% { opacity: 1; transform: none; } 20%,100% { opacity: 0; transform: translateX(22px) scale(.96); } }
@keyframes source-line { 0% { opacity: 0; stroke-dashoffset: 70; } 4%,17% { opacity: 1; stroke-dashoffset: 0; } 20%,100% { opacity: 0; } }
@keyframes audience { 0%,20% { opacity: 0; transform: translate(-12px,10px) scale(.9); } 23%,37% { opacity: 1; transform: none; } 40%,100% { opacity: 0; transform: translate(20px,12px) scale(.95); } }
@keyframes audience-ring { 0%,20% { opacity: 0; transform: scale(.72); } 24%,34% { opacity: 1; transform: scale(1); } 37% { opacity: .35; transform: scale(1.15); } 40%,100% { opacity: 0; transform: scale(1.2); } }
@keyframes structure { 0%,40% { opacity: 0; transform: translateY(-14px); } 43%,57% { opacity: 1; transform: none; } 60%,100% { opacity: 0; transform: translateY(6px); } }
@keyframes wire { 0%,40% { opacity: 0; transform: translateX(-10px); } 43%,57% { opacity: 1; transform: none; } 60%,100% { opacity: 0; transform: translateX(-3px); } }
@keyframes build { 0%,60% { opacity: 0; } 63%,77% { opacity: 1; } 80%,100% { opacity: 0; } }
@keyframes design { 0%,60% { opacity: 0; transform: translateX(20px); } 63%,96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(4px); } }
@keyframes tools { 0%,60% { opacity: 0; transform: translateX(-16px); } 63%,77% { opacity: 1; transform: none; } 80%,100% { opacity: 0; transform: translateX(-8px); } }
@keyframes code { 0%,60% { opacity: 0; transform: translateX(16px) scale(.94); } 63%,77% { opacity: 1; transform: none; } 80%,100% { opacity: 0; transform: translateX(8px) scale(.98); } }
@keyframes result { 0%,80% { opacity: 0; } 83%,96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phone { 0%,80% { opacity: 0; transform: translate(28px,18px) scale(.9); } 83%,96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(4px,-2px) scale(1.01); } }
@keyframes route { 0%,80% { opacity: 0; stroke-dashoffset: 180; } 84%,96% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; } }

@media (max-width: 700px) {
  .animation-preview { padding: .35rem; }
  .web-flow { aspect-ratio: 4 / 3; }
  .web-flow__art { width: 150%; max-width: none; transform: translateX(-16.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .web-flow__motion, .web-flow__source-line, .web-flow__audience-ring { animation: none; transform: none; }
  .web-flow__desktop, .web-flow__design, .web-flow__result, .web-flow__phone, .web-flow__route { opacity: 1; }
  .web-flow__screen-logo, .web-flow__source, .web-flow__audience, .web-flow__structure, .web-flow__wire, .web-flow__build, .web-flow__tools, .web-flow__code { opacity: 0; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }