/* ============================================================
   Seeble — Core / manifesto
   Lines surface one-by-one from blur, drifting auras, floating motes.
   ============================================================ */

.core-stage {
  position: relative; min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: 120px 24px;
}

/* drifting color auras */
.aura { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(46px); opacity: .5; z-index: 0; }
.aura.a1 { width: 460px; height: 460px; top: 8%; left: 8%; background: radial-gradient(closest-side, rgba(0,0,0,0.06), transparent 70%); animation: drift1 22s var(--ease) infinite alternate; }
.aura.a2 { width: 520px; height: 520px; bottom: 4%; right: 6%; background: radial-gradient(closest-side, rgba(0,0,0,0.05), transparent 70%); animation: drift2 26s var(--ease) infinite alternate; }
.aura.a3 { width: 380px; height: 380px; top: 40%; right: 30%; background: radial-gradient(closest-side, rgba(0,0,0,0.04), transparent 70%); animation: drift3 30s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(80px, 60px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-70px, -50px) scale(1.1); } }
@keyframes drift3 { to { transform: translate(40px, -70px) scale(1.2); } }

/* floating motes */
.motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mote { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .22; animation: float linear infinite; }
@keyframes float {
  0% { transform: translateY(20px); opacity: 0; }
  15% { opacity: .4; }
  85% { opacity: .4; }
  100% { transform: translateY(-120px); opacity: 0; }
}

.core-eyebrow { position: relative; z-index: 2; margin-bottom: 48px; opacity: 0; transition: opacity 1.2s ease; }
.core-eyebrow.in { opacity: 1; }

.manifesto { position: relative; z-index: 2; max-width: 940px; }
.manifesto .ln {
  display: block; font-weight: 700; letter-spacing: -0.035em; line-height: 1.18;
  font-size: clamp(28px, 5vw, 58px); color: var(--ink);
  opacity: 0; filter: blur(14px); transform: translateY(14px);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease), transform 1.4s var(--ease);
}
.manifesto .ln.light { color: var(--muted); font-weight: 600; }
.manifesto .ln.in { opacity: 1; filter: blur(0); transform: none; }
/* final two lines heaviest */
.manifesto .ln.heavy { font-weight: 800; font-size: clamp(34px, 6.4vw, 76px); color: var(--ink); letter-spacing: -0.045em; }
.manifesto .ln.heavy.in { text-shadow: 0 1px 40px rgba(0,0,0,0.08); }
.manifesto .ln.first { margin-top: 6px; }
.manifesto .gap { height: 14px; }

.core-scroll { position: relative; z-index: 2; margin-top: 64px; opacity: 0; transition: opacity 1.5s ease; }
.core-scroll.in { opacity: 1; }
.core-scroll .chev { width: 22px; height: 22px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 auto; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: rotate(45deg) translate(0,0);} 50%{ transform: rotate(45deg) translate(4px,4px);} }

/* essence / below the fold */
.essence { background: var(--ink); color: #fff; }
.essence .wrap { padding: 120px 24px; max-width: 760px; }
.essence h2 { font-size: clamp(30px, 4vw, 48px); color: #fff; }
.essence p { color: rgba(255,255,255,0.7); font-weight: 500; font-size: 17px; line-height: 1.65; margin-top: 18px; }
.essence p + p { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .aura, .mote, .core-scroll .chev { animation: none; }
  .manifesto .ln { transition: none; }
}