/* Animation-specific presentation. Card geometry uses saved, varied water-drop radii. */
html {animation:ss-water-flow 15s ease infinite;}
html[data-theme="dark"] {animation-duration:20s;}
@keyframes ss-water-flow {
  0%,100% {background-position:0 0,0 0,0% 50%;}
  50% {background-position:0 0,0 0,100% 50%;}
}
.caustics {animation:ss-caustics 18s ease-in-out infinite alternate;}
@keyframes ss-caustics {
  from {transform:translate3d(-2%,-1%,0) rotate(-4deg) scale(1);}
  to {transform:translate3d(3%,2%,0) rotate(5deg) scale(1.08);}
}
html body .pond-container > .liquid-card {
  border-radius:var(--card-radius) !important;
  /* Leave breathing room around each drop without scaling text or hit targets. */
  width:calc(var(--ss-card-size) * .85);
  height:calc(var(--ss-card-size) * .85 / var(--ss-card-ratio));
  /* Selection transforms ease independently from the quiet floating motion. */
  transform:translateY(0) scale(1) !important;
  /* Cards rest until the visible-card controller chooses a short float pair. */
  animation:none;
  transition:transform .9s cubic-bezier(.25,.46,.45,.94),background .9s ease,border-color .9s ease,box-shadow .9s ease,color .45s ease,opacity .55s ease,filter .55s ease;
}
html body .pond-container > .liquid-card.selected {
  /* Selection lift stays independent of the occasional float. */
  transform:translateY(-15px) scale(1.055) !important;
  border-color:#fff !important;
  box-shadow:0 0 34px rgba(14,165,233,.42),0 15px 25px rgba(100,140,170,.20),inset 0 4px 10px #fff !important;
}
html body[data-theme="dark"] .pond-container > .liquid-card.selected {border-color:#00f0ff !important;box-shadow:0 0 30px rgba(0,240,255,.25),0 15px 25px rgba(0,0,0,.6),inset 0 0 15px rgba(0,240,255,.15) !important;}
@keyframes ss-float {
  0%,100% {translate:0 0;rotate:0deg;}
  50% {translate:0 -10px;rotate:2deg;}
}
@keyframes ss-float-down {
  0%,100% {translate:0 0;rotate:0deg;}
  50% {translate:0 10px;rotate:-2deg;}
}
html body .pond-container > .liquid-card.puka-active {
  animation:ss-float 3s ease-in-out 1;
  animation-delay:0s !important;
}
html body .pond-container > .liquid-card.puka-active.puka-down {
  animation-name:ss-float-down;
}
html body .card-frame,html body .card-art,html body .card-overlay {border-radius:inherit !important;}
html body .card-art {filter:none;transform:none;}
html body .card-meta {left:17%;right:17%;bottom:16%;padding:0 !important;}
html body .liquid-card.has-art .app-name {font-size:.8rem;line-height:1.2;}
html body .liquid-card:not(.has-art):not(.new-card) .app-name {max-width:68%;text-align:center;line-height:1.2;}
html body .pond-container {row-gap:22px !important;padding-top:26px !important;}
html body .detail-panel {
  opacity:0;transform:translateY(34px) scale(.965);filter:blur(8px);
  clip-path:inset(42% 46% 42% 46% round 38px);pointer-events:none;
  transition:background .65s ease,border-color .55s ease,box-shadow .55s ease,color .45s ease,opacity .55s ease,filter .55s ease;
}
html body .detail-panel.forming {opacity:.13;transform:translateY(18px) scale(.985);filter:blur(12px);clip-path:inset(28% 38% 28% 38% round 44px);}
html body .detail-panel.show {opacity:1;pointer-events:auto;transform:translateY(0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0 round 28px);}
html body .detail-panel.show .detail-hero,
html body .detail-panel.show .item-detail-grid,
html body .detail-panel.show .panel-actions {animation:detailContentRise .7s cubic-bezier(.16,1,.3,1) both;}
html body .detail-panel.show .item-detail-grid {animation-delay:.08s;}
html body .detail-panel.show .panel-actions {animation-delay:.16s;}
@keyframes detailContentRise {0%{opacity:0;transform:translateY(14px) scale(.985);filter:blur(7px)}60%{opacity:.72}100%{opacity:1;transform:none;filter:blur(0)}}
/* One motion contract for browser and installed mode. Resolve layout once,
   then unfold only opacity/transform so the gallery does not resize per frame. */
html body .utility-drawers,html body .brand {transition:none !important;}
html body :is(.search-drawer,.sort-drawer,.settings-drawer) {
  transition:none !important;
  transform:none;
  transform-origin:var(--ss-menu-origin-x,50%) var(--ss-menu-origin-y,0px);
}
html body :is(.search-drawer,.sort-drawer,.settings-drawer).open {
  animation:ss-menu-unfold .72s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes ss-menu-unfold {
  0% {opacity:0;transform:translateY(-6px) scale(.62,.82);}
  100% {opacity:1;transform:none;}
}
/* Close the actual paper outside layout; rapid menu switches keep one height. */
html body :is(.search-drawer,.sort-drawer,.settings-drawer).closing {
  position:absolute !important;
  left:var(--ss-menu-exit-left);top:var(--ss-menu-exit-top);
  width:var(--ss-menu-exit-width);height:var(--ss-menu-exit-height);
  min-height:0 !important;max-height:none !important;margin:0 !important;
  padding:var(--ss-menu-exit-padding) !important;
  background:var(--ss-menu-exit-background) !important;
  border:var(--ss-menu-exit-border) !important;
  box-shadow:none !important;overflow:hidden !important;
  animation:none !important;pointer-events:none !important;
}
/* Share the content reveal while each mode retains its native scrolling. */
 /* An opened paper must return to ordinary document painting. Identity
    transforms and zero blur still create a separate containing/paint layer. */
 .shell .detail-panel.show, .shell .detail-panel.forming {
  opacity: 1;
  clip-path: none; transform: none; filter: none;
  /* Paper appears immediately; only child content has an entrance animation. */
  transition: background .65s ease, border-color .55s ease, color .45s ease;
 }
 .detail-panel.forming :is(.detail-hero,.item-detail-grid,.panel-actions) {
  opacity: 0;
 }

html body .formation-blob,html body .formation-wave,html body .condense-drop,html body .click-ring,html body .splash-drop,html body .theme-flash {display:block !important;pointer-events:none;}
html body .click-ring {animation:none;}
html body .formation-blob {z-index:146;will-change:auto;}
html body .formation-blob::after {animation:blobShimmer .65s ease-in-out infinite alternate;}
@keyframes blobShimmer {to{transform:translate3d(3%,2%,0) scale(1.04);filter:saturate(1.25)}}
html body .condense-drop {z-index:147;will-change:auto;}
html body .formation-wave {z-index:145;animation:none;}
html body .splash-drop {z-index:100;}
html body .click-ring {z-index:99;}
body[data-theme="dark"] .splash-drop {width:8px;height:8px;}
html body .detail-panel::before {display:block;}
@keyframes panelScan {0%{opacity:0;transform:translateX(-115%)}20%{opacity:.7}100%{opacity:0;transform:translateX(115%)}}
/* Exact reference button squash/stretch and editor bloom, including file labels. */
button.puyon-hit,.file-btn.puyon-hit,#galleryTitle.puyon-hit {animation:ssPuyon .48s cubic-bezier(.22,.9,.2,1.22) both !important;transform-origin:center !important;}
@keyframes ssPuyon {0%{transform:scale(1)}24%{transform:scale(.88,1.08)}48%{transform:scale(1.10,.91)}68%{transform:scale(.97,1.035)}84%{transform:scale(1.025,.985)}100%{transform:scale(1)}}
html body button:active,html body .file-btn:active {transform:none;}
.modal-backdrop.show {animation:editorBackdropIn .28s ease-out both;}
.modal-backdrop.show .modal {transform-origin:50% 62%;animation:editorBloomIn .58s cubic-bezier(.16,1,.3,1) both;}
@keyframes editorBackdropIn {from{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{opacity:1}}
@keyframes editorBloomIn {0%{opacity:0;transform:translateY(20px) scale(.90);filter:blur(12px)}58%{opacity:1;transform:translateY(-3px) scale(1.018);filter:blur(0)}78%{transform:translateY(1px) scale(.994)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
/* All three menu buttons share a selected color appropriate to their theme. */
:root {--ss-menu-idle-bg:rgba(255,255,255,.62);--ss-menu-idle-text:#0284c7;--ss-menu-idle-border:rgba(255,255,255,.92);--ss-menu-idle-shadow:0 8px 24px rgba(100,140,170,.09);--ss-menu-idle-text-shadow:none;}
html[data-theme="dark"] {--ss-menu-idle-bg:linear-gradient(145deg,rgba(7,30,48,.88),rgba(8,22,38,.72));--ss-menu-idle-text:#9af6ff;--ss-menu-idle-border:rgba(103,232,249,.34);--ss-menu-idle-shadow:0 0 0 1px rgba(0,240,255,.04),0 10px 28px rgba(0,0,0,.26),inset 0 0 18px rgba(0,240,255,.045);--ss-menu-idle-text-shadow:0 0 12px rgba(0,240,255,.22);}
html body :is(.search-toggle,.settings-toggle,.sort-toggle):not(.active) {color:var(--ss-menu-idle-text);background:var(--ss-menu-idle-bg);border-color:var(--ss-menu-idle-border);box-shadow:var(--ss-menu-idle-shadow);text-shadow:var(--ss-menu-idle-text-shadow);}
html body :is(.search-toggle,.settings-toggle,.sort-toggle):not(.active) .ui-icon {color:inherit;stroke:currentColor;}
:root {--ss-menu-open-bg:rgba(224,242,254,.94);--ss-menu-open-text:#0284c7;--ss-menu-open-border:rgba(255,255,255,.92);--ss-menu-open-shadow:0 0 0 1px rgba(14,165,233,.12),0 10px 30px rgba(14,165,233,.15);}
html[data-theme="dark"] {--ss-menu-open-bg:linear-gradient(145deg,#087d91,#07364a);--ss-menu-open-text:#fff;--ss-menu-open-border:#42e8f2;--ss-menu-open-shadow:0 10px 26px rgba(0,0,0,.22);}
html body .search-toggle.active,html body .settings-toggle.active,
html body .sort-toggle.active[aria-expanded="true"] {color:var(--ss-menu-open-text)!important;background:var(--ss-menu-open-bg)!important;border-color:var(--ss-menu-open-border)!important;box-shadow:var(--ss-menu-open-shadow)!important;}
html body :is(.search-toggle.active,.settings-toggle.active,.sort-toggle.active[aria-expanded="true"]) .ui-icon {color:inherit!important;stroke:currentColor!important;}
/* One slow ripple, followed by a real pause managed by motion-idle.js. */
html body .pond-container > .liquid-card::before {animation:none;}
html body .pond-container > .liquid-card.ripple-active::before {animation:ss-ripple 3s linear 1;}
@keyframes ss-ripple {from{transform:scale(1);opacity:.8;}to{transform:scale(1.5);opacity:0;}}
.motion-paused,.motion-paused *,.motion-paused *::before,.motion-paused *::after {animation-play-state:paused !important;}
@media(max-width:600px) {
  /* Give shadows and ripples the whole viewport, retaining the card grid size. */
  .shell {--ss-pond-left:12px;--ss-pond-right:12px;--ss-pond-inset:3px;}
  html body .pond-wrap {width:calc(100% + var(--ss-pond-left) + var(--ss-pond-right));margin-left:calc(-1 * var(--ss-pond-left));}
  html body .pond-container > .liquid-card {--ss-card-size:calc((100vw - 42px)/2);}
  html body .pond-container {column-gap:8px !important;padding-left:calc(var(--ss-pond-left) + var(--ss-pond-inset)) !important;padding-right:calc(var(--ss-pond-right) + var(--ss-pond-inset)) !important;padding-top:calc(26px + var(--ss-header-overlap)) !important;}
  @supports(width:1cqw) {html body .pond-container > .liquid-card {--ss-card-size:calc((100cqw - 20px)/2);}}
}
@media(max-width:430px) {.shell {--ss-pond-inset:0px;}}
@media(display-mode:standalone) and (max-width:600px) {
  .shell {--ss-pond-left:max(12px,calc(env(safe-area-inset-left) + 10px));--ss-pond-right:max(12px,calc(env(safe-area-inset-right) + 10px));}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none !important;transition:none !important;}
  html body .pond-container > .liquid-card.selected {transform:none !important;}
  html body .detail-panel.show .detail-hero,html body .detail-panel.show .item-detail-grid,html body .detail-panel.show .panel-actions,
  .modal-backdrop.show,.modal-backdrop.show .modal,button.puyon-hit,.file-btn.puyon-hit,#galleryTitle.puyon-hit {animation:none !important;}
  html body .search-drawer,html body .settings-drawer,html body .sort-drawer {transition:none !important;}
}