/* Homepage –full-bleed video composition */

.page-home {
  /* Tight-cropped full logo (transparent padding only) */
  --logo-w: min(94vw, 1080px);
  --logo-h: calc(var(--logo-w) * 265 / 3462);
  --logo-gap: 0.85rem;
  min-height: 100%;
  min-height: 100dvh;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  animation: videoSettle 2.4s var(--ease) both;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 40%, rgba(8, 7, 6, 0.14) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 28%, transparent 72%, rgba(8, 7, 6, 0.1) 100%);
}

.hero-brand {
  position: absolute;
  z-index: 3;
  /* Compensate remaining ~4px crop pad so glyph aligns with Shop / Instagram */
  left: calc(var(--pad) - (4 / 3462) * var(--logo-w));
  top: var(--pad);
  width: var(--logo-w);
  margin: 0;
  animation: brandIn 1.35s var(--ease) 0.12s both;
}

.hero-brand__link {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
}

.hero-brand__link:hover {
  opacity: 0.72;
}

.hero-brand__link:focus-visible {
  outline: 1px solid #000;
  outline-offset: 4px;
}

.hero-brand__logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  /* Source is dark-on-transparent –force pure black */
  filter: brightness(0);
}

/* Shop + Instagram –same type as shop page */
.page-home .nav-shop,
.page-home .nav-instagram {
  font-family: var(--font);
  font-size: var(--nav-size);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #000;
  text-shadow: none;
}

.page-home .nav-shop,
.page-home .nav-index {
  top: calc(var(--pad) + var(--logo-h) + var(--logo-gap));
  transform: none;
}

.page-home .nav-shop {
  left: var(--pad);
}

.page-home .nav-index {
  right: var(--pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35em;
  height: 2.35em;
  padding: 0 0.7em;
  border-radius: 999px;
  background: rgba(228, 228, 233, 0.75);
  color: #000;
  text-shadow: none;
  /* optically center with Shop text line */
  top: calc(var(--pad) + var(--logo-h) + var(--logo-gap) - 0.85em);
}

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

@keyframes videoSettle {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

@media (max-width: 640px) {
  .page-home {
    --logo-w: min(92vw, 1080px);
  }

  .page-home .nav-shop {
    top: calc(var(--pad) + var(--logo-h) + var(--logo-gap));
    bottom: auto;
    transform: none;
  }
}