/*
 * mygarage360 — Motion & atmosphere (refinement layer)
 * Load via tokens.css — does not change layout or hierarchy.
 */

:root {
  --mg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mg-page-dur: 0.45s;
  --mg-card-dur: 0.25s;
  --mg-ambient-opacity: 0.09;
}

/* JS ambient only on marketing/auth pages; app shell uses tokens body::before */
html.mg-app body::before {
  content: '';
}

html.mg-app .ambient-bg {
  display: none !important;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  opacity: var(--mg-ambient-opacity);
  transform: translate3d(0, 0, 0);
  contain: strict;
}

.ambient-orb--a {
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  top: -18%;
  left: 5%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.14) 0%, transparent 62%);
  animation: mg-drift-a 40s ease-in-out infinite;
}

.ambient-orb--b {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  top: 50%;
  right: -12%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.08) 0%, transparent 65%);
  animation: mg-drift-b 36s ease-in-out infinite;
}

@keyframes mg-drift-a {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.1; }
}

@keyframes mg-drift-b {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.09; }
}

/* Page enter disabled — full page loads must not fade (causes nav blink) */

/* ── Logo glow ────────────────────────────────────────────────────── */
html.mg-app .nl-mark::after,
html.mg-app .mg-ai-ico,
html.mg-app .mg-chip-expired,
html.mg-app .mg-linked-badge,
html.mg-app .dot.active {
  animation: none !important;
}
.nl-mark {
  position: relative;
  z-index: 1;
}

.nl-mark::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.35) 0%, transparent 70%);
  z-index: -1;
  opacity: 0.4;
  animation: mg-logo-breathe 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mg-logo-breathe {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.5; }
}

/* ── Card interaction system ──────────────────────────────────────── */
.app-card,
.card,
.status-card,
.feat,
.journey-item,
.assigned-qr-card,
.vcard,
.acard,
.stat,
.hero,
.sticker-top,
.modal-card,
.glass-modal,
.scan-bullets li,
.empty-card {
  transition:
    transform var(--mg-card-dur) var(--mg-ease-out),
    box-shadow var(--mg-card-dur) var(--mg-ease-out),
    border-color var(--mg-card-dur) var(--mg-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .app-card:hover,
  .card:hover:not(.login-card):not(:has(.pin-grid)),
  .status-card:hover,
  .feat:hover,
  .journey-item:hover,
  .assigned-qr-card:hover,
  .vcard:hover,
  .acard:hover,
  .stat:hover,
  .hero:hover,
  .sticker-top:hover,
  .modal-card:hover,
  .empty-card:hover {
    transform: translate3d(0, -4px, 0) scale(1.01);
    border-color: rgba(245, 166, 35, 0.22);
    box-shadow:
      var(--shadow-md),
      0 0 28px rgba(245, 166, 35, 0.08);
  }
}

.app-card:active,
.card:active,
.status-card:active,
.feat:active,
.vcard:active,
.acard:active {
  transform: translate3d(0, -1px, 0) scale(0.99);
  transition-duration: 0.12s;
}

/* ── Button enhancement ───────────────────────────────────────────── */
.glow-btn,
.btn-p,
.cta-p,
.vb-p,
.qr-print,
button.btn-p {
  background: linear-gradient(180deg, #ffb020 0%, #ff9800 48%, var(--amber-d) 100%) !important;
  box-shadow:
    var(--shadow-amber),
    0 0 20px rgba(255, 170, 0, 0.18) !important;
  transition:
    transform var(--mg-card-dur) var(--mg-ease-out),
    box-shadow var(--mg-card-dur) var(--mg-ease-out),
    filter var(--mg-card-dur) var(--mg-ease-out) !important;
}

@media (hover: hover) {
  .glow-btn:hover,
  .btn-p:hover:not(:disabled),
  .cta-p:hover,
  .vb-p:hover,
  .qr-print:hover {
    transform: translate3d(0, -2px, 0);
    filter: brightness(1.06);
    box-shadow:
      var(--shadow-amber-h),
      0 0 28px rgba(255, 170, 0, 0.28) !important;
  }
}

.glow-btn:active,
.btn-p:active:not(:disabled),
.cta-p:active,
.vb-p:active {
  transform: scale(0.97) !important;
}

/* ── Login / auth card glow ─────────────────────────────────────────── */
body:has(.pin-grid) .card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 166, 35, 0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Stagger reveal removed — opacity:0 on load caused dashboard blink */

/* ── QR Center — secure tech feel (Phase 2 lite) ──────────────────── */
.aq-thumb {
  position: relative;
}

.assigned-qr-card .aq-preview-btn:focus-visible .aq-thumb,
.assigned-qr-card:hover .aq-thumb {
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25), 0 0 18px rgba(245, 166, 35, 0.12);
}

.mg-qr-active {
  position: relative;
}

.mg-qr-active::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(34, 197, 94, 0.45);
  animation: mg-qr-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mg-qr-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

#sec-live-preview-box,
#st-live-preview-wrap {
  position: relative;
}

#sec-live-preview-box::before,
#st-live-preview-wrap::before {
  content: none;
}

/* ── Status pulses ──────────────────────────────────────────────────── */
.chip-verified .chip-dot,
.chip-active .chip-dot {
  animation: mg-status-pulse 2s ease-in-out infinite;
}

