/* ==========================================================================
   Treatment 4 — Glass
   Apple Liquid Glass, read for a money app: frosted, translucent surfaces
   with a specular edge over a slow colour field; controls float; the tab
   dock carries a lens that slides to the active item. Applies under
   .h-app[data-treatment="glass"].
   Loosened upstream rules, named where they happen: (1) gradients as the
   field behind glass, (2) blur, translucency and shadow on every surface,
   (3) motion above the cap for the lens, the sheet and the field's drift.
   Falls back to solid panels where backdrop-filter is unsupported.
   Reduced motion freezes the field and removes the transitions.
   ========================================================================== */

.h-app[data-treatment="glass"] {
  --g-canvas: #eef1f7;
  --g-fill: rgba(255, 255, 255, 0.52);
  --g-fill-strong: rgba(255, 255, 255, 0.72);
  --g-fill-press: rgba(255, 255, 255, 0.66);
  --g-edge: rgba(255, 255, 255, 0.75);
  --g-edge-soft: rgba(255, 255, 255, 0.45);
  --g-highlight: rgba(255, 255, 255, 0.9);
  --g-lowlight: rgba(10, 11, 13, 0.06);
  --g-shadow: rgba(20, 30, 60, 0.28);
  --g-blur: 22px;
  --g-lens: rgba(255, 255, 255, 0.78);
  --g-blob-1: rgba(0, 82, 255, 0.34);
  --g-blob-2: rgba(124, 198, 255, 0.55);
  --g-blob-3: rgba(185, 168, 255, 0.5);
  --g-blob-4: rgba(255, 215, 181, 0.6);
  --g-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --g-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --h-canvas: var(--g-canvas);
  --h-panel: transparent;
  --h-hairline: rgba(10, 11, 13, 0.08);
  --h-well: rgba(255, 255, 255, 0.5);
  --h-well-press: rgba(255, 255, 255, 0.7);
  --h-r-control: 16px;
  --h-r-panel: 24px;
  --h-r-sheet: 32px;
  --h-blue-tint: rgba(0, 82, 255, 0.12);
  font-feature-settings: "ss01", "cv11", "tnum";
  background: var(--g-canvas);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .h-app[data-treatment="glass"] {
    --g-canvas: #06080e;
    --g-fill: rgba(28, 32, 44, 0.5);
    --g-fill-strong: rgba(34, 38, 52, 0.72);
    --g-fill-press: rgba(44, 48, 64, 0.7);
    --g-edge: rgba(255, 255, 255, 0.16);
    --g-edge-soft: rgba(255, 255, 255, 0.1);
    --g-highlight: rgba(255, 255, 255, 0.22);
    --g-lowlight: rgba(0, 0, 0, 0.3);
    --g-shadow: rgba(0, 0, 0, 0.6);
    --g-lens: rgba(255, 255, 255, 0.16);
    --g-blob-1: rgba(0, 82, 255, 0.45);
    --g-blob-2: rgba(28, 120, 220, 0.35);
    --g-blob-3: rgba(120, 90, 255, 0.35);
    --g-blob-4: rgba(0, 190, 200, 0.22);
    --h-hairline: rgba(255, 255, 255, 0.08);
    --h-well: rgba(255, 255, 255, 0.08);
    --h-well-press: rgba(255, 255, 255, 0.14);
  }
}
:root[data-theme="dark"] .h-app[data-treatment="glass"] {
  --g-canvas: #06080e;
  --g-fill: rgba(28, 32, 44, 0.5);
  --g-fill-strong: rgba(34, 38, 52, 0.72);
  --g-fill-press: rgba(44, 48, 64, 0.7);
  --g-edge: rgba(255, 255, 255, 0.16);
  --g-edge-soft: rgba(255, 255, 255, 0.1);
  --g-highlight: rgba(255, 255, 255, 0.22);
  --g-lowlight: rgba(0, 0, 0, 0.3);
  --g-shadow: rgba(0, 0, 0, 0.6);
  --g-lens: rgba(255, 255, 255, 0.16);
  --g-blob-1: rgba(0, 82, 255, 0.45);
  --g-blob-2: rgba(28, 120, 220, 0.35);
  --g-blob-3: rgba(120, 90, 255, 0.35);
  --g-blob-4: rgba(0, 190, 200, 0.22);
  --h-hairline: rgba(255, 255, 255, 0.08);
  --h-well: rgba(255, 255, 255, 0.08);
  --h-well-press: rgba(255, 255, 255, 0.14);
}

