/* ver30 — hero atmosphere layers (scoped to #portfolio-stage) */

#portfolio-stage {
  --stage-atmosphere-opacity: 1;
  --stage-stars-opacity: 0.72;
}

#portfolio-stage .stage-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--stage-atmosphere-opacity);
}

#portfolio-stage .stage-atmosphere--fallback {
  background:
    var(--hero-glow),
    var(--hero-glow-secondary),
    var(--gradient-radial),
    var(--color-bg);
}

#portfolio-stage .stage-content {
  position: relative;
  z-index: 1;
}

#portfolio-stage .hero__webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#portfolio-stage .hero__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: var(--stage-stars-opacity);
}

#portfolio-stage .hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.48) 100%);
}

#portfolio-stage .hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#portfolio-stage .hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--header-height) var(--container-pad) 4rem;
  overflow: hidden;
  background: transparent;
}

#portfolio-stage .hero__center {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  will-change: transform;
}

#portfolio-stage .hero__eyebrow {
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(0.75rem);
}

#portfolio-stage .hero.is-revealed .hero__eyebrow {
  opacity: 0.85;
  transform: translateY(0);
  transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}

#portfolio-stage .hero__title-line:first-child {
  position: relative;
  isolation: isolate;
}

#portfolio-stage .hero__title-char {
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}

#portfolio-stage .hero__subtitle {
  margin: clamp(1rem, 2.5vh, 1.75rem) 0 0;
  max-width: none;
  padding-inline: var(--container-pad);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(0.95rem, 1.85vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-variation-settings: "opsz" 40;
  opacity: 0;
  transform: translateY(1rem);
}

@media (max-width: 640px) {
  #portfolio-stage .hero__subtitle {
    white-space: normal;
    max-width: min(22rem, 88vw);
    font-size: clamp(0.95rem, 3.8vw, 1.2rem);
  }
}

#portfolio-stage .hero.is-revealed .hero__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s;
}

#portfolio-stage .hero__scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
}

#portfolio-stage .hero__scroll-cue::after {
  content: "";
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: hero-scroll-bob 2s ease-in-out infinite;
}

#portfolio-stage .hero.is-revealed .hero__scroll-cue {
  opacity: 0.7;
  transition: opacity 0.8s ease 0.7s;
}

@keyframes hero-scroll-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* Header polish */
#portfolio-stage .site-header {
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  backdrop-filter: blur(16px);
}

#portfolio-stage .site-header__brand {
  transition: color var(--duration-fast);
}

#portfolio-stage .site-header__brand:hover .site-header__brand-text,
#portfolio-stage .site-header__brand:focus-visible .site-header__brand-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#portfolio-stage .site-header__contact {
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent);
}

@media (max-width: 768px) {
  #portfolio-stage .hero {
    padding-bottom: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-stage .hero__scroll-cue::after {
    animation: none;
  }

  #portfolio-stage .stage-atmosphere {
    transition: none;
  }
}