/* Hero – full-bleed photo with the headline, nothing clickable.
   .hero          section, at least one screen tall; the photo covers it
   .hero__photo   the image; --focus keeps the unit in view when the screen is narrow
   .hero__brand   wordmark top left (an image, not a link)
   .hero__text    bottom left: eyebrow, headline, LED line, subline
   .hero__led     a thin LED-blue line that lights up under the headline
   Entrance: the photo settles from a slight zoom, the text lines rise one after another. */

.hero {
  --focus: 28% 55%;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46rem);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #0c0e10;
  color: #f6f7f9;
  isolation: isolate;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
  transform: scale(1.05);
  animation: hero-settle 7s var(--ease-out) forwards;
}

@keyframes hero-settle {
  to {
    transform: none;
  }
}

/* Legibility: a quiet gradient from the bottom right, the unit on the left keeps its light */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(10 12 15 / 0.25) 0%, transparent 28%),
    linear-gradient(-12deg, rgb(10 12 15 / 0.8) 0%, rgb(10 12 15 / 0.4) 36%, transparent 60%);
}

.hero__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--gutter);
}

.hero__brand {
  height: 26px;
  width: auto;
  opacity: 0;
  animation: hero-rise var(--dur-slower) var(--ease-out) 200ms forwards;
}

/* Distributor's logotype top right, white like the brand on the left, the same visual weight */
.hero__partner {
  height: 30px;
  width: auto;
  opacity: 0;
  animation: hero-rise var(--dur-slower) var(--ease-out) 320ms forwards;
}

.hero__tag {
  font-size: var(--text-small);
  font-weight: 500;
  color: rgb(246 247 249 / 0.8);
  opacity: 0;
  animation: hero-rise var(--dur-slower) var(--ease-out) 350ms forwards;
}

/* Bottom right, clear of the unit on the left */
.hero__text {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--gutter) calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--led-400);
}

.hero__led {
  display: block;
  width: 120px;
  height: 2px;
  border-radius: 1px;
  background: var(--led-500);
  box-shadow: 0 0 12px rgb(49 187 238 / 0.9), 0 0 32px rgb(49 187 238 / 0.5);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__sub {
  margin: 0;
  max-width: 34rem;
  font-size: var(--text-lead);
  line-height: 1.45;
  color: rgb(246 247 249 / 0.82);
}

/* Staggered entrance */
.hero__text > * {
  opacity: 0;
  animation: hero-rise var(--dur-slower) var(--ease-out) forwards;
}

.hero__text > :nth-child(1) { animation-delay: 500ms; }
.hero__text > :nth-child(2) { animation: hero-led var(--dur-cinematic) var(--ease-emphasis) 900ms forwards; }
.hero__text > :nth-child(3) { animation-delay: 1000ms; }

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-led {
  from {
    opacity: 1;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll hint: a short line that drips down, bottom center */
.hero__hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  width: 1px;
  height: 36px;
  overflow: hidden;
  opacity: 0;
  animation: hero-rise var(--dur-slower) var(--ease-out) 1800ms forwards;
}

.hero__hint::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgb(246 247 249 / 0.8));
  animation: hero-drip 2.2s var(--ease-in-out) infinite;
}

@keyframes hero-drip {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

/* Narrow screens: the text goes to the top under the wordmark, the unit shows below it */
@media (max-width: 1100px) and (min-width: 761px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 56%);
  }
}

@media (max-width: 760px) {
  .hero {
    --focus: 24% 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgb(10 12 15 / 0.82) 0%, rgb(10 12 15 / 0.45) 40%, transparent 62%);
  }

  .hero__brand {
    height: 22px;
  }

  .hero__partner {
    height: 24px;
  }

  .hero__text {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-2) var(--gutter) var(--space-6);
  }

  .hero__sub {
    font-size: var(--text-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .hero__brand,
  .hero__partner,
  .hero__tag,
  .hero__text > *,
  .hero__hint,
  .hero__hint::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}