/* IgnitionLabs motion (child theme: assets/il-motion.css)
   Everything here is scoped to html.il-motion, which il-motion.js adds only when the visitor has not
   asked for reduced motion. Without it, every panel shows its finished, readable state. */

/* ---------- Home hero: schedule builds itself, then breathes ----------
   Final state matches the static panel exactly: 24 amber hourly blocks, one daily block (2 a.m.), green uptime stripes. */
.il-motion .schedule.is-live .schedule__bar { position: relative; overflow: hidden; }
.il-motion .schedule.is-live .schedule__bar--hourly { background-image: none; background-color: transparent; display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.il-motion .il-tk { height: 100%; border-radius: 2px; background: var(--primary); }
.il-motion .schedule.is-building .il-tk { animation: il-block .28s cubic-bezier(.2,.7,.2,1) both; }
@keyframes il-block { 0% { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
.il-motion .il-tk.is-now { animation: il-now 2.4s ease-in-out infinite; }
@keyframes il-now { 50% { opacity: .55; } }
.il-motion .schedule.is-live .schedule__bar--nightly { background-image: none; }
.il-motion .il-day { position: absolute; top: 0; bottom: 0; left: 8.333%; width: calc(4.1667% - 3px); border-radius: 2px; background: var(--primary); }
.il-motion .schedule.is-building .il-day { animation: il-block .35s cubic-bezier(.2,.7,.2,1) both; animation-delay: .75s; }
.il-motion .schedule.is-building .schedule__bar--uptime { animation: il-wipe 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: .9s; }
@keyframes il-wipe { 0% { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.il-motion .il-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 18%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); transform: translateX(-100%); }
.il-motion .il-sweep.is-on { animation: il-sweep 1.6s cubic-bezier(.4,0,.2,1); }
@keyframes il-sweep { to { transform: translateX(560%); } }

/* ---------- Process steps (Migration, Emergency recovery): play through once ---------- */
.il-motion .viz.is-playing .viz__step .viz__num { transition: color .3s, background-color .3s; border-radius: 999px; justify-self: start; align-self: start; padding: 1px 7px; margin-left: -7px; }
.il-motion .viz.is-playing .viz__step:not(.is-on) { opacity: .45; }
.il-motion .viz.is-playing .viz__step.is-on .viz__num { background: var(--primary); color: var(--on-primary); }
.il-motion .viz.is-playing .viz__step.is-current { box-shadow: inset 3px 0 0 var(--primary); }
.il-motion .viz.is-playing .viz__step { transition: opacity .35s, box-shadow .3s; }

/* ---------- Bars drawn to scale (Security) ---------- */
.il-motion .viz.is-drawing .viz__fill { transform: scaleX(0); transform-origin: left; }
.il-motion .viz.is-drawn .viz__fill { transform: scaleX(1); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1); }

/* ---------- Rows and cards settle in (once, when they come into view) ---------- */
.il-motion .il-settle { animation: il-settle .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes il-settle { 0% { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Home: "say what's wrong" message box ---------- */
.il-ask { width: 100%; max-width: 760px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 14px; text-align: left; box-shadow: 0 30px 60px -40px rgba(15,26,42,.45); }
.il-ask__who { font: 500 1.25rem/1.4 "IBM Plex Mono", Menlo, monospace; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; margin: 0; }
.il-ask__who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.il-ask__text { font-size: clamp(1.8rem, 2.2vw, 2.2rem); line-height: 1.45; letter-spacing: -.01em; margin: 10px 0 14px; min-height: 2.9em; color: var(--ink); }
.il-motion .il-ask__text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--primary); animation: il-blink 1.1s step-end infinite; }
@keyframes il-blink { 50% { opacity: 0; } }
.il-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.il-ask__chip { font: 500 1.35rem/1 "IBM Plex Sans", Helvetica, Arial, sans-serif; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.il-ask__chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.il-ask__chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.il-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }