/* intro.css — styles for the intro (intro.js: C, TYPEWRITER BRIEF). A/B retired 2026-10-10.
   Shared keyframes (flickerIn, pulse, shake ...) live in styles.css. */

/* =====================================================================
   C — TYPEWRITER BRIEF (kinetic type)
   ===================================================================== */
.ic { position: relative; flex: 1; min-height: 0; }
.ic-ghost { position: absolute; left: 50%; top: 46%; width: min(78vw, 320px); transform: translate(-50%, -50%) rotate(-4deg); opacity: .15;
  pointer-events: none; filter: grayscale(.35); transition: opacity .6s, transform 7s linear; }
.ic-ghost > * { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.ic-ghost.lit { opacity: .28; transform: translate(-50%, -50%) rotate(-2deg) scale(1.1); }
.ic-ghost.away { opacity: .05; transition: opacity 1s; }
.ic-kick { position: absolute; left: 0; right: 0; top: 21%; z-index: 2; text-align: center; font-size: 13px; letter-spacing: .4em; text-transform: uppercase; color: var(--red); min-height: 1.4em; }
.ic-kick.amber { color: var(--amber); }
.ic-kick.in { animation: flickerIn .5s linear; }
.ic-words { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.ic-words .w { grid-area: 1 / 1; font-family: var(--heavy); line-height: .9; text-align: center; text-transform: uppercase; color: var(--bone);
  text-shadow: 0 6px 30px rgba(0,0,0,.8); animation: punchIn .22s cubic-bezier(.2,1.4,.4,1) both; }
.ic-words .w span { display: block; width: max-content; margin: 0 auto; white-space: nowrap; }
.ic-words .w i { font-style: normal; color: var(--red); }
.ic-words .w.dim { color: var(--dim); }
.ic-words .w.amber { color: var(--amber); }
.ic-words .w.amber i { color: var(--amber); }
.ic-words .w.push { animation: punchIn .22s cubic-bezier(.2,1.4,.4,1) both, push 5s .22s linear forwards; }
.ic-words .w.push.bump { animation: bumpW .3s cubic-bezier(.2,1.5,.4,1) both, push2 4s .3s linear forwards; }
.ic-words .w.stampw { color: var(--red); border: .07em solid var(--red); border-radius: .1em; padding: .04em .14em 0;
  -webkit-mask-image: radial-gradient(circle at 40% 40%, #000 55%, rgba(0,0,0,.7) 75%, #000 100%);
  animation: stampW .3s cubic-bezier(.2,1.5,.4,1) both; }
.ic-words .w.stampw i { color: var(--red); }
.ic-words .w.out { animation: punchOut .22s ease-in forwards; }
/* under the end-of-intro riser: the DON'T GUESS stamp creeps toward the camera (fling() clears it) */
.ic-words .w.stampw.rise { animation: riseW 3s ease-in forwards; }
@keyframes riseW { from { opacity: 1; transform: rotate(-9deg) scale(1); } to { opacity: 1; transform: rotate(-8deg) scale(1.06); } }
@keyframes punchIn { from { opacity: 0; transform: scale(1.75); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes punchOut { from { opacity: 1; } to { opacity: 0; transform: scale(.82) translateY(-8%); filter: blur(3px); } }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes push2 { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@keyframes bumpW { 0% { transform: scale(1.35); } 100% { transform: scale(1.06); } }
@keyframes stampW { 0% { opacity: 0; transform: rotate(-4deg) scale(2.6); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
.ic-assoc { width: 100%; display: flex; flex-direction: column; gap: 28px; text-align: center; }
.ic-assoc b { display: block; font-family: var(--heavy); font-weight: 400; font-size: 64px; line-height: .95; letter-spacing: .01em; opacity: 0; }
.ic-assoc .al.on b { animation: punchIn .22s cubic-bezier(.2,1.4,.4,1) both; }
.ic-assoc b span { color: var(--dim); opacity: 0; }
.ic-assoc b span.on { opacity: 1; animation: flickerIn .4s linear; }
.ic-assoc em { display: block; margin-top: 6px; font-style: normal; font-weight: 600; font-size: 17px; letter-spacing: .32em; color: var(--red); opacity: 0; }
.ic-assoc em.on { animation: stampIn .25s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes stampIn { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
.ic-foot { position: absolute; left: 0; right: 0; bottom: 5%; z-index: 2; opacity: 0; transition: opacity .3s; }
.ic-foot.on { opacity: 1; }
.ic-icons { display: flex; justify-content: center; gap: 12px; }
.ico { position: relative; width: 54px; color: #3a3a3a; text-align: center; }
.ico svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.ico em { display: block; font-style: normal; font-size: 10px; letter-spacing: .15em; color: #4a4a4a; margin-top: 3px; }
.ico.on { color: var(--amber); animation: stampIn .25s cubic-bezier(.2,1.5,.4,1); }
.ico.on svg { fill: rgba(245,166,35,.16); }
.ico.on em { color: var(--amber); }
.ic-plus { position: absolute; left: 50%; bottom: 100%; font-family: var(--heavy); font-size: 22px; color: var(--green); white-space: nowrap;
  text-shadow: 0 0 14px rgba(61,220,132,.6); animation: icPlus 1.1s ease-out forwards; pointer-events: none; }
@keyframes icPlus { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; transform: translate(-50%, -4px); } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.ic-total { text-align: center; font-family: var(--display); font-size: 44px; color: var(--amber); margin-top: 8px; line-height: 1; }
.ic-total i { font-style: normal; font-size: 22px; color: var(--dim); }