/* ════════════════════════════════════════════════════════════════════════
   Why Us — scroll-drawn line section.
   Layout shell + the @keyframes for the continuous ambient motion.
   Everything visual in the scene itself is inline SVG in the markup.
   ════════════════════════════════════════════════════════════════════════ */

html, body { margin: 0; background: rgb(237,237,237); font-family: "Source Serif 4", Georgia, serif; }
.frame-wrap  { position: relative; width: 100%; overflow: hidden; }
.frame-stage { position: absolute; top: 0; left: 0; width: 1920px; height: 4636px; transform-origin: top left; }

/* Ambient motion. These use the independent translate/rotate properties so
   they COMPOSE with each layer's existing transform placement. */
@keyframes whwFloat0 { 0%,100% { translate: 0 0;    rotate: 0deg; }   50% { translate: 0 -13px;   rotate: 1.4deg; } }
@keyframes whwFloat1 { 0%,100% { translate: 0 0; }                    50% { translate: 7px -17px; } }
@keyframes whwFloat2 { 0%,100% { translate: 0 0;    rotate: 0deg; }   50% { translate: -8px -11px; rotate: -2deg; } }
@keyframes whwRoll   { 0%,100% { translate: 0 0; } 25% { translate: -15px -3px; } 50% { translate: 0 0; } 75% { translate: 11px -2px; } }
/* Clouds — slow, wide horizontal drift (each desynced). */
@keyframes whwDrift0 { 0%,100% { translate: 0 0; } 50% { translate: 34px 0; } }
@keyframes whwDrift1 { 0%,100% { translate: 0 0; } 50% { translate: -28px 6px; } }

@property --whwFill { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes whwSweep { from { --whwFill: 0deg; } to { --whwFill: 360deg; } }

@media (prefers-reduced-motion: reduce) { [data-whw-motion] { animation: none !important; } }