/* ---------- The field: what the glass refracts --------------------------- */
.g-mesh { display: none; }
.h-app[data-treatment="glass"] .g-mesh {
  /* Loosened rule 1: gradients. They live only here, behind the glass. */
  display: block; position: absolute; inset: -20%; z-index: 0; pointer-events: none; overflow: hidden;
  background: var(--g-canvas);
}
.h-app[data-treatment="glass"] .g-mesh i {
  position: absolute; border-radius: 50%; filter: blur(48px); will-change: transform;
}
.h-app[data-treatment="glass"] .g-mesh i:nth-child(1) { width: 70%; height: 46%; left: -6%; top: 6%; background: var(--g-blob-1); animation: g-drift-a 26s ease-in-out infinite alternate; }
.h-app[data-treatment="glass"] .g-mesh i:nth-child(2) { width: 60%; height: 40%; right: -8%; top: 22%; background: var(--g-blob-2); animation: g-drift-b 22s ease-in-out infinite alternate; }
.h-app[data-treatment="glass"] .g-mesh i:nth-child(3) { width: 64%; height: 38%; left: 10%; bottom: 8%; background: var(--g-blob-3); animation: g-drift-c 30s ease-in-out infinite alternate; }
.h-app[data-treatment="glass"] .g-mesh i:nth-child(4) { width: 40%; height: 26%; right: 6%; bottom: 20%; background: var(--g-blob-4); animation: g-drift-a 34s ease-in-out infinite alternate-reverse; }
@keyframes g-drift-a { to { transform: translate(6%, 9%) scale(1.08); } }
@keyframes g-drift-b { to { transform: translate(-8%, 6%) scale(0.94); } }
@keyframes g-drift-c { to { transform: translate(5%, -7%) scale(1.06); } }
/* Everything paints above the field: the view and the fixed layers are positioned, the mesh is not raised. */
.h-app[data-treatment="glass"] .h-view { position: relative; z-index: 1; }
.h-app[data-treatment="glass"] > .h-tabbar, .h-app[data-treatment="glass"] > #tabbar, .h-app[data-treatment="glass"] > .h-sheet-root, .h-app[data-treatment="glass"] > .h-toast-root, .h-app[data-treatment="glass"] .b-compact { z-index: 2; }
.h-app[data-treatment="glass"] > .h-sheet-root { z-index: 30; }
.h-app[data-treatment="glass"] > .h-toast-root { z-index: 40; }
.h-app[data-treatment="glass"] > .g-mesh { z-index: 0; }

