/* Skyllamas intro: plays inside the hero, then hands over to it (see intro.js). */

/* While the intro loads or plays, the hero's own content is drawn as normal (so browsers and Google
   count the page as shown straight away) but kept under a navy cover; the intro plays on top of it.
   It keeps its place, so the intro's logo can land exactly where the logo image is. */
.intro-cover { display: none; position: absolute; inset: 0; z-index: 4; background: #0a1122; }
.intro-pending .intro-cover,
.hero.intro-running .intro-cover { display: block; }
.intro-pending .hero .rise,
.hero.intro-running .rise { animation: none; }
/* Safety net: if the intro script never starts, lift the cover after 4 seconds. */
.intro-pending .intro-cover { animation: intro-cover-off 0.4s ease 4s forwards; }
@keyframes intro-cover-off { to { opacity: 0; visibility: hidden; } }

/* The handoff: the logo image is simply there (the 3D logo sits exactly on it); the rest rises in. */
.hero.intro-reveal .rise { animation: rise 0.9s var(--ease, ease) both; }
.hero.intro-reveal .hero-logo { animation: none; opacity: 1; }
.hero.intro-reveal .eyebrow { animation-delay: 0.1s; }
.hero.intro-reveal h1 { animation-delay: 0.2s; }
.hero.intro-reveal .lede { animation-delay: 0.32s; }
.hero.intro-reveal .ctas { animation-delay: 0.44s; }
.hero.intro-reveal .replay { animation-delay: 0.56s; }

.intro { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; max-height: 100%; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: #0a1122; }
.intro.on { opacity: 1; }
.intro.handoff { opacity: 0; transition: opacity 0.6s ease; }
.intro-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Words on the beats ---------- */
.intro-words { position: absolute; left: 16px; right: 16px; bottom: clamp(56px, 11vh, 120px); display: grid; justify-items: center; text-align: center; }
.intro-line {
  grid-area: 1 / 1;
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  font-size: clamp(30px, 5.6vw, 76px);
  color: #f6f3ec;
  text-shadow: 0 2px 24px rgba(10, 17, 34, 0.6);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.3em) scale(1.04);
  transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), letter-spacing 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.intro-line span { display: block; }
.intro-line .outline { -webkit-text-stroke: 1.5px #ba965a; -webkit-text-fill-color: transparent; text-shadow: none; }
.intro-line.in { opacity: 1; filter: blur(0); transform: none; letter-spacing: -0.02em; }
.intro-line.out { opacity: 0; filter: blur(8px); transform: translateY(-0.2em); transition-duration: 0.3s; }
.intro-line.service { font-size: clamp(34px, 7vw, 96px); }
.intro-line small {
  display: block;
  margin-bottom: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #ba965a;
  text-shadow: none;
}

/* ---------- Skip ---------- */
.intro-skip {
  position: absolute;
  z-index: 6;
  right: 16px;
  bottom: 16px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #aab3c5;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 6px;
  text-decoration: underline;
  text-decoration-color: rgba(186, 150, 90, 0.6);
  text-underline-offset: 6px;
}
.intro-skip:hover { color: #f6f3ec; }
.intro-skip:focus-visible { outline: 2px solid #ba965a; outline-offset: 3px; }