/* ==========================================================================
   GaragemOS V2 — Liquid Glass
   Reflexos especulares, estados de rolagem, acessibilidade e fallbacks.
   Os tokens de cor ficam em variables.css.
   ========================================================================== */

/* Orbe de luz suave atrás das superfícies */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: clamp(200px, 34vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(56px);
  opacity: .2;
}
body::before {
  top: 16vh;
  left: -14vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 60%, transparent), transparent 70%);
}
body::after {
  top: 58vh;
  right: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  opacity: .14;
}

/* Reflexo superior nas cartas de vidro */
.card::after, .chart-card::after, .hero-card::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -80px;
  width: 190px;
  height: 190px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 70%);
}
[data-theme="dark"] .card::after,
[data-theme="dark"] .chart-card::after,
[data-theme="dark"] .hero-card::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .1), transparent 70%);
}

/* Barra superior: flutuante e com brilho assim que a página rola */
.topbar.is-scrolled {
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
}
.topbar.is-scrolled::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, .3), transparent 42%, rgba(255, 255, 255, .14));
}

/* Microinterações */
.record-card, .link-card, .plan-card, .suggestion { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.record-card:hover, .plan-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised) }
.stat-card { transition: transform .18s ease, box-shadow .18s ease }
.stat-card:hover { transform: translateY(-2px) }

/* Acessibilidade: transparência reduzida usa superfícies opacas */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .topbar.is-scrolled, .bottom-nav, .card, .stat-card, .record-card, .notice-card,
  .chart-card, .link-card, .hero-card, .plan-card, .form-control, .filter-input,
  .icon-button, .button-secondary, .vehicle-switch select, .toast, .segmented, dialog.sheet-dialog {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface-solid);
  }
}

/* Navegadores sem backdrop-filter caem para superfícies sólidas */
@supports not (backdrop-filter: blur(1px)) {
  .topbar, .topbar.is-scrolled, .bottom-nav, .card, .stat-card, .record-card, .notice-card,
  .chart-card, .link-card, .hero-card, .plan-card, .form-control, .filter-input,
  .icon-button, .button-secondary, .vehicle-switch select, .toast, dialog.sheet-dialog {
    background: var(--surface-solid);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .record-card, .link-card, .plan-card, .stat-card, .hero-ring .ring-value { transition: none }
  .toast { animation: none }
}