/* Liquid Glass, the official look of every control on the site (owner, 2026-10-04: variant B won the
   A/B test). Loaded last on every Wave 1 page, after the page stylesheet, with glass.js. Restraint:
   cards and sections stay as they are; glass is for things you press, the header, the menus, the
   phone bar and the dialogs. Values are tokens in tokens.css (--g-*), light and dark.

   Anatomy of every glass control:
     1. a translucent tint (background-color, so the contrast checker reads the real base);
     2. a hairline highlight on the top edge and a faint inner border (inset shadows);
     3. a soft specular sheen (::before, a vertical gradient that brightens on hover);
     4. a soft light that follows the pointer (.glint, injected by glass.js) on the buttons and on
        every glass control (price toggle, theme switch, plan picker, demo scenes).
   Selected states (theme switch, price toggle, plan picker) use the gold glass of .btn-primary.
   Motion: transform and opacity only, 140 to 240 ms, strong ease-out. Hover only for real pointers,
   a press state on touch, no motion at all under prefers-reduced-motion.
   Blur budget on phones: at most two backdrop layers (the header and the phone bar); the open menu or
   an open dialog takes the bar's blur while it is open. Controls never blur below 1024 px.
   No url() refraction: Safari and Chromium look the same. */

/* ============================================================ Buttons: shared glass layers */
.btn-primary, .btn-secondary, .menu-btn { isolation: isolate; }
.btn-primary::before, .btn-secondary::before, .menu-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--g-sheen) 0%, rgba(255, 255, 255, 0) 56%);
  opacity: 0.85; transition: opacity 220ms var(--g-ease);
}
.btn-primary { --g-sheen: var(--g-pri-sheen); --g-glint: var(--g-pri-glint); }
.btn-secondary, .menu-btn { --g-sheen: var(--g-sec-sheen); --g-glint: var(--g-sec-glint); }

/* The pointer light: a soft disc clipped to the button, behind the label. */
.glint { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.glint::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--g-glint-d, 180px); height: var(--g-glint-h, var(--g-glint-d, 180px));
  margin: calc(var(--g-glint-h, var(--g-glint-d, 180px)) / -2) 0 0 calc(var(--g-glint-d, 180px) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, var(--g-glint), rgba(255, 255, 255, 0));
  transform: translate3d(var(--gx, 50%), var(--gy, 50%), 0); opacity: 0;
  transition: opacity 240ms var(--g-ease), transform 140ms var(--g-ease);
}
.glint[data-snap]::before { transition: opacity 240ms var(--g-ease); }
/* Press on any pointer, touch included (glass.js sets data-press while the finger is down). */
.glint[data-press]::before { opacity: 1; transition-duration: 120ms; }

/* Primary: gold-tinted glass, dark text (7.3:1 on the solid gold, at least 5.1:1 blended on any page). */
.btn-primary {
  background-color: var(--g-pri-mid);
  background-image: linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%);
  border-color: var(--g-pri-line);
  box-shadow: var(--g-pri-edge), var(--g-pri-drop);
}
.btn-primary::after { z-index: -2; box-shadow: 0 12px 28px -6px var(--brand-glow); }

/* Secondary: clear glass with a faint edge. */
.btn-secondary {
  background-color: var(--g-sec);
  border-color: var(--g-sec-line);
  box-shadow: var(--g-sec-edge), var(--g-sec-drop);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* A light blur only where nothing else competes for it (never on phones). */
  .btn-secondary { -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
}

/* Menu button (phones): the same clear glass, smaller radius. */
.menu-btn { position: relative; color: var(--text); background-color: var(--g-sec); border-color: var(--g-sec-line); box-shadow: var(--g-sec-edge), var(--g-sec-drop); transition: transform var(--t-press) var(--g-ease); }
.menu-btn:active { transform: scale(0.96); }

/* Hover, real pointers only: a 1 px lift, the sheen brightens, the light follows the pointer. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
  .btn-secondary:hover { border-color: var(--g-sec-line); }
  .btn-primary:hover::before, .btn-secondary:hover::before, .menu-btn:hover::before { opacity: 1; }
  .btn:hover > .glint::before, .menu-btn:hover > .glint::before { opacity: 1; }
  .btn-primary:active, .btn-secondary:active { transform: scale(0.97); }
}
/* Touch: the light appears where the finger lands, with the press scale. */
.btn:active > .glint::before, .menu-btn:active > .glint::before { opacity: 1; transition-duration: 120ms; }

/* ============================================================ Header bar */
/* The blur moves from the header to a layer behind it, so the header is no longer a backdrop root
   and the dropdown and the phone menu blur the page itself, not an empty header. */
.site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--g-bar-sheen), var(--g-bar);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--g-bar-edge);
}
@media (min-width: 1024px) {
  .site-header::before { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: transparent; }
  .site-header::before { background: var(--page); }
}

