/* ==========================================================================
   INTRO — the opening screen: a slow, monochrome iris + "open your eyes".
   ========================================================================== */

.intro {
  --eye: min(58vw, 250px);
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px;
  padding: var(--safe-top) var(--gutter) var(--safe-bottom);
  background: radial-gradient(110% 70% at 50% 36%, #141310 0%, #070706 55%, #000 100%);
  transition: opacity 1s var(--ease-out) 0.25s, visibility 0s 1.3s;
}
.intro.is-opening { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- The eye ---------- */
.intro__eye {
  position: relative;
  width: var(--eye);
  aspect-ratio: 1;
  transition: transform 1.3s var(--ease-in-out), opacity 1s var(--ease-out);
}
.intro.is-opening .intro__eye { transform: scale(7); opacity: 0; }

.intro__glow {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 185, 143, 0.22), transparent 70%);
  filter: blur(30px);
}

/* Iris: fine radial fibres in warm grey and brass */
.intro__iris {
  position: absolute; inset: 18%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.55) 0deg 0.8deg, transparent 0.8deg 2.6deg),
    repeating-conic-gradient(from 1deg, rgba(255, 245, 220, 0.10) 0deg 0.5deg, transparent 0.5deg 4deg),
    radial-gradient(circle, #000 0 22%, #3b3326 30%, #8a7a56 46%, #b9a678 58%, #6d6045 74%, #1c1913 92%, #000 100%);
  box-shadow:
    0 0 0 1px rgba(244, 242, 238, 0.10),
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.9);
  animation: spin 90s linear infinite;
}

.intro__pupil {
  position: absolute; inset: 38%;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.95);
  animation: pupil 6s var(--ease-in-out) infinite;
}
.intro__glint {
  position: absolute;
  left: 40%; top: 37%;
  width: 7%; height: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
}

/* Seven pupil glyphs orbit the iris (filled from js/ui/intro.js) */
.intro__orbit { position: absolute; inset: 0; animation: spin 120s linear infinite reverse; }
.intro__orbit i {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px;
  color: var(--ink-faint);
  transform: rotate(var(--a)) translateY(calc(var(--eye) * -0.5 - 4px)) rotate(calc(var(--a) * -1));
}

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pupil { 0%, 100% { transform: scale(0.86); } 50% { transform: scale(1.1); } }

/* ---------- Wordmark ---------- */
.intro__brand { text-align: center; }
.intro__title {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(17px, 5vw, 26px);
  letter-spacing: 0.56em;
  padding-left: 0.56em;
  white-space: nowrap;
}
.intro__tagline {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-dim);
}

/* ---------- Enter ---------- */
.intro__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro__enter {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-strong);
  transition: transform 0.4s var(--spring), border-color 0.3s;
}
.intro__enter svg { width: 24px; height: 24px; }
.intro__enter:active { transform: scale(0.92); }
.intro__enter::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  animation: enter-pulse 3s var(--ease-out) infinite;
}
@keyframes enter-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.7); opacity: 0; } }

.intro__hint { color: var(--ink-dim); }
.intro__url {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 22px);
  color: var(--ink-faint);
}

.intro__enter.is-loading svg { opacity: 0.2; }
.intro__enter.is-loading::after {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--ink);
  animation: spin 0.9s linear infinite;
}