/* =========================================================
   home.css — Landing page hero section
   ========================================================= */

/* Disable scroll on the landing page — content is always viewport-fit */
html.page--no-scroll,
html.page--no-scroll body {
  overflow: hidden;
}

/* ---------------------------------------------------------
   Hero — full-viewport centred section
   --------------------------------------------------------- */
.hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--content-gutter);
}

/* ---------------------------------------------------------
   Frame — content wrapper with corner decorations
   --------------------------------------------------------- */
.hero__frame {
  position: relative;
  max-width: 900px;
  width: 100%;
  padding: var(--space-16) var(--space-24);

  /* Entrance state — JS adds .is-visible */
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero__frame.is-visible {
  opacity: 1;
}

/* Corner box-drawing characters */
.hero__corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-cyan);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

.hero__corner--tl { top:    0; left:  0; }
.hero__corner--tr { top:    0; right: 0; }
.hero__corner--bl { bottom: 0; left:  0; }
.hero__corner--br { bottom: 0; right: 0; }

/* ---------------------------------------------------------
   Inner content
   --------------------------------------------------------- */
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---------------------------------------------------------
   Name — hero heading, drops in with scramble
   --------------------------------------------------------- */
.hero__name {
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;

  /* Entrance — starts above, drops into place */
  opacity: 0;
  transform: translateY(-52px);
  transition:
    opacity  250ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__name.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Word wrapper — each word on its own line, left-aligned */
.hero__word {
  display: block;
}

/* Individual letter spans — inline-block so JS can pin width */
.hero__letter {
  display: inline-block;
  cursor: default;
}

/* ---------------------------------------------------------
   Role
   --------------------------------------------------------- */
.hero__role {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.22em;
  color: var(--color-cyan);
  text-transform: uppercase;
  margin: 0;

  /* Entrance */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.hero__role.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   Separator — draws left to right
   --------------------------------------------------------- */
.hero__sep {
  height: 1px;
  width: 0;
  background-color: var(--color-border);
  opacity: 0;
  margin-block: var(--space-2);
  transition:
    width   600ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.hero__sep.is-visible {
  width: min(320px, 100%);
  opacity: 1;
}

/* ---------------------------------------------------------
   Positioning statement
   --------------------------------------------------------- */
.hero__statement {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-dim);
  max-width: 60ch;
  margin: 0;

  /* Entrance */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.hero__statement.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__bracket {
  color: var(--color-cyan);
  font-size: 1.1em;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .hero__frame {
    padding: var(--space-8) var(--space-8);
  }

  .hero__name {
    font-size: 3.5rem;
  }
}

@media (max-width: 480px) {
  .hero__frame {
    padding: var(--space-8) var(--space-6);
  }

  .hero__name {
    font-size: clamp(2rem, 11vw, 3.5rem);
    letter-spacing: 0.02em;
  }

  .hero__statement {
    font-size: var(--text-sm);
  }
}

/* ---------------------------------------------------------
   Hero nav — page links centered below the card
   --------------------------------------------------------- */
.hero__nav {
  /* Starts hidden; glitch-in effect is driven entirely by JS */
  opacity: 0;
}

.hero__nav.is-visible {
  opacity: 1;
}

.hero__nav-list {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero__nav-link {
  font-family: var(--font-mono);
  font-size: calc(var(--text-sm) * 1.75);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00e5ff;
  display: inline-block;
  position: relative;
  background: #09090e;
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 0.3em 0.7em;
  transition: color var(--transition-fast);
}

.hero__nav-link:hover,
.hero__nav-link:focus-visible {
  color: var(--color-text);
}