/* "Your firm is …" (owner 18.10.2026, R33): the firm intro, shown once per
   student when the firm setup opens, over the setup screen that is already
   drawn underneath. Navy, the firm's own mark large, the firm name, the
   people. Nothing else. lib/motor-firm-intro.js holds the timeline; the
   durations here match it. */

.motor-firm-intro[hidden] { display: none !important; }

.motor-firm-intro {
  position: fixed;
  inset: 0;
  z-index: 9300; /* over the setup screen (9200), under the tutorial (10050) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #102a3a;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  opacity: 1;
  transition: opacity .8s ease;
}
.motor-firm-intro.is-leaving { opacity: 0; pointer-events: none; }

.motor-firm-intro__stage {
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  padding: 24px 32px 72px;
  text-align: center;
}

.motor-firm-intro__mark {
  display: flex;
  justify-content: center;
  margin: 0 0 30px;
  opacity: 0;
  transform: scale(.86);
}
.motor-firm-intro__mark .motor-firm-mark {
  --firm-mark-size: 200px;
  border-radius: 44px;
  font-size: 72px;
  letter-spacing: -.03em;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}
.motor-firm-intro__mark .motor-firm-mark__symbol { width: 62%; height: 62%; }

.motor-firm-intro__kicker {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
  opacity: 0;
}

.motor-firm-intro__name {
  margin: 0;
  font-size: clamp(40px, 4.7vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  opacity: 0;
  transform: translateY(18px);
}

.motor-firm-intro__members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin: 34px auto 0;
  max-width: 900px;
  opacity: 0;
}
.motor-firm-intro__member { display: block; min-width: 0; }
.motor-firm-intro__member strong,
.motor-firm-intro__member span { display: block; line-height: 1.2; }
.motor-firm-intro__member strong { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.motor-firm-intro__member span { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .6); }

.motor-firm-intro__continue {
  position: absolute;
  right: 28px;
  bottom: 24px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: 600 14px Inter, Arial, sans-serif;
  cursor: pointer;
  animation: motorFirmIntroFade .4s ease forwards;
}
.motor-firm-intro__continue:hover,
.motor-firm-intro__continue:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .6); outline: none; }
.motor-firm-intro__continue[hidden] { display: none !important; }

/* Choreography: mark 0–1.2 s, name 0.6–1.8 s, people 1.6–2.6 s. */
.motor-firm-intro.is-playing .motor-firm-intro__mark { animation: motorFirmIntroMark 1.2s cubic-bezier(.2, .7, .2, 1) 0s forwards; }
.motor-firm-intro.is-playing .motor-firm-intro__kicker { animation: motorFirmIntroFade .7s ease .6s forwards; }
.motor-firm-intro.is-playing .motor-firm-intro__name { animation: motorFirmIntroRise 1.2s cubic-bezier(.2, .7, .2, 1) .6s forwards; }
.motor-firm-intro.is-playing .motor-firm-intro__members { animation: motorFirmIntroFade 1s ease 1.6s forwards; }

@keyframes motorFirmIntroMark {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes motorFirmIntroRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motorFirmIntroFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduced motion: everything at once, no movement, plain hide. */
.motor-firm-intro.is-static,
.motor-firm-intro.is-static.is-leaving { transition: none; }
.motor-firm-intro.is-static .motor-firm-intro__mark,
.motor-firm-intro.is-static .motor-firm-intro__kicker,
.motor-firm-intro.is-static .motor-firm-intro__name,
.motor-firm-intro.is-static .motor-firm-intro__members,
.motor-firm-intro.is-static .motor-firm-intro__continue {
  animation: none;
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .motor-firm-intro,
  .motor-firm-intro.is-leaving { transition: none; }
  .motor-firm-intro .motor-firm-intro__mark,
  .motor-firm-intro .motor-firm-intro__kicker,
  .motor-firm-intro .motor-firm-intro__name,
  .motor-firm-intro .motor-firm-intro__members,
  .motor-firm-intro .motor-firm-intro__continue {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  .motor-firm-intro__mark .motor-firm-mark { --firm-mark-size: 160px; border-radius: 36px; font-size: 58px; }
  .motor-firm-intro__members { gap: 12px 28px; }
}
@media (max-width: 560px) {
  .motor-firm-intro__stage { padding: 20px 16px 80px; }
  .motor-firm-intro__name { font-size: 34px; }
  .motor-firm-intro__member strong { font-size: 18px; }
  .motor-firm-intro__continue { right: 16px; bottom: 16px; }
}

/* The Teacher Demo's lesson (app.js motorFirmIntroEntryClass, owner 4.11.2026):
   drawn at once, as its cover picture shows it, and still fades out. */
.motor-firm-intro.is-settled .motor-firm-intro__mark,
.motor-firm-intro.is-settled .motor-firm-intro__kicker,
.motor-firm-intro.is-settled .motor-firm-intro__name,
.motor-firm-intro.is-settled .motor-firm-intro__members,
.motor-firm-intro.is-settled .motor-firm-intro__continue {
  animation: none;
  opacity: 1;
  transform: none;
}