/* Keep the animated universe visible above the page backdrop and below all content. */
body {
  position: relative;
  isolation: isolate;
  background: #030510;
}

html {
  scroll-padding-top: 96px;
}

main section[id] {
  scroll-margin-top: 96px;
}

.nebula-layer { z-index: 0; }
#universe3d { z-index: 1; visibility: visible; }
#space { z-index: 2; }
.atmosphere { z-index: 3; }

main,
footer {
  position: relative;
  z-index: 5;
}

/* Navigation remains available after selecting or scrolling to a section. */
.hud.hidden {
  transform: none;
}

.webgl-ready #universe3d { opacity: 1; }
.webgl-fallback #universe3d { display: none; }

/* Show the full oversized, washed-out section labels instead of clipping them. */
.section::before {
  right: 2vw;
  max-width: 96vw;
  font-size: clamp(68px, 12vw, 180px);
  line-height: .9;
  letter-spacing: -.075em;
  text-align: right;
  white-space: nowrap;
}

.experience-intro {
  min-width: 0;
}

.experience-intro h2 {
  font-size: clamp(42px, 5.15vw, 82px);
  line-height: 1;
  letter-spacing: -.055em;
  padding-bottom: .08em;
}

/* The second portrait now anchors the About story instead of crowding the hero. */
.portrait-main {
  left: 50%;
  top: 68px;
  width: 330px;
  height: 420px;
  transform: translateX(-50%) translateZ(95px) rotateY(6deg) rotateZ(-2deg);
}

.about-portrait {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 4 / 5;
  margin: 46px 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 123, 60, .34);
  background: #08101d;
  box-shadow: -18px 22px 0 rgba(85, 223, 255, .08), 0 32px 80px rgba(0, 0, 0, .48), 0 0 32px rgba(255, 123, 60, .08);
  transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotateZ(2deg);
  transform-style: preserve-3d;
}

.experience-portrait {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 3 / 4;
  margin: 42px 0 0;
  overflow: hidden;
  border: 1px solid rgba(85, 223, 255, .32);
  background: #050914;
  box-shadow: 18px 22px 0 rgba(143, 107, 255, .08), 0 34px 90px rgba(0, 0, 0, .5), 0 0 38px rgba(85, 223, 255, .08);
  transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotateZ(-1.5deg);
  transform-style: preserve-3d;
}

.experience-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(85, 223, 255, .09), transparent 42%, rgba(143, 107, 255, .1));
}

.experience-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-portrait figcaption {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(3, 8, 18, .76);
  backdrop-filter: blur(12px);
}

.experience-portrait figcaption span,
.experience-portrait figcaption strong { display: block; }

.experience-portrait figcaption span {
  color: var(--space-blue);
  font: 8px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.experience-portrait figcaption strong {
  margin-top: 5px;
  font-size: 14px;
}

.about-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 123, 60, .12), transparent 38%, rgba(85, 223, 255, .08));
}

.about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-portrait figcaption {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(3, 8, 18, .74);
  backdrop-filter: blur(12px);
}

.about-portrait figcaption span,
.about-portrait figcaption strong {
  display: block;
}

.about-portrait figcaption span {
  color: var(--space-orange);
  font: 8px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-portrait figcaption strong {
  margin-top: 5px;
  font-size: 14px;
}

/* Refined motion for the “Three ways I help” service constellation. */
.service-card {
  animation: service-hover 7s ease-in-out infinite;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.service-card:nth-child(2) { animation-delay: -2.3s; }
.service-card:nth-child(3) { animation-delay: -4.6s; }

.service-card::before {
  inset: auto auto auto 0;
  top: -1px;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(174, 238, 255, .35), #55dfff, transparent);
  box-shadow: 0 0 12px rgba(85, 223, 255, .35);
  opacity: 0;
  transform: translateX(-120%);
  animation: service-edge-scan 7s cubic-bezier(.45, 0, .2, 1) infinite;
}

.service-card:nth-child(2)::before { animation-delay: 2.2s; }
.service-card:nth-child(3)::before { animation-delay: 4.4s; }

.service-card:hover {
  border-color: rgba(85, 223, 255, .38);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48), inset 0 0 46px rgba(85, 223, 255, .045), 0 0 26px rgba(85, 223, 255, .08);
}

.service-glyph {
  animation: glyph-hover 6s ease-in-out infinite;
}

.service-card:nth-child(2) .service-glyph { animation-delay: -2s; }
.service-card:nth-child(3) .service-glyph { animation-delay: -4s; }

@keyframes service-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes service-edge-scan {
  0%, 68% { opacity: 0; transform: translateX(-120%); }
  72% { opacity: .9; }
  91% { opacity: .65; }
  100% { opacity: 0; transform: translateX(265%); }
}

@keyframes glyph-hover {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -4px; rotate: 2deg; }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 88px;
  }

  main section[id] {
    scroll-margin-top: 88px;
  }

  .section::before {
    right: 4vw;
    max-width: 92vw;
    font-size: clamp(52px, 11.5vw, 88px);
  }

  .experience-intro h2 {
    font-size: clamp(42px, 12vw, 66px);
  }

  .portrait-main {
    left: 50%;
    top: 72px;
    width: 235px;
    height: 305px;
    transform: translateX(-50%) translateZ(60px) rotateZ(-2deg);
  }

  .about-portrait {
    width: min(380px, 100%);
    margin: 38px auto 8px;
  }

  .experience-portrait {
    width: min(390px, 100%);
    margin: 38px auto 12px;
  }

  .service-card,
  .service-card::before,
  .service-glyph {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before,
  .service-glyph {
    animation: none !important;
  }
}