:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: #faf8f3;
    color: #332f2b;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
    min-height: 100svh;
    overflow: hidden;
    background: #faf8f3;
}

main {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 2rem;
}

main p {
    max-width: 42rem;
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.32rem);
    font-weight: 350;
    line-height: 1.75;
    letter-spacing: .006em;
    text-align: center;
}

.motion-layer {
    position: fixed;
    right: 3rem;
    bottom: 2rem;
    width: 10.5rem;
    height: 8.5rem;
    pointer-events: none;
    opacity: 0;
}

.motion-layer svg { width: 100%; height: 100%; overflow: visible; }
.object-a { fill: none; stroke: #74806d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.line-a { stroke-dasharray: 90; stroke-dashoffset: 90; }
.line-b, .line-c { stroke-dasharray: 48; stroke-dashoffset: 48; }
.object-c { opacity: 0; transform: scale(.82) rotate(-2deg); transform-origin: 123px 64px; }
.object-c path { fill: #e7dfc9; stroke: #8c8878; }
.object-c circle { fill: #b89b5d; stroke: #8f794e; }
.object-b { opacity: 0; transform: translate(210px, 50px); }
.body-a { fill: #b9974b; stroke: #4a443b; stroke-width: 1.2; }
.mark-a, .line-d { fill: none; stroke: #4a443b; stroke-width: 1.1; stroke-linecap: round; }
.wing-a, .wing-b { fill: #f2efe6; fill-opacity: .72; stroke: #77736b; stroke-width: .8; transform-origin: 11px -3px; }
.object-b circle { fill: #4a443b; }

.motion-layer.is-active { opacity: 1; }
.motion-layer.is-active .line-a { animation: trace-a .8s ease-out forwards; }
.motion-layer.is-active .line-b,
.motion-layer.is-active .line-c { animation: trace-a .55s .58s ease-out forwards; }
.motion-layer.is-active .object-c { animation: reveal-a .62s 1s ease-out forwards; }
.motion-layer.is-active .object-b { animation: travel-a 1.65s 1.65s cubic-bezier(.34,.67,.25,1) forwards; }
.motion-layer.is-active .wing-a { animation: wing-a .13s 1.65s ease-in-out 11 alternate, wing-b 1.1s 3.2s ease-in-out infinite alternate; }
.motion-layer.is-active .wing-b { animation: wing-a .15s 1.65s ease-in-out 10 alternate, wing-b 1.2s 3.2s ease-in-out infinite alternate-reverse; }

@keyframes trace-a { to { stroke-dashoffset: 0; } }
@keyframes reveal-a { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes travel-a {
    0% { opacity: 0; transform: translate(215px, 35px) rotate(-8deg); }
    10% { opacity: 1; }
    45% { transform: translate(155px, 18px) rotate(-2deg); }
    76% { transform: translate(118px, 35px) rotate(4deg); }
    100% { opacity: 1; transform: translate(101px, 54px) rotate(8deg); }
}
@keyframes wing-a { to { transform: rotate(16deg) scaleY(.58); } }
@keyframes wing-b { to { transform: rotate(5deg); } }

@media (max-width: 600px) {
    main { padding: 1.5rem; }
    .motion-layer { right: 1.1rem; bottom: 1rem; width: 8rem; height: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .motion-layer.is-active { animation: reduced-a .18s ease-out both; }
    .motion-layer.is-active .line-a,
    .motion-layer.is-active .line-b,
    .motion-layer.is-active .line-c { animation: none; stroke-dashoffset: 0; }
    .motion-layer.is-active .object-c { animation: none; opacity: 1; transform: none; }
    .motion-layer.is-active .object-b { animation: none; opacity: 1; transform: translate(101px, 54px) rotate(8deg); }
    .motion-layer.is-active .wing-a,
    .motion-layer.is-active .wing-b { animation: none; }
}

@keyframes reduced-a { from { opacity: 0; } to { opacity: 1; } }