/* McAlpine Cyber & AI: first-visit intro (pairs with intro.js). */
html.mc-intro { overflow: hidden; }

/* Black cover from first paint until the intro canvas takes over. */
html.mc-intro body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #030611;
  z-index: 9998;
}
html.mc-intro-live body::before { display: none; }

html.mc-intro .site-header { opacity: 0; transition: opacity 0.9s ease 0.15s; }
html.mc-intro.mc-intro-reveal .site-header { opacity: 1; }
html.mc-intro .brand-logo-img { visibility: hidden; }  /* the canvas draws it until hand-off */

.mc-intro-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

.mc-intro-line {
  position: fixed;
  left: 50%;
  top: 70%;
  z-index: 10000;
  width: min(calc(100vw - 2.5rem), 34rem);
  margin: 0;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  text-align: center;
  text-wrap: balance;
  font: 600 clamp(1.15rem, 2.6vw, 1.75rem)/1.3 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  color: #f3f6fb;
}
.mc-intro-line em { font-style: normal; color: #e7d3a0; }

.mc-intro-skip {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  padding: 0.55rem 0.9rem;
  font: 500 0.7rem/1 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231, 211, 160, 0.55);
  background: transparent;
  border: 1px solid rgba(207, 185, 128, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mc-intro-skip:hover,
.mc-intro-skip:focus-visible { color: #e7d3a0; border-color: rgba(207, 185, 128, 0.6); outline: none; }

/* The surge as the charge lands: the city flickers on, then settles. */
#heroVideo.mc-charged {
  opacity: 1;
  transition: none;
  animation: mc-charge 1.8s ease-out both;
}
@keyframes mc-charge {
  0%   { filter: brightness(2.6) contrast(1.3) saturate(1.5); }
  7%   { filter: brightness(0.7) contrast(1.1); }
  13%  { filter: brightness(2.1) contrast(1.25) saturate(1.4); }
  20%  { filter: brightness(0.9); }
  30%  { filter: brightness(1.6) saturate(1.25); }
  100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.mc-intro body::before, .mc-intro-canvas, .mc-intro-line, .mc-intro-skip { display: none; }
}

/* Phones: while the intro covers the page, hide what's underneath so the phone isn't
   re-blending the video, blurred header and slides on every frame. Each layer comes back
   as the intro reveals it: the video when the charge lands, the rest as the black lifts. */
html.mc-intro-lite.mc-intro:not(.mc-intro-impact) body > :not(.mc-intro-canvas):not(.mc-intro-line):not(.mc-intro-skip),
html.mc-intro-lite.mc-intro.mc-intro-impact:not(.mc-intro-reveal) body > :not(.mc-intro-canvas):not(.mc-intro-line):not(.mc-intro-skip):not(.video-viewport-canvas) {
  visibility: hidden;
}