/* Deliberate motion with an explicit pause control. Everything works without it. */
.announcement{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 28px}
.motion-toggle{background:transparent;color:inherit;border:1px solid #ffffff55;border-radius:20px;font-size:10px;letter-spacing:.5px;line-height:1.2;min-height:30px;padding:7px 12px;white-space:nowrap}
.motion-toggle:hover:not(:disabled){background:#ffffff16}.motion-toggle:disabled{opacity:.8;cursor:default}
.wonder-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.wonder-board{z-index:1}.wonder-copy{z-index:2}
.feedback-layer{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden;contain:strict}
.feedback-star,.feedback-ring{position:absolute;pointer-events:none;color:#a34560;will-change:transform,opacity;line-height:1;font-size:16px}
.feedback-ring{width:24px;height:24px;border:1px solid #b6a17a;border-radius:50%}
html[data-motion=on] .wonder-board .photo-frame{rotate:var(--frame-angle,-7deg);transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease,rotate .45s ease,box-shadow .4s ease;transform-origin:center}
html[data-motion=on] .wonder-board .frame-side{--frame-angle:8deg}
@media(hover:hover) and (pointer:fine){html[data-motion=on] .wonder-board .photo-frame:hover{rotate:0deg;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px);box-shadow:0 20px 35px #28344625}
html[data-motion=on] .card:hover .card-photo{transform:translateY(-5px);transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
html[data-motion=on] .heart:hover{scale:1.12;transition:scale .22s ease}}
html[data-motion=on] .hero-spark{animation:spark-breathe 5s ease-in-out infinite}
html[data-motion=on] .spark-two{animation-delay:-2.5s}
html[data-motion=on] .new-seal{animation:seal-sway 7s ease-in-out infinite}
html[data-motion=on] .hero-orbit{animation:orbit-drift 12s ease-in-out infinite alternate}
html[data-motion=on] .btn{position:relative;overflow:hidden}
html[data-motion=on] .btn:not(:disabled):after{content:'';position:absolute;inset:-70% auto -70% -60%;width:32%;background:linear-gradient(90deg,transparent,#ffffff22,transparent);transform:rotate(20deg);pointer-events:none;transition:left .55s ease}
html[data-motion=on] .btn:not(:disabled):hover:after{left:140%}
html[data-motion=on] .text-link{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .3s ease,color .3s ease}
html[data-motion=on] .text-link:hover{background-size:100% 1px}
@keyframes spark-breathe{0%,100%{translate:0 0;scale:1}50%{translate:0 -7px;scale:1.08}}
@keyframes seal-sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes orbit-drift{from{translate:0 0}to{translate:12px 15px}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off] .photo-frame{--tilt-x:0deg!important;--tilt-y:0deg!important}
@media(max-width:720px){.announcement{gap:4px 10px;font-size:7px;padding:5px 8px}.motion-toggle{font-size:9px;min-height:30px;padding:6px 9px}.feedback-star{font-size:13px}}
@media(prefers-reduced-motion:reduce){.wonder-particles,.feedback-layer{display:none}}
html[data-motion=on] #quick-view[open] #quick-view-content,html[data-motion=on] #zoom[open] .zoom-viewport{animation:dialog-arrive .24s ease-out}
@keyframes dialog-arrive{from{opacity:.5;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:720px){.motion-toggle{min-height:44px}}

.motion-preference-sensor{position:fixed;left:0;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none;contain:strict}
@media(prefers-reduced-motion:reduce){.motion-preference-sensor{width:2px}}