/* ===== BlackQoral entrance =====
   A 3D "porthole": the ring frame stays fixed while the scene inside it
   (sun = far, skyline = mid, waves = near) parallaxes and tilts toward the
   cursor. Scroll/zoom IN dives into the home page; zoom OUT returns to the
   medallion. intro.js builds the layers and drives the motion. */
.intro-lock { overflow: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 92% at 50% 34%, #100f0c 0%, #070605 58%, #000 100%);
  will-change: opacity;
}

/* art-deco sunburst lattice (background-image set by intro.js), softly vignetted */
.intro__deco {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-repeat: repeat; background-position: center; background-size: 188px 188px;
  -webkit-mask: radial-gradient(120% 110% at 50% 46%, #000 52%, transparent 100%);
          mask: radial-gradient(120% 110% at 50% 46%, #000 52%, transparent 100%);
  will-change: opacity;
}

/* the whole medallion zooms with scroll */
.intro__zoom { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; will-change: transform; }
.intro__medallion { position: relative; width: min(74vmin, 540px); aspect-ratio: 1 / 1;
  background: radial-gradient(circle closest-side at 50% 50%, rgba(8,8,7,.95) 0%, rgba(8,8,7,.95) 82%, transparent 90%); }

/* circular porthole that clips the 3D scene to the ring */
.med-port { position: absolute; inset: 0; perspective: 800px; perspective-origin: 50% 50%; -webkit-clip-path: circle(41.5% at 50% 50%); clip-path: circle(41.5% at 50% 50%); }
.med-3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.med-layer { position: absolute; inset: 0; }
.med-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* depth: sun far behind, city in the middle, waves near the viewer (scales compensate perspective so they line up at rest) */
.med-sky  { transform: translateZ(-150px) scale(1.188); }
.med-city { transform: translateZ(0); }
.med-wave { transform: translateZ(130px) scale(.838); }

/* fixed ring frame on top (does not move with the cursor) */
.med-frame { position: absolute; inset: 0; pointer-events: none; }
.med-frame svg { width: 100%; height: 100%; display: block; overflow: visible; }

.intro__brand {
  font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: .01em; color: var(--ink);
  opacity: 0; transform: translateY(12px); animation: introCap .9s cubic-bezier(.22,.61,.36,1) 2.25s forwards;
}

/* full-screen divider slide between the medallion and the home page (intro.js fades/scales it) */
.intro__slide {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; opacity: 0; transform-origin: 50% 50%; will-change: opacity, transform;
}
.intro__slide .intro__eyebrow { margin: 0 0 18px; font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }
.intro__slide h2 { margin: 0; font-size: clamp(2.4rem, 9vw, 5.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; color: var(--ink); }
.intro__slide h2 em { font-style: normal; color: var(--gold); }

.intro__hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 8px 12px;
  color: var(--ink-soft); font: inherit; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; animation: introCap .8s ease 2.5s forwards;
}
.intro__hint:hover { color: var(--gold-soft); }
.intro__chev { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: introChev 1.8s ease-in-out infinite; }

/* medallion pieces (shared across layers) */
.intro svg .ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: introDraw 1.3s cubic-bezier(.22,.61,.36,1) .1s forwards; }
.intro svg .ring-i { stroke-width: .8; opacity: .45; animation-delay: .25s; }
.intro svg .rise { opacity: 0; transform: translateY(86px); animation: introRise 1.5s cubic-bezier(.22,.61,.36,1) .55s forwards; }
.intro svg .bld { fill: rgba(216,208,194,.05); stroke: var(--gold); stroke-width: 1.35; stroke-linejoin: round; }
.intro svg .mast { stroke: var(--gold); stroke-width: 1; stroke-linecap: round; }
.intro svg .flame { fill: var(--gold); stroke: none; }
.intro svg .sun-glow { fill: url(#sunGlow); }
.intro svg .sun-disc { fill: url(#sunGlow); stroke: var(--gold-soft); stroke-width: 1.3; }
.intro svg .ray { stroke: var(--gold-soft); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: introDraw .9s ease .7s forwards; }
.intro svg .horizon { stroke: var(--gold); stroke-width: 1; opacity: .4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: introDraw 1s ease .5s forwards; }
.intro svg .wave { fill: none; stroke: var(--gold-soft); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro svg .w1 { opacity: .72; animation: introDraw 1.1s ease 1.3s forwards, waveFlow 7s linear 1.3s infinite; }
.intro svg .w2 { opacity: .5;  animation: introDraw 1.1s ease 1.55s forwards, waveFlow 9s linear 1.55s infinite; }
.intro svg .w3 { opacity: .34; animation: introDraw 1.1s ease 1.8s forwards, waveFlow 12s linear 1.8s infinite; }

@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introRise { to { opacity: 1; transform: translateY(0); } }
@keyframes waveFlow  { to { transform: translateX(-120px); } }
@keyframes introCap  { to { opacity: 1; transform: translateY(0); } }
@keyframes introChev { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

@media (max-width: 600px) { .intro__hint { bottom: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .intro svg .ring, .intro svg .ray, .intro svg .horizon, .intro svg .wave { stroke-dashoffset: 0; animation: none; }
  .intro svg .rise { opacity: 1; transform: none; animation: none; }
  .intro__brand { opacity: 1; transform: none; animation: none; }
  .intro__hint { opacity: 1; animation: none; }
  .intro__chev { animation: none; }
}