.chip-expired,
.chip-emergency {
  animation: mg-expired-pulse 2.8s ease-in-out infinite;
}

@keyframes mg-status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px transparent; }
}

@keyframes mg-expired-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12); }
}

/* ── Mechanic / AI chips ────────────────────────────────────────────── */
.preset,
.sw-pill,
.tab-btn,
.aq-sub,
.chip-btn {
  transition:
    transform 0.2s var(--mg-ease-out),
    border-color 0.2s var(--mg-ease-out),
    box-shadow 0.2s var(--mg-ease-out),
    background 0.2s var(--mg-ease-out);
}

@media (hover: hover) {
  .preset:hover,
  .sw-pill:hover,
  .tab-btn:hover,
  .aq-sub:hover,
  .chip-btn:hover {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }
}

.preset:active,
.sw-pill:active,
.chip-btn:active {
  transform: scale(0.98);
}

.mg-ai-orb {
  display: none !important;
}

/* ── Login ambient shapes ─────────────────────────────────────────── */
body.mg-login-page .ambient-bg .ambient-orb--a {
  animation-duration: 28s;
  opacity: 0.1;
}

body.mg-login-page .card {
  position: relative;
  overflow: visible;
}

body.mg-login-page .card {
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(245, 166, 35, 0.12);
}

/* ── Landing feature cards — animated border ──────────────────────── */
.feat.mg-feat-glow {
  position: relative;
  overflow: hidden;
}

.feat.mg-feat-glow:hover {
  border-color: rgba(245, 166, 35, 0.28);
}

/* ── QR scan frame & linked badge ───────────────────────────────── */
.mg-qr-scan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mg-qr-scan-frame {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  padding: 2px;
  border: 1px solid rgba(245, 166, 35, 0.22);
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.06);
}

.mg-qr-scan-frame::after {
  content: none;
}

.mg-linked-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  padding: 3px 8px;
  animation: mg-linked-glow 2.2s ease-in-out infinite;
}

@keyframes mg-linked-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.25); }
}

#sec-live-preview-box.mg-qr-preview-active,
#st-live-preview-wrap.mg-qr-preview-active {
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.2), 0 0 24px rgba(245, 166, 35, 0.1);
}

/* ── Status / home dashboard ──────────────────────────────────────── */
.mg-chip-expired {
  animation: mg-expired-pulse 2.8s ease-in-out infinite;
}

.mg-chip-engine {
  position: relative;
  overflow: hidden;
}

.mg-chip-engine {
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.mg-chip-warn {
  animation: mg-warn-pulse 3s ease-in-out infinite;
}

@keyframes mg-warn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
  50% { box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.1); }
}

.chip-alert.high,
.mg-alert-expired {
  animation: mg-expired-pulse 2.6s ease-in-out infinite;
}

.dot.active,
#park-dot.active,
#location-dot.active {
  animation: mg-dot-breathe 2s ease-in-out infinite;
}

@keyframes mg-dot-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.15); }
}

.scan-bell.mg-has-alerts::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--s2);
  animation: mg-notif-breathe 1.8s ease-in-out infinite;
}

@keyframes mg-notif-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.75; }
}

/* ── Mechanic AI panel ────────────────────────────────────────────── */
.mg-assistant-panel {
  border-color: rgba(245, 166, 35, 0.18);
}

.mg-ai-ico {
  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.2);
  animation: mg-ico-glow 3.5s ease-in-out infinite;
}

@keyframes mg-ico-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.15); }
  50% { box-shadow: 0 0 14px rgba(245, 166, 35, 0.22); }
}

.msg.ai.mg-typing-reveal .msg-body {
  min-height: 1.2em;
}

/* ── Dashboard tiles (home) ───────────────────────────────────────── */
.tile {
  transition:
    transform var(--mg-card-dur) var(--mg-ease-out),
    box-shadow var(--mg-card-dur) var(--mg-ease-out),
    border-color var(--mg-card-dur) var(--mg-ease-out);
}

@media (hover: hover) {
  .tile:hover {
    transform: translate3d(0, -3px, 0) scale(1.02);
    box-shadow: var(--shadow-md), 0 0 20px rgba(245, 166, 35, 0.06);
    border-color: rgba(245, 166, 35, 0.18);
  }
}

.tile:active {
  transform: scale(0.98);
}

/* ── Lite mode (low CPU / reduced effects) ─────────────────────────── */
html.mg-lite .ambient-orb {
  animation: none;
  opacity: 0.07;
}

html.mg-lite .nl-mark::after,
html.mg-lite .mg-ai-ico,
html.mg-lite .mg-linked-badge,
html.mg-lite .mg-chip-expired,
html.mg-lite .dot.active {
  animation: none !important;
}

html.mg-lite .mg-qr-scan-frame {
  box-shadow: none;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ambient-orb,
  .nl-mark::after,
  .mg-qr-active::after,
  .mg-linked-badge,
  .mg-chip-expired,
  .dot.active,
  .scan-bell.mg-has-alerts::before,
  body.mg-login-page .card::after,
  .mg-ai-ico {
    animation: none !important;
  }


  .app-card:hover,
  .card:hover,
  .feat:hover {
    transform: none;
  }
}