/* ============================================================================
   AI READINESS DIAGNOSTIC, INTRO ANIMATION
   A one-time pre-landing sequence: the Circle Squared sygnet is forged part by
   part, each piece dropping from above and SLAMMING into place (impact shake +
   shockwave + flash), then the wordmark letters in. Then it clears to reveal
   the landing. Depends on tokens.css. Drive it with scripts/intro.js.
   ========================================================================= */

#csq-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(120% 120% at 50% 38%, #11182b 0%, #05070f 60%);
  display: grid; place-items: center;
  overflow: hidden; font-family: var(--font-sans);
  opacity: 1; transition: opacity 600ms var(--ease-out);
}
#csq-intro.is-out { opacity: 0; pointer-events: none; }

/* the shaking rig, impacts jolt this whole group */
.intro-rig { display: grid; justify-items: center; gap: var(--space-8); will-change: transform; }
.intro-rig.shake { animation: csq-shake 320ms cubic-bezier(0.36,0.07,0.19,0.97); }

/* stage where the mark assembles */
.intro-mark { position: relative; width: min(46vw, 240px); aspect-ratio: 1; }
.intro-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.intro-mark__svg path { fill: #fff; }

/* each forged part starts above, off, oversized */
.intro-part { transform-box: view-box; transform-origin: center; opacity: 0; }
.intro-part.slam { animation: csq-slam 720ms cubic-bezier(0.55,0,0.85,0.12) forwards; }

@keyframes csq-slam {
  0%   { transform: translateY(-165%) scale(1.55); opacity: 0; }
  45%  { opacity: 1; }
  64%  { transform: translateY(0) scale(1); }            /* contact */
  74%  { transform: translateY(0) scale(1.08, 0.86); }    /* squash */
  86%  { transform: translateY(0) scale(0.97, 1.04); }    /* rebound */
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes csq-shake {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-7px, 5px); }
  30% { transform: translate(6px, -4px); }
  45% { transform: translate(-5px, 4px); }
  60% { transform: translate(4px, -3px); }
  78% { transform: translate(-3px, 2px); }
}

/* shockwave ring spawned at each impact (centred on the mark) */
.intro-shock {
  position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(0.2);
  border: 3px solid rgba(255,255,255,0.7); border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.intro-shock.go { animation: csq-shock 620ms var(--ease-out) forwards; }
@keyframes csq-shock {
  0%   { transform: translate(-50%,-50%) scale(0.15); opacity: 0.65; border-width: 4px; }
  100% { transform: translate(-50%,-50%) scale(2.6);  opacity: 0;    border-width: 1px; }
}
/* a second, red shock for the final (core) impact */
.intro-shock--red { border-color: var(--brand-red); }

/* impact flash */
.intro-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.intro-flash.go { animation: csq-flash 220ms ease-out; }
@keyframes csq-flash { 0% { opacity: 0; } 30% { opacity: 0.18; } 100% { opacity: 0; } }

/* the wordmark + subline that letter in */
.intro-word { text-align: center; overflow: hidden; }
.intro-word__main {
  font-size: clamp(1.6rem, 6.5vw, 2.6rem); font-weight: var(--w-extrabold);
  letter-spacing: 0.02em; color: #fff; line-height: 1; margin: 0;
  display: flex; gap: 0.02em; justify-content: center; flex-wrap: wrap;
}
.intro-word__main .sp { width: 0.4em; }
.intro-word__main .ch {
  display: inline-block; opacity: 0; transform: translateY(115%);
}
.intro-word__main.go .ch { animation: csq-letter 520ms var(--ease-out) forwards; }
@keyframes csq-letter { to { opacity: 1; transform: translateY(0); } }

.intro-word__sub {
  margin: var(--space-4) 0 0; font-size: var(--fs-eyebrow); font-weight: var(--w-bold);
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--brand-red);
  opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.intro-word__sub.go { opacity: 1; transform: none; }
/* the red rule that wipes in under the subline */
.intro-word__rule { height: 2px; width: 0; background: var(--brand-red); margin: var(--space-4) auto 0; transition: width 600ms var(--ease-out); }
.intro-word__rule.go { width: 64px; }

/* skip control */
.intro-skip {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  background: transparent; border: 0; color: var(--ink-300); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--w-semibold);
  letter-spacing: 0.04em; opacity: 0; transition: opacity 400ms ease 600ms;
}
#csq-intro.ready .intro-skip { opacity: 1; }
.intro-skip:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .intro-part, .intro-part.slam { animation: none; opacity: 1; transform: none; }
  .intro-shock, .intro-flash, .intro-rig.shake { animation: none !important; opacity: 0; }
  .intro-word__main .ch { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   RED BATON, the intro hands its red over to the landing headline (once).
   Adapted to the real landing (.scr-landing__hero / h1). Fires on intro-done.
   ========================================================================= */
.scr-landing__hero { position: relative; }
.scr-landing__hero .baton {
  position: absolute; left: -8px; top: -10px; width: 46px; height: 46px;
  border: 2px solid var(--brand-red); border-radius: 50%;
  opacity: 0; transform: scale(0.3); pointer-events: none;
}
body.intro-done .scr-landing__hero .baton { animation: baton-ring 900ms var(--ease-out) 150ms 1; }
@keyframes baton-ring {
  0%   { opacity: 0.55; transform: scale(0.3); }
  100% { opacity: 0;    transform: scale(3.4); }
}
body.intro-done .scr-landing h1 { animation: baton-glow 1200ms var(--ease-out) 220ms 1; }
@keyframes baton-glow {
  0%, 100% { text-shadow: none; }
  35%      { text-shadow: 0 0 32px rgba(240, 52, 75, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .scr-landing__hero .baton { display: none; }
  body.intro-done .scr-landing h1 { animation: none; }
}