/* Reusable 3D tilt: the element leans toward the mouse and a soft highlight
   follows it. tilt-3d.mjs sets the variables and adds the class. */

.tilt-3d {
  position: relative;
  transform: perspective(640px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
  will-change: transform;
}
.tilt-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
  transition: opacity .3s ease;
}
.tilt-3d.is-tilting { transition-duration: .09s, .3s, .2s, .2s, .2s; box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04); }
.tilt-3d.is-tilting::after { opacity: 1; }
.tilt-3d:active { transform: perspective(640px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .tilt-3d, .tilt-3d:active { transform: none; transition: none; }
  .tilt-3d::after { display: none; }
}

/* Side menu: floating buttons (attachFloat in tilt-3d.mjs). The button lifts
   off the menu, leans toward the mouse and drifts a little after it, while its
   icon and text hover above it. The script eases --float-lift (0 to 1) and the
   other values every frame, so transform has no CSS transition here. The
   id selector and !important win over the flat sidebar styles in styles.css,
   and the selected item keeps its pink rail. */
#sidebar { overflow-x: hidden; }
#sidebar .tilt-float {
  --float-rail: 0 0 #0000;
  --float-tint: linear-gradient(180deg, rgb(255 255 255 / calc(var(--float-lift, 0) * .075)), rgb(255 255 255 / calc(var(--float-lift, 0) * .018)));
  position: relative;
  z-index: 2;
  transform: perspective(560px) translate3d(var(--float-x, 0px), var(--float-y, 0px), calc(var(--float-lift, 0) * 16px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: color .2s ease;
  background: var(--float-tint), rgb(27 24 32 / calc(var(--float-lift, 0) * .94)) !important;
  box-shadow:
    var(--float-rail),
    inset 0 1px 0 rgb(255 255 255 / calc(var(--float-lift, 0) * .09)),
    0 0 0 1px rgb(255 255 255 / calc(var(--float-lift, 0) * .05)),
    0 calc(var(--float-lift, 0) * 4px) calc(var(--float-lift, 0) * 10px) rgb(0 0 0 / calc(var(--float-lift, 0) * .32)),
    0 calc(var(--float-lift, 0) * 16px) calc(var(--float-lift, 0) * 30px) calc(var(--float-lift, 0) * -10px) rgb(0 0 0 / calc(var(--float-lift, 0) * .75)),
    0 calc(var(--float-lift, 0) * 12px) calc(var(--float-lift, 0) * 28px) calc(var(--float-lift, 0) * -14px) rgb(240 68 145 / calc(var(--float-lift, 0) * .55)) !important;
}
#sidebar .tilt-float:focus-visible { --float-rail: inset 3px 0 0 rgba(240,68,145,.82), inset 16px 0 24px -22px rgba(255,102,165,.8); }
#sidebar :is(.nav-item,.filter-item).active.tilt-float {
  --float-rail: inset 4px 0 0 #f04491, inset 18px 0 28px -24px rgba(255,102,165,.95);
  --float-tint: linear-gradient(90deg, rgba(240,68,145,.16) 0%, rgba(240,68,145,.07) 28%, rgba(240,68,145,.018) 70%, transparent 100%);
}
html[dir="rtl"] #sidebar .tilt-float:focus-visible { --float-rail: inset -3px 0 0 rgba(240,68,145,.82), inset -16px 0 24px -22px rgba(255,102,165,.8); }
html[dir="rtl"] #sidebar :is(.nav-item,.filter-item).active.tilt-float {
  --float-rail: inset -4px 0 0 #f04491, inset -18px 0 28px -24px rgba(255,102,165,.95);
  --float-tint: linear-gradient(270deg, rgba(240,68,145,.16) 0%, rgba(240,68,145,.07) 28%, rgba(240,68,145,.018) 70%, transparent 100%);
}
/* The icon floats highest, the text a little lower: depth that moves with the lean. */
#sidebar .tilt-float > * { transform: translateZ(calc(var(--float-lift, 0) * 8px)); }
#sidebar .tilt-float > :first-child { transform: translateZ(calc(var(--float-lift, 0) * 18px)); }
#sidebar .sidebar-nav-group.open > .tilt-float .nav-group-chevron { transform: translateZ(calc(var(--float-lift, 0) * 8px)) rotate(180deg); }
/* A soft light that follows the mouse across the raised surface. */
#sidebar .tilt-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--float-lift, 0);
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.13), rgba(255,255,255,0) 60%);
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .tilt-float, #sidebar .tilt-float > * { transform: none !important; }
  #sidebar .tilt-float::after { display: none; }
}