/* ============================================================
   juwel-os-liquid.css — liquid-candy motion + glass for JUWEL OS
   Loads AFTER the shell styles; overrides open/close/menu motion
   with bouncy liquid curves and gives chrome a candy-glass finish.
   ============================================================ */
:root{
  --jl-bounce:cubic-bezier(.34,1.62,.64,1);
  --jl-soft:cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion:no-preference){

  /* ── windows melt open / snap shut ── */
  .win{animation:jl-winopen .62s var(--jl-bounce) both;}
  @keyframes jl-winopen{
    0%{opacity:0;transform:translateY(46px) scale(.82);border-radius:40px;}
    55%{opacity:1;transform:translateY(-6px) scale(1.015);}
    78%{transform:translateY(2px) scale(.997);}
    100%{opacity:1;transform:none;}
  }
  .win.closing{animation:jl-winclose .3s var(--jl-soft) both;}
  @keyframes jl-winclose{
    0%{opacity:1;transform:scale(1);}
    35%{transform:scale(1.02,.96);}
    100%{opacity:0;transform:translateY(22px) scale(.86);border-radius:34px;}
  }
  .win.minimizing{animation:jl-winmin .46s cubic-bezier(.5,-.2,.6,1) both;}
  @keyframes jl-winmin{
    0%{transform:scale(1);}
    30%{transform:scale(1.04,.92);}
    100%{opacity:0;transform:translateY(42vh) scale(.32);}
  }

  /* fixed/phone windows */
  .fwin.opening{animation:jl-fwinopen .5s var(--jl-bounce) both;}
  @keyframes jl-fwinopen{
    0%{opacity:0;transform:translateY(28px) scale(.9);}
    60%{opacity:1;transform:translateY(-4px) scale(1.008);}
    100%{opacity:1;transform:none;}
  }

  /* ── menus + command bar melt open ── */
  .mb-menu.on{animation:jl-meltpop .42s var(--jl-bounce) both;transform-origin:top left;}
  @keyframes jl-meltpop{
    0%{opacity:0;transform:scaleY(.42) scaleX(.92);border-radius:22px;}
    60%{opacity:1;transform:scaleY(1.05) scaleX(1.005);}
    100%{opacity:1;transform:none;}
  }
  .cmd-box{animation:jl-cmdpop .5s var(--jl-bounce) both;}
  @keyframes jl-cmdpop{
    0%{opacity:0;transform:translateY(-26px) scale(.92);}
    60%{opacity:1;transform:translateY(4px) scale(1.008);}
    100%{opacity:1;transform:none;}
  }

  /* ── dock: gooey press ── */
  .dock-app{transition:transform .32s var(--jl-bounce), box-shadow .2s var(--jl-soft), margin .2s var(--jl-soft);}
  .dock-app:active{transform:scale(.82);}
  .jl-jelly{animation:jl-jelly .5s var(--jl-bounce);}
  @keyframes jl-jelly{
    0%{transform:scale(1);}
    35%{transform:scale(1.16,.82);}
    70%{transform:scale(.92,1.1);}
    100%{transform:scale(1);}
  }

  /* front-door gem breathes a little deeper */
  .fd-gem{animation-duration:5.6s;}
}

/* ── liquid glass chrome (both themes) ──
   Windows must READ as windows over the liquid room: mostly-solid
   pane, a crisp hairline ring, a specular top edge, and a deep
   soft shadow for separation. Glassy, never ghostly. */
.win,.fwin{
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
}
.win-bar{background:color-mix(in srgb,var(--surface) 82%,transparent);}
.mb-menu,.cmd-box{
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
}
/* specular top edge + hairline ring + deep separation shadow */
.win,.fwin,.mb-menu,.cmd-box{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.5),
  inset 0 0 0 1px color-mix(in srgb,var(--line) 90%,transparent),
  0 14px 30px -18px rgba(25,14,36,.35),
  0 44px 90px -40px rgba(25,14,36,.5);}
html[data-theme="dark"] .win,html[data-theme="dark"] .fwin,
html[data-theme="dark"] .mb-menu,html[data-theme="dark"] .cmd-box{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 0 0 1px rgba(255,255,255,.1),
  0 14px 30px -18px rgba(0,0,0,.6),
  0 44px 90px -40px rgba(0,0,0,.8);}

/* ── the living liquid background sits in the room, quietly ──
   dialed back so windows and text always win the contrast fight */
#room .liquid-bg{position:absolute;inset:0;z-index:2;opacity:.5;}
html[data-theme="dark"] #room .liquid-bg{opacity:.65;}