/* ===========================================================================
 * D'leaps Studio OS - Glass buttons (V29.1, bolt-on)
 *
 * The staff ERP has no React source (string-patched bundle + bolt-ons), so
 * the GlassButton component that now lives in the client portal
 * (portal-app/src/components/ui/glass-button.tsx) cannot be imported here.
 * This file draws the same effect on the buttons that already exist, with no
 * markup change:
 *   ::after   the rotating conic rim (masked to a ring), turns on hover
 *   ::before  the diagonal light sheen, slides on hover and press
 *   :active   the 25 degree press tilt
 * Fills, type colours and shadows stay exactly as crystal-glass.css sets them
 * (magenta jewel primary, turquoise jewel accent, clear crystal secondary).
 *
 * Scope: html[data-wall="liquid"], loaded after crystal-glass.css. None of
 * these buttons used ::before/::after before (checked across the bundle CSS,
 * glass.css, liquid-glass.css, crystal-glass.css and every bolt-on).
 * Roll back: delete the glass-buttons.css <link> in index.html.
 * =========================================================================== */

@property --gb-a1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --gb-a2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

@media screen {

html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go) {
  --gb-bw: 1.5px;
  --gb-rim: rgba(43,42,40,.42);          /* clear crystal: ink highlights */
  --gb-base: rgba(255,255,255,.55);
  --gb-ease: cubic-bezier(.25,1,.5,1);
  position: relative;
  isolation: isolate;
  transition: transform .4s var(--gb-ease), box-shadow .4s var(--gb-ease), filter .4s var(--gb-ease), background-color .2s ease;
}
/* jewels: the rim takes the jewel's own dark tone */
html[data-wall="liquid"] :is(.btn-primary, .lw-btn.p, .login-btn, #dl-sd-root .sd-btn.p, #dl-sd-root .sd-btn.m, .vh-go) {
  --gb-rim: rgba(92,0,40,.60);
  --gb-base: rgba(255,214,230,.55);
}
html[data-wall="liquid"] :is(.btn-accent, .lw-btn.m) {
  --gb-rim: rgba(11,79,85,.50);
  --gb-base: rgba(255,255,255,.60);
}

/* the rim */
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go)::after {
  content: "";
  position: absolute;
  inset: calc(var(--gb-bw) / -2);
  padding: var(--gb-bw);
  box-sizing: border-box;
  border-radius: inherit;
  background:
    conic-gradient(from var(--gb-a1) at 50% 50%, var(--gb-rim) 0%, transparent 5% 40%, var(--gb-rim) 50%, transparent 60% 95%, var(--gb-rim) 100%),
    linear-gradient(180deg, var(--gb-base), var(--gb-base));
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
          mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
          mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: --gb-a1 .5s ease;
}

/* the sheen */
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go)::before {
  content: "";
  position: absolute;
  inset: var(--gb-bw);
  border-radius: inherit;
  background: linear-gradient(var(--gb-a2), transparent 0%, rgba(255,255,255,.50) 40% 50%, transparent 55%);
  background-size: 200% 200%;
  background-position: 0%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  transition: background-position .5s var(--gb-ease), --gb-a2 .5s var(--gb-ease);
}

/* hover: rim turns, sheen slides, the glass settles a touch */
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):not(:disabled):not([disabled]):hover { transform: scale(.975); }
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):not(:disabled):not([disabled]):hover::after { --gb-a1: -125deg; }
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):not(:disabled):not([disabled]):hover::before { background-position: 25%; }

/* press: tilt back like the reference */
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):not(:disabled):not([disabled]):active {
  transform: perspective(420px) rotateX(25deg) scale(.975) !important;
}
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):not(:disabled):not([disabled]):active::after { --gb-a1: -75deg; }
html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):not(:disabled):not([disabled]):active::before { --gb-a2: -15deg; background-position: 50% 15%; }

/* touch screens have no hover: keep the resting angles */
@media (hover: none) and (pointer: coarse) {
  html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go)::after { --gb-a1: -75deg !important; }
  html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go)::before { --gb-a2: -45deg !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go),
  html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go)::after,
  html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go)::before { transition: none !important; }
  html[data-wall="liquid"] :is(.btn, .lw-btn, .login-btn, #dl-sd-root .sd-btn, .vh-go):active { transform: none !important; }
}

} /* end @media screen */