/* Home page: inline intro video + entrance animations */

#arcade {
  scroll-margin-top: 5rem;
}

.hero-intro-media {
  width: 100%;
  max-width: 640px;
  margin: 2rem auto 0;
  padding: 0;
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

.hero-intro-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #000;
  pointer-events: none;
}

.hero-intro-media video::-webkit-media-controls {
  display: none !important;
}

.ht-site--in { animation: siteReveal 0.9s ease forwards; }

@keyframes siteReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ht-site--in .site-nav { animation: slideDown 0.7s ease 0.15s both; }
.ht-site--in .welcome-hero { animation: welcomeIn 0.85s ease 0.25s both; }
.ht-site--in .expertise-strip { animation: welcomeIn 0.85s ease 0.4s both; }
.ht-site--in .section-title,
.ht-site--in .section-sub { animation: welcomeIn 0.7s ease 0.5s both; }
.ht-site--in .path-grid .path-card { animation: cardUp 0.65s ease both; }
.ht-site--in .path-grid .path-card:nth-child(1) { animation-delay: 0.55s; }
.ht-site--in .path-grid .path-card:nth-child(2) { animation-delay: 0.65s; }
.ht-site--in .path-grid .path-card:nth-child(3) { animation-delay: 0.75s; }
.ht-site--in .path-grid .path-card:nth-child(4) { animation-delay: 0.85s; }
.ht-site--in .partner-section,
.ht-site--in .build-section,
.ht-site--in .grid .card { animation: cardUp 0.7s ease 0.85s both; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .hero-intro-media {
    max-width: 100%;
    margin-top: 1.5rem;
  }

  .build-section .btn-primary {
    width: 100%;
    max-width: 22rem;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ht-site--in,
  .ht-site--in .site-nav,
  .ht-site--in .welcome-hero,
  .ht-site--in .expertise-strip,
  .ht-site--in .section-title,
  .ht-site--in .section-sub,
  .ht-site--in .path-grid .path-card,
  .ht-site--in .partner-section,
  .ht-site--in .build-section,
  .ht-site--in .grid .card,
  .welcome-hero {
    animation: none !important;
  }
}