/* Nav links: a glass capsule fades in under the link (opacity and a 4 percent scale). */
.nav > a, .nav-dd > button { position: relative; isolation: isolate; }
.nav > a:hover, .nav-dd > button:hover, .nav-dd > button[aria-expanded="true"] { background: transparent; }
.nav > a::before, .nav-dd > button::before {
  content: ""; position: absolute; inset: 4px 2px; z-index: -1; border-radius: var(--r-pill); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), var(--g-pill);
  box-shadow: var(--g-pill-edge);
  opacity: 0; transform: scale(0.96); transition: opacity 200ms var(--g-ease), transform 200ms var(--g-ease);
}
.nav > a[aria-current="page"]::before, .nav-dd > button[aria-expanded="true"]::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .nav > a:hover::before, .nav-dd > button:hover::before { opacity: 1; transform: none; }
}

/* ============================================================ Dropdown and phone menu (glass panels) */
.dd-panel, .mobile-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%), var(--g-panel);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border-color: var(--g-panel-line);
  box-shadow: var(--g-panel-edge), var(--shadow-lg);
}
:root[data-theme="dark"] .dd-panel, :root[data-theme="dark"] .mobile-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 40%), var(--g-panel);
}
.dd-panel a, .mobile-nav a:not(.btn) { position: relative; isolation: isolate; }
.dd-panel a:hover, .mobile-nav a:not(.btn):hover { background: transparent; }
.dd-panel a::before, .mobile-nav a:not(.btn)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--g-pill); box-shadow: var(--g-pill-edge); opacity: 0; transition: opacity 180ms var(--g-ease);
}
.dd-panel a:hover::before, .dd-panel a:focus-visible::before, .mobile-nav a:not(.btn):active::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .mobile-nav a:not(.btn):hover::before { opacity: 1; } }

/* ============================================================ Phone bottom bar */
.mobile-cta {
  background: var(--g-bar-sheen), var(--g-bar);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border-top-color: var(--g-panel-line);
  box-shadow: var(--g-bar-edge), 0 -8px 24px -16px rgba(30, 24, 12, 0.25);
}
/* While the phone menu is open it is the second glass layer, so the bar gives up its blur. */
html:has(.mobile-nav.is-open) .mobile-cta { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--page); }

/* While a dialog is open it is the second glass layer on phones, so the bar gives up its blur too. */
html:has(dialog[open]) .mobile-cta { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--page); }

/* Phone menu buttons: ".mobile-nav a" outranks ".btn" (left aligned, weight 500, square corners).
   Put the button back: centred label, weight 600, pill, the button's own padding. */
.mobile-nav a.btn { justify-content: center; font-weight: 600; border-radius: var(--r-pill); padding: 12px 22px; }

/* ============================================================ Ghost button (the dialog's "Fechar") */
/* No fill at rest; the glass capsule of the nav links appears under it on hover and on press. */
.btn-ghost { isolation: isolate; }
.btn-ghost::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), var(--g-pill);
  box-shadow: var(--g-pill-edge), 0 0 0 1px var(--g-sec-line);
  opacity: 0; transform: scale(0.96); transition: opacity 200ms var(--g-ease), transform 200ms var(--g-ease);
}
.btn-ghost:active::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { color: var(--text); }
  .btn-ghost:hover::before { opacity: 1; transform: none; }
}

/* ============================================================ Price toggle (monthly / 12 months) */
/* The theme switch, larger: a clear glass track and a gold glass thumb that slides under the chosen
   option. The thumb sits 1 px outside its segment on every side, like the switch's, so its gold line
   frames the label. Markup, ids, aria-pressed and the keyboard (Tab, Enter, Space) are unchanged. */
