/* ─── HERO LAYOUT  ------------------------------------------------- */
.hero {
  margin-top: 0;
  padding-top: clamp(72px, 9vh, 108px);  /* keep clearance for fixed header */
  min-height: 100svh;
  height: auto;
  width: 100%;
  max-width: 100%;
  display: flex;               /* keeps wave + mesh positioned */
  flex-direction: column;
  justify-content: center;     /* Centers content vertically */
  align-items: center;         /* Centers content horizontally */
  position: relative;
  overflow: hidden;
  background: 
    radial-gradient(circle at 50% 40%, transparent 0 60%, #0006 100%), 
    linear-gradient(135deg, hsl(276 70% 40%) 0%, hsl(270 63% 24%) 40%, #000 100%);
}

/* Ensures full height and width for the inner container */
.hero-inner {
  display: flex;
  justify-content: center;      /* Centers vertically */
  align-items: center;          /* Centers horizontally */
  z-index: 2;
}

.hero-orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 0.92;
  pointer-events: none;
}

/* ── FLEX WRAPPER (two columns) ───────────────────── */
.hero__wrap {

  display: flex;
  flex-direction: column;
  justify-content: center;     /* Centers vertically */
  align-items: center;         /* Centers horizontally */
  gap: 1.5rem;                 /* Space between modules */
  z-index: 2;
  position: relative;
  width: min(96vw, 1560px);
  min-height: 30vh;
  margin-top: clamp(1rem, 3vh, 2.5rem);
  padding: 1rem 1.2rem 1rem;
  transform: translateY(-2.4rem);
}

.hero-hud {
  position: absolute;
  inset: 0;
  border: none;
  box-shadow: none;
  pointer-events: none;
  overflow: hidden;
}

.hud-status {
  position: absolute;
  top: 8px;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: hsl(198 100% 76%);
  text-shadow: 0 0 12px hsl(198 100% 60% / 0.65);
  z-index: 2;
}

.hud-status--left {
  left: 40px;
}

.hud-status--right {
  right: 40px;
}

/* LEFT COLUMN - name */
.hero__name-title {
  font-size: clamp(2rem, 1.6vw, 3rem);
  padding-top: 0;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  display: block;
  z-index: 2;
  margin: 0 0 0.25rem;
  position: relative;
}

.hero__subtitle {
  margin: -0.25rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(0 0% 100% / 0.85);
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: min(98%, 2300px);
}

.hero__identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5rem, 10vw, 2.5rem);
  margin-top: 0.7rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero__name {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__right {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.hero__name-title,
.hero__subtitle {
  text-align: center;
}

.hero-portrait {
  width: clamp(118px, 9vw, 220px);
  height: clamp(118px, 9vw, 220px);
  margin: 0;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}


/* HERO BUTTONS – centered in .hero__right */
.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

/* SCROLL HINT – centered at the bottom */
.scroll-hint {
  font-size: 0.95rem;
  color: #ffffff88;
  animation: bob 2.8s ease-in-out infinite;
  display: flex;
  justify-content: center;     /* Centers horizontally */
  align-items: center;         /* Centers vertically */
  margin: 0;
  line-height: 1;
  padding-bottom:0.5rem;
}

.hero-start-btn {
  margin-top: 0.1rem;
  min-width: 180px;
  text-align: center;
  letter-spacing: 0.08em;
  border-color: hsl(198 100% 52%);
  background: linear-gradient(45deg, hsl(198 100% 48%), hsl(198 100% 34%));
  box-shadow: 0 0 18px hsl(198 100% 50% / 0.55);
}

.hero-start-btn:hover,
.hero-start-btn:focus {
  background: linear-gradient(45deg, hsl(198 100% 58%), hsl(198 100% 40%));
  box-shadow:
    0 6px 12px rgb(0 0 0 / 0.3),
    0 0 26px hsl(198 100% 62% / 0.9),
    0 0 44px hsl(188 100% 66% / 0.55);
}

.hero-start-btn.is-pressed {
  transform: translateY(2px) scale(0.98);
  filter: brightness(1.15);
}

/* BOBBING ANIMATION for .scroll-hint */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* responsive: stack on narrow screens */
@media (max-width: 780px) {
  .hero__wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 1.1rem;
    min-height: auto;
    padding: 1.3rem 0.8rem 1.2rem;
    transform: translateY(-0.8rem);
  }

  .hero__identity {
    flex-direction: column;
    gap: 1.3rem;
    margin-top: 0.45rem;
  }

  .hero__right {
    position: static;
    transform: none;
    width: auto;
  }

  .hero__name {
    align-items: center;
  }

  .hero__name-title,
  .hero__subtitle {
    text-align: center;
  }

  .hero-portrait {
    width: min(44vw, 168px);
    height: min(44vw, 168px);
  }

  .hud-status--right {
    display: none;
  }

  .hud-status--left {
    left: 34px;
    top: 8px;
    font-size: 0.62rem;
  }

}

@media (min-width: 2000px) {
  .hero {
    padding-top: clamp(84px, 8vh, 132px);
    min-height: 100svh;
  }

  .hero__wrap {
    width: min(2300px, 96vw);
    min-height: 62vh;
    gap: 2.6rem;
    margin-top: clamp(0rem, 1vh, 0.8rem);
    transform: translateY(-0.6rem);
  }

  .hero__identity {
    gap: clamp(5rem, 8vw, 10rem);
  }

  .hero-portrait {
    width: clamp(220px, 13vw, 360px);
    height: clamp(220px, 13vw, 360px);
  }

  .hero__name-title {
    font-size: clamp(3.2rem, 2.3vw, 4.8rem);
  }

  .hero__subtitle {
    font-size: clamp(1.35rem, 1.05vw, 2.1rem);
    margin-top: -0.55rem;
    max-width: min(98%, 3000px);
    line-height: 1.7;
  }

  .scroll-hint {
    font-size: 1.25rem;
    padding-bottom: 0.9rem;
  }

  .hero-start-btn {
    min-width: 280px;
    font-size: 1.3rem;
    padding: 1rem 1.6rem;
  }
}