/* lm1-impress — the first five seconds.
 *
 * Additive only: no layout change, no new colours in the palette, no image, no external code.
 * Everything is a CSS transform/opacity animation on composited layers, and everything is off
 * for prefers-reduced-motion. The goal is the moment before the first build: the page should
 * feel alive and expensive, not like a form on a grey background.
 */

/* ---------- the aurora: three soft gradients drifting behind the boot screen ---------- */
#lm1aurora {
  position: fixed; inset: -20vmax; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .55; transition: opacity .8s ease;
}
#lm1aurora span {
  position: absolute; display: block; width: 62vmax; height: 62vmax; border-radius: 50%;
  will-change: transform; mix-blend-mode: screen;
}
#lm1aurora .a1 { left: -10vmax; top: -12vmax; background: radial-gradient(circle at 50% 50%, rgba(0,103,192,.55), rgba(0,103,192,0) 62%); animation: lm1Drift1 38s ease-in-out infinite alternate; }
#lm1aurora .a2 { right: -14vmax; top: 2vmax;  background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.5), rgba(139,92,246,0) 62%); animation: lm1Drift2 46s ease-in-out infinite alternate; }
#lm1aurora .a3 { left: 18vmax; bottom: -22vmax; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.38), rgba(34,211,238,0) 62%); animation: lm1Drift3 54s ease-in-out infinite alternate; }
@keyframes lm1Drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vmax,4vmax,0) scale(1.12); } }
@keyframes lm1Drift2 { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-7vmax,6vmax,0) scale(.96); } }
@keyframes lm1Drift3 { from { transform: translate3d(0,0,0) scale(.98); } to { transform: translate3d(4vmax,-6vmax,0) scale(1.1); } }
[data-theme="dark"] #lm1aurora { opacity: .42; }

/* the boot screen sits above the aurora */
.boot { position: relative; z-index: 1; }

/* ---------- boot choreography: each row arrives 80 ms after the previous one ---------- */
@keyframes lm1Pop   { 0% { opacity: 0; transform: scale(.6) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes lm1Rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lm1Glow  { 0%,100% { box-shadow: 0 0 0 0 rgba(0,103,192,.0); } 50% { box-shadow: 0 0 0 6px rgba(0,103,192,.12); } }
@keyframes lm1Shine { from { background-position: -140% 0; } to { background-position: 240% 0; } }
@keyframes lm1Arrive{ 0% { opacity: 0; transform: translateY(10px) scale(.985); } 100% { opacity: 1; transform: none; } }

.boot .boot-logo { animation: lm1Pop .7s cubic-bezier(.2,.9,.25,1.2) both; }
.boot .boot-brand { animation: lm1Rise .6s cubic-bezier(.2,.8,.2,1) .08s both; }
.boot h1 { animation: lm1Rise .7s cubic-bezier(.2,.8,.2,1) .16s both; }
.boot .boot-tag { animation: lm1Rise .7s cubic-bezier(.2,.8,.2,1) .24s both; }
.boot .boot-composer { animation: lm1Rise .7s cubic-bezier(.2,.8,.2,1) .32s both; }
.boot .examples-btn, .boot .quick { animation: lm1Rise .7s cubic-bezier(.2,.8,.2,1) .42s both; }
.boot .quiet-note, .boot .boot-note { animation: lm1Rise .7s cubic-bezier(.2,.8,.2,1) .5s both; }

/* the composer is the hero: it lifts and glows while focused */
.boot .boot-composer { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.boot .boot-composer:focus-within { transform: translateY(-2px); box-shadow: 0 18px 50px -18px rgba(11,42,90,.45); }
#bootInput { caret-color: var(--accent, #0067c0); }

/* the send button reacts like a physical key */
.boot-send { transition: transform .16s cubic-bezier(.2,.8,.2,1), filter .16s ease; }
.boot-send:hover { filter: brightness(1.06); }
.boot-send:active { transform: scale(.94); }

/* quick-start chips: lift + a single shine sweep on hover */
.boot .quick button { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.boot .quick button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(11,42,90,.4); }
.boot .examples-btn { background-image: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size: 220% 100%; }
.boot .examples-btn:hover { animation: lm1Shine .9s ease; }

/* a window that just opened arrives instead of appearing */
.win.lm1-arrive { animation: lm1Arrive .32s cubic-bezier(.2,.8,.2,1) both; }

/* the engine dot breathes: proof that something is alive */
.engine-dot { animation: lm1Glow 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  #lm1aurora span, .boot .boot-logo, .boot .boot-brand, .boot h1, .boot .boot-tag,
  .boot .boot-composer, .boot .examples-btn, .boot .quick, .win.lm1-arrive, .engine-dot {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  #lm1aurora { animation: none; }
}

/* the "16" badge on the examples button was unreadable: it had no colour of its own and sat on
   rgba(0,0,0,.28) over a light button. Solid pill, real contrast, slightly larger. */
.examples-btn .ex-count {
  background: #0b1220; color: #fff; font-size: 12px; font-weight: 800;
  padding: 2px 9px; line-height: 1.35; letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.28); min-width: 22px; text-align: center;
}
[data-theme="dark"] .examples-btn .ex-count { background: #e8eefc; color: #0b1220; }
.examples-btn { font-weight: 650; }