/* ---------- Glass material ------------------------------------------------ */
.h-app[data-treatment="glass"] .h-panel,
.h-app[data-treatment="glass"] .h-tabbar,
.h-app[data-treatment="glass"] .h-sheet,
.h-app[data-treatment="glass"] .h-toast,
.h-app[data-treatment="glass"] .h-seg,
.h-app[data-treatment="glass"] .h-input,
.h-app[data-treatment="glass"] .x-card,
.h-app[data-treatment="glass"] .h-btn:not([data-variant="primary"]):not([data-variant="quiet"]),
.h-app[data-treatment="glass"] .h-chip {
  /* Loosened rule 2: blur, translucency and a shadow. This is the material. */
  background: var(--g-fill);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(180%);
  backdrop-filter: blur(var(--g-blur)) saturate(180%);
  border: 1px solid var(--g-edge-soft);
  box-shadow: inset 0 1px 0 var(--g-highlight), inset 0 -1px 0 var(--g-lowlight), 0 18px 40px -22px var(--g-shadow);
}
.h-app[data-treatment="glass"] .h-panel { position: relative; overflow: hidden; border-radius: var(--h-r-panel); }
.h-app[data-treatment="glass"] .h-panel::before,
.h-app[data-treatment="glass"] .x-card::before {
  /* the specular: a soft light catch in the top corner */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 60% at 12% 0%, rgba(255, 255, 255, 0.55), transparent 55%);
  mix-blend-mode: soft-light;
}
.h-app[data-treatment="glass"] .h-panel > .h-rows > .h-row { padding-inline: var(--h-s-5); }
.h-app[data-treatment="glass"] .h-panel > .h-rows > * + *::before { left: calc(var(--h-s-5) + 2.5rem + var(--h-s-3)); border-top-color: var(--h-hairline); }
.h-app[data-treatment="glass"] .h-panel > .h-rows[data-media="none"] > * + *::before { left: var(--h-s-5); }
.h-app[data-treatment="glass"] .h-panel[data-inset] { padding-inline: var(--h-s-5); }
.h-app[data-treatment="glass"] button.h-row:active { background: var(--g-fill-press); }
.h-app[data-treatment="glass"] .h-row-media { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 var(--g-highlight), 0 4px 10px -6px var(--g-shadow); }
:root[data-theme="dark"] .h-app[data-treatment="glass"] .h-row-media { background: rgba(255, 255, 255, 0.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .h-app[data-treatment="glass"] .h-row-media { background: rgba(255, 255, 255, 0.1); } }
.h-app[data-treatment="glass"] .h-row-media[data-tone="ink"] { background: var(--h-ink); }
.h-app[data-treatment="glass"] .h-row-title { font-weight: 600; }
.h-app[data-treatment="glass"] .h-row-amount { font-weight: 600; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .h-app[data-treatment="glass"] { --g-fill: rgba(255, 255, 255, 0.92); --g-fill-strong: #fff; }
}

/* ---------- Hero on the field ---------------------------------------------- */
.h-app[data-treatment="glass"] .h-band { padding-bottom: var(--h-s-2); }
.h-app[data-treatment="glass"] .h-surface { padding-top: var(--h-s-4); }
.h-app[data-treatment="glass"] .h-hero { padding-block: var(--h-s-3) var(--h-s-2); gap: var(--h-s-2); transform: translateY(calc(var(--g-scroll, 0) * 0.32px)); opacity: calc(1 - var(--g-scroll, 0) / 300); }
.h-app[data-treatment="glass"] .h-hero .h-label { font-size: var(--h-t-secondary); font-weight: 500; }
.h-app[data-treatment="glass"] .h-hero-amount {
  font-size: 4.25rem; line-height: 1; letter-spacing: -0.05em; font-weight: 600;
  display: inline-flex; align-items: flex-start; gap: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 30px rgba(20, 30, 60, 0.18);
}
:root[data-theme="dark"] .h-app[data-treatment="glass"] .h-hero-amount { text-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .h-app[data-treatment="glass"] .h-hero-amount { text-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); } }
.h-app[data-treatment="glass"] .h-hero-amount[data-size="long"] { font-size: 2.625rem; }
.h-app[data-treatment="glass"] .h-hero-amount .h-cents { font-size: 0.4em; font-weight: 500; color: var(--h-muted); line-height: 1; margin-top: 0.26em; }
.h-app[data-treatment="glass"] .h-band .h-hero-amount { view-transition-name: balance; }
.h-app[data-treatment="glass"] .h-hero-meta { min-height: 1.75rem; font-weight: 500; }
.h-app[data-treatment="glass"] .h-peers {
  border: 0; padding: var(--h-s-4) var(--h-s-5); border-radius: var(--h-r-panel);
  background: var(--g-fill); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(180%); backdrop-filter: blur(var(--g-blur)) saturate(180%);
  border: 1px solid var(--g-edge-soft);
  box-shadow: inset 0 1px 0 var(--g-highlight), inset 0 -1px 0 var(--g-lowlight), 0 18px 40px -22px var(--g-shadow);
}
.h-app[data-treatment="glass"] .h-peer-amount { font-size: 1.5rem; font-weight: 600; }
.h-app[data-treatment="glass"] .h-mark { background: var(--h-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 10px -4px rgba(0, 82, 255, 0.6); border-radius: 5px; }
.h-app[data-treatment="glass"] .h-wordmark .h-headline { font-weight: 700; }

/* ---------- Buttons: glass, with the one blue as tinted glass ------------- */
.h-app[data-treatment="glass"] .h-btn {
  border-radius: var(--h-r-pill); font-weight: 600;
  transition: transform 160ms var(--g-ease-spring), background-color 160ms var(--g-ease), box-shadow 160ms var(--g-ease), filter 160ms;
}
.h-app[data-treatment="glass"] .h-btn:active { transform: scale(0.96); filter: brightness(1.04); }
.h-app[data-treatment="glass"] .h-btn:not([data-variant="primary"]):not([data-variant="quiet"]) { --btn-bg: var(--g-fill-strong); --btn-bg-press: var(--g-fill-press); color: var(--h-ink); }
.h-app[data-treatment="glass"] .h-btn[data-variant="primary"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02) 55%), var(--h-blue);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(0, 30, 120, 0.35), 0 14px 30px -12px rgba(0, 82, 255, 0.7);
}
.h-app[data-treatment="glass"] .h-btn[data-variant="primary"]:active { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%), var(--h-blue-press); }
.h-app[data-treatment="glass"] .h-btn[data-size="cta"] { --btn-h: 3.5rem; }
.h-app[data-treatment="glass"] .h-btn[data-variant="inverse"] { background: var(--h-ink); color: var(--h-canvas); backdrop-filter: none; }
.h-app[data-treatment="glass"] .h-btn[data-variant="destructive"] { color: var(--h-loss); }
.h-app[data-treatment="glass"] .h-chip { border-radius: var(--h-r-pill); }
.h-app[data-treatment="glass"] .h-chip[aria-pressed="true"], .h-app[data-treatment="glass"] .h-chip[data-selected] { background: var(--h-ink); color: var(--h-canvas); }
.h-app[data-treatment="glass"] .h-iconbtn { -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur)); background: var(--g-fill); border: 1px solid var(--g-edge-soft); box-shadow: inset 0 1px 0 var(--g-highlight), 0 8px 20px -12px var(--g-shadow); }
.h-app[data-treatment="glass"] .h-iconbtn:active { background: var(--g-fill-press); }
.h-app[data-treatment="glass"] .h-seg { border-radius: var(--h-r-pill); padding: 4px; }
.h-app[data-treatment="glass"] .h-seg > button { border-radius: var(--h-r-pill); }
.h-app[data-treatment="glass"] .h-seg > button[aria-selected="true"] { background: var(--g-lens); box-shadow: inset 0 1px 0 var(--g-highlight), 0 4px 12px -6px var(--g-shadow); }
.h-app[data-treatment="glass"] .h-input { border-radius: var(--h-r-control); }
.h-app[data-treatment="glass"] .h-switch { background: rgba(10, 11, 13, 0.16); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
.h-app[data-treatment="glass"] .h-switch[aria-checked="true"] { background: var(--h-blue); }
.h-app[data-treatment="glass"] .h-switch::after { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

/* ---------- Section heads, type ------------------------------------------ */
.h-app[data-treatment="glass"] .h-section-head { padding-inline: var(--h-s-2); }
.h-app[data-treatment="glass"] .h-section-head .h-headline { font-size: var(--h-t-label); letter-spacing: var(--h-k-label); text-transform: uppercase; font-weight: 700; color: var(--h-muted); }
.h-app[data-treatment="glass"] .h-large-title { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.035em; }
.h-app[data-treatment="glass"] .h-eyebrow { color: var(--h-muted); }
.h-app[data-treatment="glass"] .h-day-head { padding-inline: var(--h-s-2); }

/* ---------- Tab dock: glass capsule with a sliding lens ------------------ */
.h-app[data-treatment="glass"] .h-tabbar {
  left: var(--h-gutter); right: var(--h-gutter); bottom: calc(var(--h-s-4) + var(--h-safe-bottom, 0px));
  min-height: 4rem; padding: 0.375rem; padding-bottom: 0.375rem;
  border-radius: var(--h-r-pill); overflow: hidden; isolation: isolate;
  --g-blur: 28px;
}
.h-app[data-treatment="glass"] .h-tabbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 80% at 20% 0%, rgba(255, 255, 255, 0.5), transparent 60%);
  mix-blend-mode: soft-light;
}
.h-app[data-treatment="glass"] .g-lens {
  position: absolute; top: 0.375rem; bottom: 0.375rem; left: 0; width: 0; z-index: 0;
  border-radius: var(--h-r-pill); background: var(--g-lens);
  border: 1px solid var(--g-edge); box-shadow: inset 0 1px 0 var(--g-highlight), inset 0 -1px 0 var(--g-lowlight), 0 6px 16px -8px var(--g-shadow);
  transition: transform 420ms var(--g-ease-spring), width 420ms var(--g-ease-spring);
}
.h-app[data-treatment="glass"] .h-tab { position: relative; z-index: 1; min-height: 3.25rem; border-radius: var(--h-r-pill); font-weight: 700; gap: 3px; background: transparent !important; }
.h-app[data-treatment="glass"] .h-tab[aria-current="page"] { color: var(--h-blue); }
.h-app[data-treatment="glass"] .h-view { padding-bottom: calc(var(--h-tabbar) + var(--h-s-12)); }
.h-app[data-treatment="glass"] .h-toast-root { bottom: calc(var(--h-tabbar) + var(--h-s-10) + var(--h-safe-bottom, 0px)); }
.h-app[data-treatment="glass"] .h-toast { color: var(--h-ink); border-radius: var(--h-r-pill); --g-blur: 28px; }

