/* Hero: zonsondergang boven een laser-grid, met het chromen MEZZA-logo. */

.hero {
  --horizon: 61%;
  position: relative;
  display: grid;
  grid-template-rows: var(--horizon) 1fr;
  min-height: max(100vh, 40rem);
  min-height: max(100svh, 40rem);
  padding: 0 var(--gutter);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% var(--horizon), oklch(0.42 0.16 20 / 0.55), transparent 60%),
    linear-gradient(180deg, var(--night-950) 0%, oklch(0.2 0.08 290) calc(var(--horizon) - 16%), oklch(0.3 0.13 340) var(--horizon), var(--night-950) calc(var(--horizon) + 0.2%));
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

/* Fijne scanlines: alleen zichtbaar als textuur, niet als effect */
.hero__scanlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, oklch(0.1 0.03 278 / 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* Boven de horizon: merk. Onder de horizon, op de vloer: tekst en knop. */
.hero__sky,
.hero__floor {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  text-align: center;
}

.hero__sky {
  align-content: end;
  gap: var(--space-xs);
  padding-top: calc(var(--header-height) + var(--space-l));
  padding-bottom: clamp(1rem, 3vh, 2.5rem);
}

.hero__floor {
  align-content: start;
  gap: var(--space-m);
  padding-top: clamp(1.25rem, 4vh, 3rem);
  padding-bottom: var(--space-2xl);
}

.hero__kicker {
  padding: 0.35rem 0.9rem 0.35rem 1.2rem;
  border-radius: var(--radius-pill);
  background: oklch(0.13 0.04 278 / 0.72);
  box-shadow: inset 0 0 0 1px oklch(0.85 0.15 78 / 0.25);
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 14px var(--amber-glow);
}

.hero__title {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  margin: 0;
  font-weight: inherit;
}

.hero__logo {
  width: min(100%, 64rem);
  height: auto;
  overflow: visible;
}

.hero__logo text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 184px;
  font-variation-settings: 'wdth' 150, 'wght' 900;
}

.hero__logo-shadow {
  fill: oklch(0.08 0.03 278 / 0.85);
  transform: translate(6px, 10px);
  filter: blur(6px);
}

.hero__logo-text {
  fill: url(#chrome);
  stroke: oklch(0.98 0.02 230);
  stroke-width: 2.5px;
  paint-order: stroke fill;
}

/* Glans die over het chroom schuift */
.hero__logo-shine {
  fill: oklch(1 0 0 / 0.85);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-size: 300% 100%;
  mask-repeat: no-repeat;
  mask-position: 120% 0;
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 120% 0;
  mix-blend-mode: overlay;
}

.js-motion .hero__logo-shine {
  animation: chrome-shine 7s var(--ease-in-out) 2.2s infinite;
}

@keyframes chrome-shine {
  0%,
  100% {
    mask-position: 120% 0;
    -webkit-mask-position: 120% 0;
  }

  35% {
    mask-position: -20% 0;
    -webkit-mask-position: -20% 0;
  }
}

/* Ster-glinstering rechtsboven op het logo */
.hero__glint {
  position: absolute;
  top: 8%;
  right: 7%;
  width: clamp(28px, 4vw, 54px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, oklch(1 0 0) 0 6%, transparent 7%),
    linear-gradient(90deg, transparent 47%, oklch(1 0 0 / 0.95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, oklch(1 0 0 / 0.95) 50%, transparent 53%);
  -webkit-mask-image: radial-gradient(circle, #000 0 15%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0 15%, transparent 70%);
  filter: drop-shadow(0 0 6px oklch(0.95 0.05 230));
  opacity: 0;
  pointer-events: none;
}

.js-motion .hero__glint {
  animation: glint 7s var(--ease-out) 2.9s infinite;
}

@keyframes glint {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }

  6% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }

  14% {
    opacity: 0;
    transform: scale(0.3) rotate(90deg);
  }
}

.hero__tagline {
  margin-top: -0.4em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-stretch: 130%;
  font-size: var(--step-2);
  letter-spacing: 0.06em;
  color: var(--paper);
  text-shadow: 0 0 24px oklch(0.66 0.24 355 / 0.6);
}

.hero__intro {
  max-width: 40ch;
  color: var(--paper);
  text-shadow: 0 2px 12px oklch(0.08 0.03 278), 0 0 2px oklch(0.08 0.03 278);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__cta {
  margin-top: var(--space-2xs);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-m);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-stretch: 62%;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-faint);
}

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(180deg, var(--amber), transparent);
}

.js-motion .hero__scroll::after {
  animation: scroll-hint 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}

@keyframes scroll-hint {
  0% {
    transform: scaleY(0);
  }

  50% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* ---------- Openingsanimatie ---------- */

.js-motion .hero__logo {
  animation: logo-rise 1.6s var(--ease-out) 0.35s both;
}

.js-motion .hero__tagline {
  animation: tagline-in 1.2s var(--ease-out) 1.1s both;
}

@keyframes logo-rise {
  from {
    opacity: 0;
    transform: translateY(18%) scaleY(0.6);
    filter: blur(14px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes tagline-in {
  from {
    opacity: 0;
    letter-spacing: 0.6em;
    filter: blur(6px);
  }

  to {
    opacity: 1;
    letter-spacing: 0.06em;
    filter: blur(0);
  }
}

.js-motion .hero [data-reveal] {
  transition-delay: 1.3s;
}

.js-motion .hero .hero__intro[data-reveal] {
  transition-delay: 1.45s;
}

.js-motion .hero .hero__cta[data-reveal] {
  transition-delay: 1.6s;
}

/* ---------- Responsief ---------- */

@media (max-width: 640px) {
  .hero {
    --horizon: 56%;
  }

  .hero__floor {
    gap: var(--space-s);
    padding-bottom: var(--space-xl);
  }

  .hero__kicker {
    letter-spacing: 0.22em;
  }

  .hero__tagline {
    margin-top: -0.2em;
  }
}

@media (max-width: 420px) {
  .hero__cta {
    width: auto;
  }

  .hero__scroll {
    display: none;
  }
}

/* Lage schermen: de scroll-hint zou over de knop vallen */
@media (max-height: 820px) {
  .hero__scroll {
    display: none;
  }
}

/* Telefoon liggend: lage hoogte, dus compacter logo en een kortere hero */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: max(100vh, 26rem);
    min-height: max(100svh, 26rem);
  }

  .hero__sky {
    padding-top: calc(var(--header-height) + var(--space-s));
    padding-bottom: var(--space-2xs);
  }

  .hero__logo {
    width: min(100%, 30rem);
  }

  .hero__tagline {
    font-size: var(--step-1);
  }

  .hero__floor {
    gap: var(--space-xs);
    padding-top: var(--space-s);
    padding-bottom: var(--space-l);
  }

  .hero__intro {
    font-size: var(--step-0);
  }
}