/* =========================================================
   Collective Assembly — v7
   Intro Portal (additive cinematic overlay)
   ---------------------------------------------------------
   Self-contained. Loaded AFTER style.css so it can reuse the
   site tokens (--cobalt, --black, --cream) with safe fallbacks.
   Nothing here touches the existing site rules — removing the
   #portal markup + these two files restores the original page.
   ========================================================= */

/* Lock page scroll while the portal is on screen ---------- */
html.portal-lock,
html.portal-lock body {
  height: 100%;
  overflow: hidden;
}

/* =========================================================
   Stage
   ========================================================= */
.portal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #000;
  opacity: 1;
  will-change: opacity;
}
.portal.is-done {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1),
              visibility 0s linear 0.8s;
}

/* =========================================================
   Layer 1 — animated cobalt field (shows through the letters)
   On-brand adaptation of the reference's multi-color flow.
   ========================================================= */
.portal__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a234d;
}
/* Moving field is a transform animation (GPU-composited) rather than an
   animated background-position (which repaints every frame). */
.portal__bg::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg,
    #0a234d 0%,
    var(--cobalt, #1351AA) 28%,
    #2f74c9 50%,
    var(--cobalt, #1351AA) 72%,
    #0a234d 100%);
  animation: portalDrift 20s ease-in-out infinite;
  will-change: transform;
}
.portal__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 8%,
    rgba(90, 150, 225, 0.4), transparent 60%);
  mix-blend-mode: screen;
}
@keyframes portalDrift {
  0%   { transform: translate3d(-6%, -5%, 0) scale(1.12); }
  50%  { transform: translate3d(6%, 5%, 0)   scale(1.16); }
  100% { transform: translate3d(-6%, -5%, 0) scale(1.12); }
}

/* =========================================================
   Layer 2 — curtain + zoom-through SVG mask
   The black rect is punched out by the LOGO text, so the
   cobalt field above shows through the letters. The text
   group scales up massively to "zoom through" the screen.
   ========================================================= */
.portal__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Misty entrance: blur + scale + fade in on load */
  animation: portalIntro 1.3s cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes portalIntro {
  from { opacity: 0; filter: blur(40px); transform: scale(0.95); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
#zoom-target { will-change: transform; }
.portal__word {
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* =========================================================
   Layer 3 — intro UI, brand, skip, progress
   ========================================================= */
.portal__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portal__intro {
  position: absolute;
  inset: 0;
  will-change: opacity, transform;
}

/* Brand mark (CA logo, top-left) */
.portal__brand {
  position: absolute;
  top: 28px;
  left: 28px;
}
.portal__brand-logo {
  display: block;
  width: auto;
  height: 44px;
}

/* Scroll hint (mouse + micro-label) */
.portal__scroll {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.portal__mouse {
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.portal__mouse-dot {
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  animation: mouseBounce 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes mouseBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(5px); opacity: 1; }
}
.portal__scroll-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 0.4em; /* optical balance for the wide tracking */
}

/* Skip control — stays clickable for the whole intro */
.portal__skip {
  position: absolute;
  top: 28px;
  right: 28px;
  pointer-events: auto;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.portal__skip:hover {
  background: #fff;
  color: var(--black, #141414);
  border-color: #fff;
}

/* Progress bar pinned to the bottom edge */
.portal__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.portal__progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  will-change: width;
}

/* =========================================================
   Reduced motion — never trap the user; JS also bails out.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .portal { display: none !important; }
  html.portal-lock,
  html.portal-lock body { overflow: auto; height: auto; }
}

@media (max-width: 640px) {
  .portal__brand { top: 24px; left: 20px; }
  .portal__skip  { top: 20px; right: 16px; }
  .portal__scroll { bottom: 40px; }
}