/* ---------- Sheet and scrim ------------------------------------------------ */
.h-app[data-treatment="glass"] .h-scrim { background: rgba(10, 11, 13, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition-duration: 320ms; }
.h-app[data-treatment="glass"] .h-sheet { --g-blur: 30px; background: var(--g-fill-strong); border-radius: var(--h-r-sheet) var(--h-r-sheet) 0 0; transition: transform 480ms var(--g-ease-spring); box-shadow: inset 0 1px 0 var(--g-highlight), 0 -12px 50px -16px var(--g-shadow); }
.h-app[data-treatment="glass"] .h-grabber { background: rgba(10, 11, 13, 0.18); }
.h-app[data-treatment="glass"] .h-sheet .h-facts > * + * { border-top-color: var(--h-hairline); }

/* ---------- Result: a glass orb ------------------------------------------- */
.h-app[data-treatment="glass"] .h-result-mark {
  width: 6rem; height: 6rem; color: #fff;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 34%, rgba(255, 255, 255, 0) 60%), var(--h-blue);
  box-shadow: inset -8px -10px 22px rgba(0, 20, 90, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 26px 50px -16px rgba(0, 82, 255, 0.6);
  animation: g-orb 620ms var(--g-ease-spring) both;
}
.h-app[data-treatment="glass"] .h-result-mark[data-tone="loss"] { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 34%, rgba(255, 255, 255, 0) 60%), var(--h-loss); box-shadow: inset -8px -10px 22px rgba(90, 0, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 26px 50px -16px rgba(194, 49, 61, 0.6); }
.h-app[data-treatment="glass"] .h-result-mark[data-tone="attention"] { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.25) 34%, rgba(255, 255, 255, 0) 60%), var(--h-attention); box-shadow: inset -8px -10px 22px rgba(80, 40, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 26px 50px -16px rgba(154, 91, 0, 0.6); }
.h-app[data-treatment="glass"] .h-result-mark svg { width: 2.75rem; height: 2.75rem; }
.h-app[data-treatment="glass"] .h-result-mark svg path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: g-draw 520ms 220ms var(--g-ease) forwards; }
.h-app[data-treatment="glass"] .h-result .h-title { font-size: 1.625rem; letter-spacing: -0.03em; }
@keyframes g-orb { from { transform: scale(0.6) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes g-draw { to { stroke-dashoffset: 0; } }

/* ---------- Explore cards as glass, the savings card as blue glass ------- */
.h-app[data-treatment="glass"] .x-card { position: relative; overflow: hidden; border-radius: var(--h-r-panel); transition: transform 200ms var(--g-ease-spring); }
.h-app[data-treatment="glass"] .x-card:active { transform: scale(0.97); }
.h-app[data-treatment="glass"] .x-card[data-tone] { background: var(--g-fill); }
.h-app[data-treatment="glass"] .x-card[data-tone="blue"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%), rgba(0, 82, 255, 0.86); color: #fff; border-color: rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 20px 40px -16px rgba(0, 82, 255, 0.6); }
.h-app[data-treatment="glass"] .x-card[data-tone="blue"] .x-card-desc { opacity: 0.85; }
.h-app[data-treatment="glass"] .x-card[data-tone="ink"] { background: rgba(10, 11, 13, 0.82); color: #fff; }
.h-app[data-treatment="glass"] .x-card-icon { background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ---------- Numpad keys as soft glass on press ---------------------------- */
.h-app[data-treatment="glass"] .h-key { border-radius: var(--h-r-pill); }
.h-app[data-treatment="glass"] .h-key:active { background: var(--g-fill-strong); box-shadow: inset 0 1px 0 var(--g-highlight); }
.h-app[data-treatment="glass"] .h-amount-display { text-shadow: 0 10px 28px rgba(20, 30, 60, 0.15); }

/* ---------- Skeleton on glass ---------------------------------------------- */
.h-app[data-treatment="glass"] .h-skeleton { background: rgba(10, 11, 13, 0.08); }

/* ---------- Push with parallax (shares the base keyframes' shape) ---------- */
:root[data-treatment="glass"]::view-transition-old(root), :root[data-treatment="glass"]::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
:root[data-treatment="glass"]::view-transition-new(root) { animation-name: g-push-in; }
:root[data-treatment="glass"]::view-transition-old(root) { animation-name: g-push-under; }
:root[data-treatment="glass"][data-nav="back"]::view-transition-new(root) { animation-name: g-pop-in; }
:root[data-treatment="glass"][data-nav="back"]::view-transition-old(root) { animation-name: g-pop-out; }
:root[data-treatment="glass"][data-nav="tab"]::view-transition-new(root) { animation-name: g-fade-in; animation-duration: 220ms; }
:root[data-treatment="glass"][data-nav="tab"]::view-transition-old(root) { animation-name: g-fade-out; animation-duration: 220ms; }
@keyframes g-push-in { from { transform: translateX(100%) scale(0.98); filter: blur(2px); } to { transform: none; filter: blur(0); } }
@keyframes g-push-under { to { transform: translateX(-24%) scale(0.96); filter: blur(4px) brightness(0.9); } }
@keyframes g-pop-in { from { transform: translateX(-24%) scale(0.96); filter: blur(4px) brightness(0.9); } to { transform: none; filter: none; } }
@keyframes g-pop-out { to { transform: translateX(100%) scale(0.98); filter: blur(2px); } }
@keyframes g-fade-in { from { opacity: 0; transform: scale(0.985); } }
@keyframes g-fade-out { to { opacity: 0; transform: scale(1.01); } }

/* ---------- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .h-app[data-treatment="glass"] .g-mesh i { animation: none; }
  .h-app[data-treatment="glass"] .h-hero { transform: none; opacity: 1; }
  .h-app[data-treatment="glass"] .g-lens, .h-app[data-treatment="glass"] .h-btn, .h-app[data-treatment="glass"] .x-card { transition: none; }
  .h-app[data-treatment="glass"] .h-btn:active, .h-app[data-treatment="glass"] .x-card:active { transform: none; }
  .h-app[data-treatment="glass"] .h-result-mark, .h-app[data-treatment="glass"] .h-result-mark svg path { animation: none; stroke-dashoffset: 0; }
  :root[data-treatment="glass"]::view-transition-old(root), :root[data-treatment="glass"]::view-transition-new(root) { animation: none; }
}
:root[data-motion="reduce"] .h-app[data-treatment="glass"] .g-mesh i { animation: none; }
:root[data-motion="reduce"] .h-app[data-treatment="glass"] .h-hero { transform: none; opacity: 1; }
:root[data-motion="reduce"] .h-app[data-treatment="glass"] .g-lens, :root[data-motion="reduce"] .h-app[data-treatment="glass"] .h-btn, :root[data-motion="reduce"] .h-app[data-treatment="glass"] .x-card { transition: none; }
:root[data-motion="reduce"] .h-app[data-treatment="glass"] .h-result-mark, :root[data-motion="reduce"] .h-app[data-treatment="glass"] .h-result-mark svg path { animation: none; stroke-dashoffset: 0; }
:root[data-motion="reduce"][data-treatment="glass"]::view-transition-old(root), :root[data-motion="reduce"][data-treatment="glass"]::view-transition-new(root) { animation: none; }