/* ============================================================
   home.css — Teitoku.net Homepage (Tactical Obsidian)
   Layout and animations specific to the landing page.
   Vertically centered monolith: content floats in the void.
   ============================================================ */

/* --- Page background -------------------------------------- */
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2xl);
  /* Subtle top-left orange wash on pure AMOLED black */
  background:
    radial-gradient(
      ellipse 60% 40% at 15% 0%,
      rgba(255, 144, 101, 0.04) 0%,
      transparent 60%
    ),
    var(--surface-lowest);
}

/* Constraining wrapper — the monolith */
.home__content {
  width: 100%;
  max-width: 900px;
  padding-inline: var(--space-lg);
}


/* --- Hero Section ----------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-4xl);
}

.hero__video-container {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}


/* --- Projects Section ------------------------------------- */
.projects {
  padding-bottom: var(--space-4xl);
}

/* Section label with "data header" prefix style */
.projects__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-lg);
}


/* --- Staggered Load Animations ---------------------------- */
.home .site-title {
  animation: slide-down var(--duration-slow) var(--ease-out) both;
}

.home .hero__video-container {
  animation: slide-up 700ms var(--ease-out) both;
  animation-delay: 150ms;
}

.home .projects__heading {
  animation: fade-in var(--duration-slow) var(--ease-out) both;
  animation-delay: 400ms;
}

.home .project-list .project-item:nth-child(1) {
  animation: slide-up var(--duration-slow) var(--ease-out) both;
  animation-delay: 500ms;
}

.home .project-list .project-item:nth-child(2) {
  animation: slide-up var(--duration-slow) var(--ease-out) both;
  animation-delay: 600ms;
}

.home .footer {
  animation: fade-in var(--duration-slow) var(--ease-out) both;
  animation-delay: 800ms;
}


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

  .home__content {
    padding-inline: var(--space-md);
  }

  .site-title {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .hero {
    padding-bottom: var(--space-3xl);
  }
}

@media (max-width: 480px) {
  .home__content {
    padding-inline: var(--space-sm);
  }

  .site-title {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .site-title__text {
    font-size: var(--text-3xl);
  }

  .hero {
    padding-bottom: var(--space-2xl);
  }
}