.seg-toggle {
  isolation: isolate;
  background-color: var(--g-sec); border-color: var(--g-sec-line);
  box-shadow: var(--g-sec-edge), var(--g-sec-drop);
}
.seg-toggle::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--g-sec-sheen) 0%, rgba(255, 255, 255, 0) 56%);
  opacity: 0.85; transition: opacity 220ms var(--g-ease);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .seg-toggle { -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
  .seg-toggle:hover::before { opacity: 1; }
}
.seg-toggle__thumb {
  top: 3px; bottom: 3px; left: 3px; width: calc((100% - 8px) / var(--n, 2) + 2px);
  border: 1px solid var(--g-pri-line);
  background-color: var(--g-pri-mid);
  background-image: linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%);
  box-shadow: var(--g-pri-edge), var(--g-pri-drop);
  transform: translateX(calc((100% - 2px) * var(--i, 0)));
  transition: transform 200ms var(--g-ease);
}
.seg-toggle__thumb::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--g-pri-sheen) 0%, rgba(255, 255, 255, 0) 56%); opacity: 0.85;
}
.seg-toggle button { color: var(--text-2); transition: color 200ms ease, transform 140ms var(--g-ease); -webkit-tap-highlight-color: transparent; }
.seg-toggle button:active { transform: scale(0.97); }
/* The chosen label sits on the gold thumb. Its base is declared as the brand gold, clipped to the
   glyphs (so nothing extra paints: the text covers it). The contrast check then reads the real base,
   dark text on gold, in both themes. */
.seg-toggle button[aria-pressed="true"] {
  color: var(--on-brand); cursor: default;
  background-color: var(--brand); -webkit-background-clip: text; background-clip: text;
}
@media (hover: hover) and (pointer: fine) {
  .seg-toggle button[aria-pressed="false"]:hover { color: var(--text); }
}
.seg-toggle button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-pill); }

/* ============================================================ Calculator controls (/quanto-custa/) */
/* Plan picker: the same track; the checked plan turns to gold glass (a crossfade, not a slide: the
   three options are real radio buttons with their own labels). */
.qc-seg {
  isolation: isolate;
  background-color: var(--g-sec); border-color: var(--g-sec-line);
  box-shadow: var(--g-sec-edge), var(--g-sec-drop);
}
.qc-seg label { position: relative; isolation: isolate; transition: color 200ms ease, transform 140ms var(--g-ease); -webkit-tap-highlight-color: transparent; }
.qc-seg label::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--g-pri-line);
  background: linear-gradient(180deg, var(--g-pri-sheen) 0%, rgba(255, 255, 255, 0) 56%),
              linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%);
  box-shadow: var(--g-pri-edge), var(--g-pri-drop);
  opacity: 0; transform: scale(0.96); transition: opacity 200ms var(--g-ease), transform 200ms var(--g-ease);
}
.qc-seg input:checked + label { background-color: var(--brand); -webkit-background-clip: text; background-clip: text; color: var(--on-brand); border-color: transparent; box-shadow: none; }
.qc-seg input:checked + label::before { opacity: 1; transform: none; }
.qc-seg label:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .qc-seg input:not(:checked) + label:hover { color: var(--text); } }
/* The other plans keep their own colour (hover shows the glass light instead); the chosen one sits on
   the gold glass in --on-brand, because Premium gold on gold would not read. */
.qc-seg input:not(:checked) + label.plan-c-basic { color: var(--plan-basic); }
.qc-seg input:not(:checked) + label.plan-c-premium { color: var(--plan-premium); }
.qc-seg input:not(:checked) + label.plan-c-enterprise { color: var(--plan-enterprise); }
.qc-seg input:focus-visible + label { outline-offset: 3px; }

/* Slider: a glass groove filled in gold up to the value (--fill, set by quanto-custa.js) and a gold
   glass thumb. Keyboard and the 44 px target unchanged. */
.qc-range input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 44px; --fill: 40%; }
.qc-range input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill); border: 1px solid var(--g-sec-line);
  background: linear-gradient(90deg, var(--brand) 0, var(--brand) var(--fill), transparent var(--fill)), var(--g-sec);
  box-shadow: inset 0 1px 2px rgba(30, 24, 12, 0.14);
}
.qc-range input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-pill); border: 1px solid var(--g-sec-line); background: var(--g-sec);
  box-shadow: inset 0 1px 2px rgba(30, 24, 12, 0.14);
}
.qc-range input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--brand); }
.qc-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  border: 1px solid var(--g-pri-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%),
              linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%), var(--page);
  box-shadow: var(--g-pri-edge), var(--g-pri-drop);
  transition: transform 140ms var(--g-ease);
}
.qc-range input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--g-pri-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%),
              linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%), var(--page);
  box-shadow: var(--g-pri-edge), var(--g-pri-drop);
}
.qc-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.92); }
.qc-range input[type="range"]:focus-visible { outline: none; }
.qc-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--g-pri-edge), 0 0 0 2px var(--page), 0 0 0 4px var(--focus); }
.qc-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--g-pri-edge), 0 0 0 2px var(--page), 0 0 0 4px var(--focus); }

