/* ============================================================================
   day1-arc.css — Kim's clock-face landing (#1897; polish round #1945).

   #1945: the sunrise/sunset ray bands (.day1-arcband, mounted by
   window.Day1SunriseArc / .Day1SunsetArc) are now normal in-flow children of
   .aiv2-center — see ai-native.jsx — sized to hug that ~600px composition
   directly, not an absolute overlay spanning the whole viewport. The rim
   (.day1-arc / .day1-rim / .day1-card, mounted by window.Day1Arc) keeps the
   original full-stage absolute coordinate system — her real dashboard
   modules still ring the whole clock face — but the pills are now hidden by
   default (see .day1-card below) and fade in per-card the first time a
   tag-driven beam touches them.

   Scoped under .aiv2 (never collides with the rest of the cockpit). Colors
   read the SAME --theme-chat-* bridge token pattern as ai-native.css
   (literal fallback so an un-themed tenant still gets Kim's exact language).
   ========================================================================== */

/* Deliberately NO z-index here (stays "auto") — position:absolute alone does
   not open a new stacking context, so .day1-card (z-index 2, alongside
   .aiv2-ring) below stacks correctly against the rest of .aiv2-stage instead
   of being trapped inside this wrapper's own context. */
.aiv2 .day1-arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- ARC BANDS: sunrise directly above the greeting, sunset directly below
   the chips — normal-flow children of .aiv2-center (its 26px flex gap does
   the "hugging"), not absolutely positioned. ---- */
.aiv2 .day1-arcband {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.aiv2 .day1-ray {
  width: 100%;
  max-width: 560px;
  height: clamp(64px, 15vw, 128px);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
}
.aiv2 .day1-ray path {
  transition: fill-opacity 0.6s ease; /* color-state-machine + beam brightening */
}
.aiv2 .day1-ray-sunrise { transform: translateY(0); }
.aiv2 .day1-ray-sunset  { transform: translateY(0) scaleY(-1); }
/* Conversation fills the center — the arcs ease further apart to make room
   for the growing thread (the "gap flexes" requirement), instead of jumping. */
.aiv2 .day1-arcband-conversing .day1-ray-sunrise { transform: translateY(-18px); }
.aiv2 .day1-arcband-conversing .day1-ray-sunset  { transform: translateY(18px) scaleY(-1); }
@media (prefers-reduced-motion: reduce) {
  .aiv2 .day1-ray { transition: none; }
  .aiv2 .day1-ray path { transition: none; }
}
.aiv2 .day1-arcband[data-motion="off"] .day1-ray,
.aiv2 .day1-arcband[data-motion="off"] .day1-ray path { transition: none; }

/* ---- BEAM: a brightened ray toward an active card's clock angle ---- */
.aiv2 .day1-beam {
  position: absolute;
  z-index: 1; /* above the decorative rays, below the rim cards */
  left: 50%;
  top: 50%;
  width: 3px;
  height: 43%;
  transform-origin: top center;
  background: linear-gradient(to bottom, var(--sage, #5F7E62) 0%, transparent 100%);
  opacity: 0.55;
  filter: blur(0.5px);
  animation: day1-beamPulse 3.6s ease-in-out infinite;
}
@keyframes day1-beamPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
.aiv2 .day1-arc[data-motion="off"] .day1-beam { animation: none; opacity: 0.55; }

/* ---- RIM CARDS: real, clickable modules arranged around the clock face ---- */
.aiv2 .day1-rim {
  position: absolute;
  inset: 0;
  z-index: 2; /* alongside .aiv2-ring — above the decorative rays */
  pointer-events: none; /* only the card buttons themselves are interactive */
}
/* #1945 (Kim, finding 4): hidden by default — "no module pills in the empty
   state" — a card fades in (opacity + a small scale settle) the first time
   its ray beams, then stays revealed (day1-card-revealed, added by
   day1-arc.jsx once a card has ever been active this session). Hidden cards
   are also pointer-events:none — never a clickable-but-invisible trap. */
.aiv2 .day1-card {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink2);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--t-ui, "Hanken Grotesk", sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 6px 20px -14px rgba(0, 0, 0, 0.35);
  transition: opacity 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.aiv2 .day1-card-revealed {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.aiv2 .day1-card-revealed:hover {
  transform: translate(-50%, -50%) translateY(-2px);
}
.aiv2 .day1-card-active {
  border-color: var(--sage);
  color: var(--sage-ink);
  box-shadow: 0 0 0 1px var(--sage), 0 14px 34px -16px var(--glow-sage);
  animation: aiv2-glowSage 4.2s ease-in-out 0.4s infinite;
}
.aiv2 .day1-arc[data-motion="off"] ~ .day1-rim .day1-card-active,
.aiv2[data-motion="off"] .day1-card-active { animation: none; }
/* prefers-reduced-motion (media query, belt) + the explicit data-motion="off"
   prop (suspenders — matches the pattern already used for the beam/glow
   above): the reveal fade becomes an instant show, no transition at all. */
@media (prefers-reduced-motion: reduce) {
  .aiv2 .day1-card { transition: none; }
}
.aiv2 .day1-arc[data-motion="off"] .day1-card { transition: none; }

/* #1933 review round: the sub-1120px wrapped-pill-row fallback that used to
   live here is DELETED. window.Day1Arc (day1-arc.jsx) now returns null
   entirely below this same breakpoint via a matchMedia-driven React state
   (useDay1Narrow) rather than a CSS flatten — see that file's comment for
   the reasoning (Kim's picked mobile design lives on the dedicated
   mobile.jsx surface; a resized narrow desktop window gets a clean centered
   chat with no rim chrome, not a second bespoke small-screen treatment).
   No @media rule is needed here anymore — the component simply isn't in
   the DOM below 1120px. */