/* Huezon BETA 0.5.2 Subtle Motion & Interaction Layer
   Small product polish only: no loud movement, no layout-shifting animation, respects reduced motion. */
:root {
  --hz-ease-out: cubic-bezier(.22, 1, .36, 1);
  --hz-ease-soft: cubic-bezier(.2, .8, .2, 1);
  --hz-motion-fast: 160ms;
  --hz-motion-med: 320ms;
  --hz-card-x: 50%;
  --hz-card-y: 50%;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 2px;
  width: calc(var(--hz-scroll-progress, 0) * 100%);
  background: linear-gradient(90deg, #38bdf8, #8b5cf6, #f43f5e, #f59e0b);
  transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(99,102,241,.36);
}

.hz-ambient-orb {
  position: fixed;
  inset: auto auto 8vh 8vw;
  width: clamp(220px, 32vw, 560px);
  aspect-ratio: 1;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  opacity: .24;
  background:
    radial-gradient(circle at 35% 45%, rgba(56,189,248,.36), transparent 38%),
    radial-gradient(circle at 70% 58%, rgba(244,63,94,.28), transparent 46%);
  filter: blur(58px);
}

.hz-back-top {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 80;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--hz-motion-med) var(--hz-ease-out), transform var(--hz-motion-med) var(--hz-ease-out), background var(--hz-motion-fast) ease;
}
.hz-back-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.page-utility {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.page-utility .utility-note {
  color: var(--hz-soft);
  font-size: 12px;
  line-height: 1.35;
}

.hz-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hz-insight-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(150deg, rgba(255,255,255,.065), rgba(255,255,255,.026));
}
.hz-insight-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  opacity: .58;
  background: radial-gradient(circle at var(--hz-card-x) var(--hz-card-y), rgba(255,255,255,.14), transparent 36%);
  pointer-events: none;
}
.hz-insight-card > * { position: relative; }
.hz-insight-card span { color: var(--hz-soft); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 900; }
.hz-insight-card h3 { margin: 8px 0 6px; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.04em; }
.hz-insight-card p { color: var(--hz-muted); margin: 0; max-width: 46ch; }
.hz-insight-card .mini-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.hz-insight-card .mini-strip i { height: 22px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.shortcut-card {
  display: grid;
  gap: 8px;
  min-height: 126px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.036);
  transition: transform var(--hz-motion-med) var(--hz-ease-out), border-color var(--hz-motion-med) ease, background var(--hz-motion-med) ease;
}
.shortcut-card b { font-size: 15px; }
.shortcut-card small { color: var(--hz-soft); line-height: 1.45; }
.shortcut-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.055); }

.panel, .premium-panel, .premium-card, .tool-card, .home-focus-card, .color-card, .collection-card, .hz-insight-card, .shortcut-card, .stat-card {
  background-image:
    radial-gradient(circle at var(--hz-card-x) var(--hz-card-y), rgba(255,255,255,.06), transparent 22rem),
    linear-gradient(150deg, rgba(255,255,255,.044), rgba(255,255,255,.018));
}

.button, .ghost-button, .tool-card, .home-focus-card, .color-card, .collection-card, .palette-slot, .staff-tab, .badge-pick {
  transition:
    transform var(--hz-motion-fast) var(--hz-ease-out),
    border-color var(--hz-motion-med) ease,
    background var(--hz-motion-med) ease,
    color var(--hz-motion-med) ease,
    box-shadow var(--hz-motion-med) ease;
}
.button:hover, .ghost-button:hover { transform: translateY(-1px); }
.button:active, .ghost-button:active, .tool-card:active, .home-focus-card:active { transform: translateY(0) scale(.99); }

.hz-js [data-animate] { will-change: opacity, transform; }
.hz-js [data-animate]:not(.in):not(.is-visible) { opacity: 0; transform: translateY(14px); }
.hz-js [data-animate].is-visible { opacity: 1; transform: none; }

.command-dialog[open], .color-drawer[aria-hidden="false"], .toast.show, .nav-more[open] .nav-menu, .mobile-menu[open] .mobile-menu-panel {
  animation: hz-soft-in 220ms var(--hz-ease-out) both;
}

@keyframes hz-soft-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .hz-insights-grid, .shortcut-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hz-insights-grid, .shortcut-grid { grid-template-columns: 1fr; }
  .hz-back-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reading-progress, .hz-ambient-orb { display: none; }
  .hz-js [data-animate] { opacity: 1 !important; transform: none !important; }
}