/* asioson.com landing — single centered IVR Agent widget over the life.js grid.
 * Reuses tokens/fonts from style.css; nothing here overrides the palette. */
body.landing { min-height: 100dvh; display: grid; place-items: center; }
body.landing main { width: 100%; padding: var(--gutter); }

.landing-stack { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vw, 48px); text-align: center; }
.landing-stack h1 { margin: 0; }

.agent-widget {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 36px 22px; min-width: 200px;
  text-decoration: none; color: var(--fg);
  background: var(--bg);
  border: 1px solid color-mix(in oklab, var(--fg) 60%, transparent);
  border-radius: 12px; box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.agent-widget:hover { color: var(--fg); border-color: var(--accent-strong); transform: translateY(-3px); }
.agent-widget:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; border-radius: 12px; }

.agent-icon { width: clamp(96px, 16vw, 128px); height: auto; display: block; }
.agent-tile { fill: var(--accent); }
.agent-glyph { fill: hsl(0 0% 10%); }
.agent-wave { fill: none; stroke: hsl(0 0% 10%); stroke-width: 3.2; stroke-linecap: round; }
.agent-widget:hover .agent-tile { fill: var(--accent-strong); }
.agent-widget:hover .agent-glyph { fill: var(--bg); }
.agent-widget:hover .agent-wave { stroke: var(--bg); }

.agent-label {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Pulse ring on the icon to signal it's live; off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .agent-icon { animation: agent-pulse 2.4s var(--ease-out) infinite; border-radius: 22%; }
  @keyframes agent-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
  }
}