/* ============================================================ Scene buttons (home, /demonstracao/) */
/* Clear glass chips; the chosen scene keeps its gold line and its icon tile turns to gold glass. */
.scene-btn {
  position: relative; isolation: isolate;
  background-color: var(--g-sec); border-color: var(--g-sec-line);
  box-shadow: var(--g-sec-edge), var(--g-sec-drop);
  transition: border-color 200ms ease, color 200ms ease, transform 140ms var(--g-ease);
  -webkit-tap-highlight-color: transparent;
}
.scene-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--g-sec-sheen) 0%, rgba(255, 255, 255, 0) 56%);
  opacity: 0.85; transition: opacity 220ms var(--g-ease);
}
.scene-btn[aria-pressed="true"] { border-color: var(--brand-ink); }
.scene-btn[aria-pressed="true"] .icon-tile {
  color: var(--on-brand); border-color: var(--g-pri-line);
  background: linear-gradient(180deg, var(--g-pri-sheen) 0%, rgba(255, 255, 255, 0) 56%),
              linear-gradient(180deg, var(--g-pri-top) 0%, var(--g-pri-mid) 55%, var(--g-pri-bot) 100%);
  box-shadow: var(--g-pri-edge);
}
@media (hover: hover) and (pointer: fine) {
  .scene-btn:hover::before { opacity: 1; }
  .scene-btn[aria-pressed="false"]:hover { border-color: var(--text-3); color: var(--text); }
}

/* ============================================================ Pointer light on the glass controls */
/* The buttons' behaviour (owner, 2026-10-04: "feedback on one component applies to every instance"):
   the glass.js light inside each segment of the price toggle and the theme switch, each plan of the
   calculator and each demo scene; gold light on the chosen gold segment, the clear light elsewhere.
   Hover, real pointers only: the light follows, the sheen brightens, the gold piece lifts 1 px.
   Press: the gold piece scales like a pressed button; on touch the light lands under the finger.
   The thumbs keep their slide on `transform`; lift and press use the separate `translate` and
   `scale` properties, so the three compose without fighting. */
.seg-toggle button, .theme-switch button, .qc-seg label, .scene-btn { --g-glint: var(--g-ctl-sec-glint); }
.seg-toggle button[aria-pressed="true"], .qc-seg input:checked + label,
:root:not([data-theme="dark"]) .theme-switch [data-theme-set="light"],
:root[data-theme="dark"] .theme-switch [data-theme-set="dark"] { --g-glint: var(--g-ctl-pri-glint); }
/* Sized to the segment, so it reads as a soft spot under the pointer and not as a flat band. */
/* A flat ellipse on the long segments, so it fades out before the track's top and bottom edge
   instead of being cut into a hard band. */
.theme-switch button { --g-glint-d: 60px; --g-glint-h: 52px; }
.seg-toggle button, .qc-seg label { --g-glint-d: 150px; --g-glint-h: 64px; }
.scene-btn { --g-glint-d: 140px; --g-glint-h: 72px; }
/* The light fills the shape the eye sees: the gold thumb (1 px outside the chosen segment) or, on the
   other segments, the track up to its inner edge, so no hard band shows inside the clear track. */
.seg-toggle button > .glint, .qc-seg label > .glint { inset: -1px; }
.seg-toggle button[aria-pressed="false"] > .glint { inset: -3px 0; }
.seg-toggle button[aria-pressed="false"]:first-of-type > .glint { inset: -3px 0 -3px -3px; }
.seg-toggle button[aria-pressed="false"]:last-of-type > .glint { inset: -3px -3px -3px 0; }
.qc-seg input:not(:checked) + label > .glint { inset: -3px -2px; }
.qc-seg input:first-of-type:not(:checked) + label > .glint { inset: -3px -2px -3px -3px; }
.qc-seg input:last-of-type:not(:checked) + label > .glint { inset: -3px -3px -3px -2px; }
.theme-switch button > .glint { inset: -2px; }

