/* Quiet, icon-led product moments. Every element is present from the first
   frame; a single arrival settles into a stable composition. */
.story-scene { display: block; width: 100%; height: 100%; font-family: var(--sans,"Instrument Sans",Arial,sans-serif); text-rendering: optimizeLegibility; }
.story-scene .icon-paper { fill: #fff; filter: drop-shadow(0 7px 12px #25455d0d); }
.story-scene .icon-title { fill: #173b52; font-size: 28px; font-weight: 500; letter-spacing: -.6px; }
.story-scene .icon-label { fill: #24485f; font-size: 22px; font-weight: 450; letter-spacing: -.25px; }
.story-scene .icon-small { fill: #617b8d; font-size: 18px; font-weight: 400; letter-spacing: -.1px; }
.story-scene .icon-muted { fill: #617b8d; }
.story-scene .icon-rule { stroke: #e2eaf0; stroke-width: 1; }
.story-scene .scene-anim { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.2,.7,.2,1); animation-iteration-count: 1; animation-fill-mode: both; animation-play-state: paused; }
.story-scene .icon-arrive-a { animation-name: icon-arrive-a; }
.story-scene .icon-arrive-b { animation-name: icon-arrive-b; animation-delay: .08s; }
.story-scene .icon-arrive-c { animation-name: icon-arrive-c; animation-delay: .16s; }
@keyframes icon-arrive-a { from { transform: translateY(12px); } to { transform: translateY(0); } }
@keyframes icon-arrive-b { from { transform: translate(8px,8px); } to { transform: translate(0,0); } }
@keyframes icon-arrive-c { from { transform: translate(-8px,6px); } to { transform: translate(0,0); } }
@media (prefers-reduced-motion:reduce) { .story-scene .scene-anim { animation: none !important; } }