/* A brief, optional welcome. No-JS and reduced-motion visitors see the site directly. */
.intro[hidden] { display: none; }
.intro {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 1.25rem; background: var(--deep-navy);
  animation: intro-safety 6.2s step-end forwards;
}
.intro-card {
  width: min(100%, 30rem); padding: clamp(1.5rem, 5vw, 2.75rem);
  text-align: center; border-radius: 1.5rem; background: var(--white);
  color: var(--brand-navy); box-shadow: 0 1.5rem 5rem #0004;
}
.intro-eyebrow { margin: 0 0 1.5rem; color: var(--brand-teal); font-size: .8rem; font-weight: 600; letter-spacing: .05em; }
.intro-logo { display: block; width: 100%; height: auto; aspect-ratio: 673.23 / 167; overflow: visible; }
.intro-piece { animation: intro-piece .6s both; }
.intro-piece:nth-of-type(2) { animation-delay: .22s; }
.intro-piece:nth-of-type(3) { animation-delay: .44s; }
.intro-piece:nth-of-type(4) { animation-delay: .66s; }
.intro-piece:nth-of-type(5) { animation-delay: .88s; }
.intro-piece:nth-of-type(6) { animation-delay: 1.10s; }
.intro-piece:nth-of-type(7) { animation-delay: 1.32s; }
.intro-piece:nth-of-type(8) { animation-delay: 1.54s; }
.intro-piece:nth-of-type(9) { animation-delay: 1.76s; }
.intro-message { margin: 1.25rem 0; font-size: .875rem; line-height: 1.6; }
.intro-track { height: 4px; overflow: hidden; border-radius: 1rem; background: var(--soft-blue); }
.intro-beam { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--brand-teal), var(--cyan), var(--orange)); animation: intro-progress 5.85s ease-out both; }
.intro-services { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem 1rem; margin-top: 1.25rem; font-size: .72rem; }
.intro-services span { --intro-delay: 2.4s; display: inline-flex; align-items: center; gap: .35rem; animation: intro-service .45s var(--intro-delay) both; }
.intro-services span:nth-child(2) { --intro-delay: 2.7s; }
.intro-services span:nth-child(3) { --intro-delay: 3s; }
.intro-services .icon { width: 1rem; height: 1rem; color: var(--brand-teal); animation: intro-icon 1.1s calc(var(--intro-delay) + .45s) ease-in-out both; }
.intro-skip { margin-top: 1.5rem; padding: .65rem 1rem; background: transparent; border: 1px solid currentColor; border-radius: .5rem; color: var(--brand-navy); font: inherit; font-size: .8rem; cursor: pointer; }
.intro-skip:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 4px; }
.intro.is-leaving { pointer-events: none; animation: intro-leave .15s forwards; }
@keyframes intro-piece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-service { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-icon { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.16) rotate(-5deg); } 70% { transform: scale(1.06) rotate(3deg); } }
@keyframes intro-leave { to { opacity: 0; visibility: hidden; } }
@keyframes intro-safety { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } .intro * { animation: none !important; } }