.seg-toggle__thumb, .theme-switch__thumb {
  transition: transform 200ms var(--g-ease), translate 200ms var(--g-ease), scale 140ms var(--g-ease);
}
.seg-toggle__thumb::before, .theme-switch__thumb::before { transition: opacity 220ms var(--g-ease); }

/* Plan picker: the toggle's track sheen. */
.qc-seg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--g-sec-sheen) 0%, rgba(255, 255, 255, 0) 56%);
  opacity: 0.85; transition: opacity 220ms var(--g-ease);
}
.qc-seg label { transition: color 200ms ease, transform 140ms var(--g-ease), translate 200ms var(--g-ease); }
.scene-btn { transition: border-color 200ms ease, color 200ms ease, transform 200ms var(--g-ease); }

@media (hover: hover) and (pointer: fine) {
  .seg-toggle button:hover > .glint::before, .theme-switch button:hover > .glint::before,
  .qc-seg label:hover > .glint::before, .scene-btn:hover > .glint::before { opacity: 1; }
  .seg-toggle:hover::before, .theme-switch:hover::before, .qc-seg:hover::before { opacity: 1; }
  /* The chosen gold piece under the pointer: lift and a brighter sheen, like .btn-primary. */
  .seg-toggle:has(button[aria-pressed="true"]:hover) .seg-toggle__thumb,
  :root:not([data-theme="dark"]) .theme-switch:has([data-theme-set="light"]:hover) .theme-switch__thumb,
  :root[data-theme="dark"] .theme-switch:has([data-theme-set="dark"]:hover) .theme-switch__thumb { translate: 0 -1px; }
  .seg-toggle:has(button[aria-pressed="true"]:hover) .seg-toggle__thumb::before,
  :root:not([data-theme="dark"]) .theme-switch:has([data-theme-set="light"]:hover) .theme-switch__thumb::before,
  :root[data-theme="dark"] .theme-switch:has([data-theme-set="dark"]:hover) .theme-switch__thumb::before { opacity: 1; }
  .qc-seg input:checked + label:hover { translate: 0 -1px; }
  .scene-btn:hover { transform: translateY(-1px); }
  .scene-btn:active { transform: scale(0.97); }
}
/* Press, every pointer: the gold piece gives like a pressed button; the light shows under the finger. */
.seg-toggle:has(button[aria-pressed="true"]:active) .seg-toggle__thumb,
:root:not([data-theme="dark"]) .theme-switch:has([data-theme-set="light"]:active) .theme-switch__thumb,
:root[data-theme="dark"] .theme-switch:has([data-theme-set="dark"]:active) .theme-switch__thumb { scale: 0.97; }
.seg-toggle button:active > .glint::before, .theme-switch button:active > .glint::before,
.qc-seg label:active > .glint::before, .scene-btn:active > .glint::before { opacity: 1; transition-duration: 120ms; }

/* ============================================================ Reduced motion: static glass */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .menu-btn,
  .btn-primary::before, .btn-secondary::before, .menu-btn::before,
  .nav > a::before, .nav-dd > button::before, .dd-panel a::before, .mobile-nav a::before { transition: none; }
  .btn-primary:hover, .btn-secondary:hover, .btn-primary:active, .btn-secondary:active, .menu-btn:active { transform: none; }
  .nav > a::before, .nav-dd > button::before { transform: none; }
  .glint { display: none; }
  .btn-ghost::before, .seg-toggle::before, .seg-toggle__thumb, .seg-toggle button, .qc-seg label, .qc-seg label::before,
  .scene-btn, .scene-btn::before, .scene-btn .icon-tile { transition: none; }
  .seg-toggle button:active, .qc-seg label:active, .scene-btn:active, .btn-ghost::before { transform: none; }
  .qc-range input[type="range"]::-webkit-slider-thumb { transition: none; }
  .qc-range input[type="range"]:active::-webkit-slider-thumb { transform: none; }
  .seg-toggle__thumb::before, .theme-switch__thumb, .theme-switch__thumb::before, .qc-seg::before { transition: none; }
  .seg-toggle__thumb, .theme-switch__thumb, .qc-seg label { translate: none !important; scale: none !important; }
  .scene-btn:hover, .scene-btn:active { transform: none; }
}