/* LiveGreeks glass buttons (landing-glass.js): shared by the landing page and the logged-out dashboard page, loaded
   after each page's own stylesheet. A glass button tilts toward the pointer, lifts, catches a glint where it rests and
   casts a deeper shadow, all on the script's springs (--gl-*), so transform has no transition of its own. Colours stay
   each button's own; at rest, on touch and with reduced motion nothing moves.
   Each is a slab: preserve-3d keeps the layers the script stacks behind the face in its space, so a tilt shows the
   side wall (nothing on the button may flatten it: no isolation, opacity, filter or overflow). The side under the
   pointer catches its light along the rim. data-glass="button" is the accent slab (Get free access, Sign in);
   data-glass="pill" the steel one (Open dashboard, Explore the platform). */
[data-glass] { position: relative; transform-style: preserve-3d; transition: background-color .3s, border-color .3s, color .3s; box-shadow: inset calc(var(--gl-ry, 0) * -.2px) calc(var(--gl-rx, 0) * .125px) 3px -1px rgba(255, 255, 255, calc(var(--gl-h, 0) * .34)), inset 0 1px 0 rgba(255, 255, 255, calc(var(--gl-h, 0) * .14)); }
/* Live, it takes the script's transform (outranking a page's own, such as the landing nav's intro, whose
   transform: none would hold it flat). */
[data-glass][data-glass-live] { transform: perspective(var(--gl-persp, 3200px)) translateZ(calc(var(--gl-z, 0) * 1px)) rotateX(calc(var(--gl-rx, 0) * 1deg)) rotateY(calc(var(--gl-ry, 0) * 1deg)) scale(var(--gl-s, 1)); transition: background-color .3s, border-color .3s, color .3s; }
[data-glass]::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--gl-x, 50%) var(--gl-y, 50%), rgba(255, 255, 255, .26), transparent 58%); opacity: var(--gl-h, 0); pointer-events: none; }
/* While hovered, a margin of hit area round it: the tilted side pulls its edge in, and the pointer must not fall off. */
[data-glass]:hover::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; }
/* The side wall: rings of the button's outer edge, --gl-t deep in all (the script's thickness), lit from the top
   like the monogram's sides (--gl-c1 above, --gl-c2 below) and darker toward the back. Rings, not solid layers, so
   nothing shows through a face that is still clear as the hover fill fades in. The shadow lies under the back. */
.glass-side, .glass-shadow { display: none; position: absolute; inset: calc(var(--gl-bw, 1px) * -1); border-radius: inherit; pointer-events: none; transform: translateZ(calc(var(--gl-t, 0) * var(--k, 1) * -1px)); }
[data-glass-live] > .glass-side, [data-glass-live] > .glass-shadow { display: block; }
.glass-side { padding: 2.5px; background: linear-gradient(rgba(0, 0, 0, calc(var(--k, 1) * .55)), rgba(0, 0, 0, calc(var(--k, 1) * .55))), linear-gradient(var(--gl-c1), var(--gl-c2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: var(--gl-w, 0); }
.glass-shadow { box-shadow: 0 calc(4px + var(--gl-h, 0) * 12px) calc(12px + var(--gl-h, 0) * 24px) rgba(0, 0, 0, calc(var(--gl-h, 0) * .45)); }
/* The arrow slides out along its own direction: diagonal by default (--gl-ax, --gl-ay per pixel of --gl-a). */
[data-glass] .i-arrow { transform: translate(calc(var(--gl-a, 0) * var(--gl-ax, .7) * 1px), calc(var(--gl-a, 0) * var(--gl-ay, -.7) * 1px)); transition: none; }

/* The accent slab: a cyan wall under a filled accent face, a brighter rim and an accent glow. */
[data-glass="button"] { --gl-bw: 1.5px; --gl-c1: #9fe6f7; --gl-c2: #0089ad; box-shadow: inset calc(var(--gl-ry, 0) * -.2px) calc(var(--gl-rx, 0) * .125px) 3px -1px rgba(255, 255, 255, calc(var(--gl-h, 0) * .4)), inset 0 1px 0 rgba(255, 255, 255, calc(var(--gl-h, 0) * .2)); }
[data-glass="button"] > .glass-shadow { box-shadow: 0 calc(4px + var(--gl-h, 0) * 12px) calc(12px + var(--gl-h, 0) * 24px) rgba(0, 0, 0, calc(var(--gl-h, 0) * .45)), 0 0 calc(var(--gl-h, 0) * 28px) rgba(0, 184, 230, calc(var(--gl-h, 0) * .3)); }
/* The steel slab: a lighter glass surface and an accent label, like the reference's nav items. */
[data-glass="pill"] { --gl-bw: 1px; --gl-c1: #5d6d75; --gl-c2: #1e2427; }
[data-glass="pill"]::before { background: radial-gradient(circle at var(--gl-x, 50%) var(--gl-y, 50%), rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 70%); }
[data-glass="pill"]:hover { border-color: rgba(0, 184, 230, .35); color: var(--accent, #00b8e6); }