/* Playful motion. Everything animates transform/opacity only, stays under ~400ms on entry,
   and is switched off entirely for people who ask their device to reduce motion. */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:no-preference){
 /* Header noggles: glance on hover, blink now and then (play.js adds .blink / .glance) */
 .brand .noggles .pupil{transition:transform .18s var(--out);transform-box:fill-box;transform-origin:center}
 .brand:hover .noggles .pupil,.brand .noggles.glance .pupil{transform:translateX(-1px)}
 .brand .noggles.blink .pupil{animation:noggle-blink .22s steps(2) 1}
 .brand .noggles{transition:transform .25s var(--spring)}
 .brand:hover .noggles{transform:rotate(-6deg) scale(1.06)}
 @keyframes noggle-blink{50%{transform:scaleY(.15)}}

 /* Buttons: lift on hover, squash on press */
 .export-btn:hover{transform:translateY(-2px)}
 .save-split{transition:transform .12s var(--out),filter .12s}
 .save-split:hover{transform:translateY(-1px)}
 .secondary-actions .cloud-btn i,.doc-history button i,.workspace-bar button i{transition:transform .2s var(--spring)}
 .secondary-actions .cloud-btn:hover i{transform:translateY(-2px) rotate(-8deg)}
 .doc-history button:hover i{transform:rotate(-25deg)}
 .doc-history button:last-child:hover i{transform:rotate(25deg)}
 .entry-chip,.fill-tools .cloud-btn,.entries-actions .cloud-btn,.wm-save,.logo-thumb,.wm-preset-apply,.rail-actions button,.rail-actions label{transition:transform .16s var(--spring),background .15s,border-color .15s,box-shadow .15s,color .15s}
 .entry-chip:hover,.logo-thumb:hover,.wm-preset-apply:hover{transform:translateY(-2px) rotate(-1.5deg)}
 .entry-chip:active,.fill-tools .cloud-btn:active,.entries-actions .cloud-btn:active,.wm-save:active,.logo-thumb:active,.wm-preset-apply:active,.rail-actions button:active{transform:scale(.93)}
 .fill-tools .cloud-btn:hover,.entries-actions .cloud-btn:hover{transform:translateY(-1px)}

 /* Tool rail: icons hop on hover and pop when their tool opens */
 .sidebar-btn i{transition:transform .22s var(--spring)}
 .sidebar-btn:hover i{transform:translateY(-3px) rotate(-8deg)}
 .sidebar-btn.active i{animation:tool-pop .42s var(--spring)}
 @keyframes tool-pop{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.18) rotate(4deg)}100%{transform:none}}

 /* Panels slide their sections in, a beat apart */
 .panel-enter>*{animation:rise-in .32s var(--out) both}
 .panel-enter>*:nth-child(2){animation-delay:.04s}.panel-enter>*:nth-child(3){animation-delay:.08s}
 .panel-enter>*:nth-child(4){animation-delay:.12s}.panel-enter>*:nth-child(5){animation-delay:.16s}
 .panel-enter>*:nth-child(n+6){animation-delay:.2s}
 @keyframes rise-in{from{opacity:0;transform:translateY(10px)}}

 /* Pages drop onto the desk when a PDF opens (not on undo, which rebuilds pages) */
 body:not(.restoring) .page-wrapper{animation:page-drop .38s var(--spring) both}
 @keyframes page-drop{from{opacity:0;transform:translateY(-14px) rotate(-1.2deg)}}

 /* Dialogs and menus pop open; the backdrop fades */
 dialog[open]{animation:pop-in .3s var(--spring)}
 dialog[open]::backdrop{animation:fade-in .2s ease-out}
 #export-modal:not(.hidden)>div{animation:pop-in .3s var(--spring)}
 .save-menu[open] .save-menu-list,body.actions-open .secondary-actions{animation:menu-in .2s var(--spring);transform-origin:top right}
 @keyframes pop-in{from{opacity:0;transform:translateY(12px) scale(.94)}}
 @keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.92)}}
 @keyframes fade-in{from{opacity:0}}

 /* Toasts bounce up from the bottom */
 #toast.toast-in{animation:toast-in .38s var(--spring)}
 @keyframes toast-in{from{opacity:0;transform:translate(-50%,24px) scale(.9)}}

 /* Form fields: a yellow flash when filled for you, a nudge when "Next empty field" lands */
 .form-field.just-filled{animation:field-flash .7s var(--out) both}
 @keyframes field-flash{0%{background:var(--n-yellow);transform:scale(1.04)}100%{transform:none}}
 .form-field.nudge{animation:field-nudge .45s var(--spring)}
 @keyframes field-nudge{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

 /* Save status celebrates a save */
 #save-status.pop{display:inline-block;animation:status-pop .45s var(--spring)}
 @keyframes status-pop{40%{transform:scale(1.15);color:var(--n-green)}}

 /* Empty desk: the noggles float */
 #empty-state .noggles{animation:float 3.2s ease-in-out infinite}
 @keyframes float{50%{transform:translateY(-8px) rotate(-3deg)}}
 #loader .noggles{animation:float 1.4s ease-in-out infinite}

 /* Saved entries card wiggles in once */
 .entries-panel{animation:rise-in .4s var(--out) both}
 .entry-chip{animation:chip-in .3s var(--spring) both}
 .entry-chip:nth-child(2){animation-delay:.03s}.entry-chip:nth-child(3){animation-delay:.06s}.entry-chip:nth-child(4){animation-delay:.09s}.entry-chip:nth-child(n+5){animation-delay:.12s}
 @keyframes chip-in{from{opacity:0;transform:scale(.7)}}

 /* Phone tool sheet springs up */
 @media (max-width:760px){#panels-container{transition:transform .32s var(--spring)!important}}
}

/* Pixel confetti for saves and exports (play.js spawns the pieces) */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{position:absolute;width:8px;height:8px;background:var(--c);animation:confetti var(--t,.8s) cubic-bezier(.15,.6,.4,1) forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}