.little-door { width: min(100%, 400px); margin: 2rem auto 0; position: relative; text-align: center; }
.little-door-frame { position: relative; }
.little-door-stage { width: 100%; aspect-ratio: 400 / 220; overflow: hidden; }
.little-door-stage svg, .delivery-stage svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.little-door-knock { position: absolute; top: 34%; left: 39%; width: 22%; height: 59%; border: 0; background: transparent; color: transparent; cursor: pointer; border-radius: 44% 44% 0 0; }
.little-door-knock::after { content: 'tık tık.'; color: var(--muted); position: absolute; bottom: -1.6rem; left: 0; width: 100%; font: italic .75rem var(--serif); }
.little-door-knock:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.little-door-knock[aria-disabled="true"] { cursor: wait; }
.surprise-status { min-height: 1.2rem; margin: 2rem 1rem .5rem; font-size: .75rem; color: var(--muted); }
.surprise-panel { transform-box: fill-box; transform-origin: left center; }
.surprise-wave { transform-box: fill-box; transform-origin: 10% 80%; }
.surprise-wing { transform-box: fill-box; transform-origin: center bottom; }
.delivery-stage { width: 100%; height: 150px; overflow: hidden; pointer-events: none; border-bottom: 1px solid var(--line); }
.delivery-stage[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .little-door *, .delivery-stage * { scroll-behavior: auto; } }