/* ============================== LOGO INTRO ============================== */
/* Full-bleed splash that reveals the logo on load and folds it back in 3D
   as the user scrolls. Lives only on index.html (id="logoIntro"). */

.logo-intro {
  position: relative;
  /* 200vh creates a 100vh scroll range AFTER the sticky stage parks */
  height: 200vh;
  background: var(--paper);
  overflow-x: clip;
}

.logo-intro__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  overflow: hidden;
  background: var(--paper);
}

/* Subtle background detail — grid + radial glow */
.logo-intro__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.logo-intro__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(36, 41, 51, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36, 41, 51, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 0%, transparent 75%);
  opacity: 0;
  animation: intro-grid-in 2.4s cubic-bezier(.2,.7,.2,1) 1s forwards;
}
.logo-intro__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 60vw;
  max-width: 1400px;
  max-height: 1000px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, var(--accent) 0%, transparent 60%);
  opacity: 0;
  filter: blur(80px);
  animation: intro-glow-in 3s cubic-bezier(.2,.7,.2,1) .6s forwards;
}
@keyframes intro-grid-in {
  to { opacity: 1; }
}
@keyframes intro-glow-in {
  to { opacity: 0.08; }
}

/* Main container — gets transformed by JS */
.logo-intro__container {
  position: relative;
  z-index: 1;
  width: min(92%, 1400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* The logo itself — left-to-right reveal */
.logo-intro__img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0);
  /* Initial state */
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateY(20px);
  animation:
    intro-logo-wipe 2.4s cubic-bezier(.7, 0.02, 0.3, 1) 0.4s forwards,
    intro-logo-rise 1.6s cubic-bezier(.2,.7,.2,1) 0.4s forwards;
  will-change: clip-path, opacity, transform;
}
@keyframes intro-logo-wipe {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0);   -webkit-clip-path: inset(0 0% 0 0); }
}
@keyframes intro-logo-rise {
  0%   { opacity: 0; transform: translateY(20px); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subtitle below the logo */
.logo-intro__sub {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  animation: intro-sub-in 1.6s cubic-bezier(.2,.7,.2,1) 1.8s forwards;
  margin: 0;
}
.logo-intro__sub-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}
@keyframes intro-sub-in {
  to { opacity: 0.8; transform: translateY(0); }
}

/* Scroll hint */
.logo-intro__hint {
  position: absolute;
  bottom: clamp(32px, 5vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  animation: intro-hint-in 1.2s cubic-bezier(.2,.7,.2,1) 2.4s forwards;
  z-index: 2;
  will-change: opacity;
}
.logo-intro__hint-text { opacity: 0.6; }
.logo-intro__hint-arrow {
  font-size: 16px;
  opacity: 0.7;
  animation: intro-hint-bob 2s ease-in-out 3.6s infinite;
}
@keyframes intro-hint-in {
  to { opacity: 1; }
}
@keyframes intro-hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Hide nav over the intro so it's a clean reveal */
body.intro-active .nav {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Reduced motion: just show the logo statically */
@media (prefers-reduced-motion: reduce) {
  .logo-intro { height: auto; padding: 120px 0; }
  .logo-intro__stage { position: relative; height: auto; min-height: 60vh; }
  .logo-intro__img {
    animation: none;
    clip-path: none;
    -webkit-clip-path: none;
    opacity: 1;
    transform: none;
  }
  .logo-intro__sub, .logo-intro__hint, .logo-intro__grid, .logo-intro__glow {
    animation: none;
    opacity: 1;
  }
}