/* Black title card first, then a tactile analogue-photo strip enters from the right. */
.hero-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('carnet-collage.webp') center center / cover no-repeat;
  clip-path: inset(0 0 0 100%);
  animation: carnet-reveal 1s cubic-bezier(.72, 0, .17, 1) .25s forwards;
  will-change: clip-path;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 10, 8, .62) 0%, rgba(3, 10, 8, .20) 46%, rgba(3, 10, 8, .36) 100%),
    linear-gradient(0deg, rgba(3, 10, 8, .58) 0%, transparent 42%, rgba(3, 10, 8, .20) 100%);
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  animation: carnet-reveal 1s cubic-bezier(.72, 0, .17, 1) .25s forwards;
  pointer-events: none;
}

.hero-kicker,
.hero-title,
.hero-bottom { z-index: 3; }

.hero-title { mix-blend-mode: normal; }
.hero-title h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, .18); }
.hero-title h1 { font-size: clamp(82px, 13vw, 200px); }
.hero-bottom a {
  background: rgba(5, 14, 11, .2);
  backdrop-filter: blur(5px);
  padding: 8px 10px 7px;
}
.orbit { z-index: 2; border-color: rgba(216, 238, 73, .35); }

@keyframes carnet-reveal {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 60%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-collage, .hero-shade { clip-path: inset(0 0 0 60%); animation: none; }
}

@media (max-width: 640px) {
  .hero-title > span { font-size: 18px; }
  .hero-title h1 { font-size: 18vw; }
  .hero-collage, .hero-shade { animation-duration: .9s; }
  .hero-collage { background-position: center center; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(3, 10, 8, .48), rgba(3, 10, 8, .16)),
      linear-gradient(0deg, rgba(3, 10, 8, .68), transparent 55%, rgba(3, 10, 8, .26));
  }
  .hero-kicker span:first-child { max-width: 45%; }
  .hero-bottom a { backdrop-filter: none; background: transparent; padding: 0; }
}