/* L’accueil partage les dimensions de départ entre le logo et son emplacement. */
body {
  --hero-logo-width: clamp(445px, 44vw, 620px);
  --hero-logo-height: calc(var(--hero-logo-width) * 584 / 810);
  --hero-logo-gap: 18px;
  --hero-top: 30px;
  --hero-dock-distance: 300px;
  --hero-copy-offset: 275px;
  --hero-dock-width: 104px;
  --hero-dock-height: calc(var(--hero-dock-width) * 584 / 810);
  --hero-dock-left: 14px;
  --hero-title-resting-size: clamp(36px, 4vw, 54px);
  --home-header-height: 100px;
}

.hero-content {
  padding-top: var(--hero-top);
  padding-bottom: 72px;
}

.hero-mark {
  position: relative;
  width: var(--hero-logo-width);
  margin-bottom: var(--hero-logo-gap);
}

.hero-mark,
.site-header .brand-image {
  aspect-ratio: 810 / 584;
  overflow: hidden;
}

/* Les pixels proches du noir deviennent transparents, sans retoucher le PNG. */
.hero-mark img,
.site-header .brand-image img {
  filter: url('#logo-transparent');
}

.hero-mark img {
  position: absolute;
  width: 140%;
  height: auto;
  left: -20%;
  top: -39.4%;
}

.hero h1 {
  font-size: var(--hero-title-resting-size);
  margin-bottom: 16px;
}

.hero-title-line {
  white-space: nowrap;
}

.hero-copy .eyebrow {
  margin-bottom: 12px;
}

@media (min-width: 992px) {
  .hero-photo {
    inset: 0;
    background-size: cover;
    background-position: right 14%;
  }

  .hero-shade {
    background:
      radial-gradient(ellipse at 0% 36%, #07748d42, transparent 58%),
      linear-gradient(90deg, #050b10a8, #050b1070 36%, transparent 73%),
      linear-gradient(0deg, #050707d9, transparent 27%);
  }
}

@media (min-width: 1400px) {
  .hero-content,
  .site-header .navbar {
    max-width: max(1240px, 88%);
  }

  /* Le bord sombre de la photo sort du cadre, le DJ reste ancré à droite. */
  .hero-photo {
    transform: scale(1.21);
    transform-origin: right 12%;
  }
}

@media (max-width: 991px) {
  body {
    --hero-photo-height: clamp(245px, 53vw, 390px);
    --hero-top: calc(var(--hero-photo-height) - 18px);
    --hero-title-resting-size: clamp(18px, 7vw, 58px);
  }

  .hero {
    min-height: 0;
  }

  .hero-mark {
    display: none;
  }

  .hero-photo {
    inset: 0 0 auto;
    height: var(--hero-photo-height);
    background-size: cover;
    background-position: right center;
  }

  .hero-shade {
    inset: 0 0 auto;
    height: var(--hero-photo-height);
    background: linear-gradient(0deg, #050707, transparent 65%);
  }

  .hero-content {
    padding-bottom: 38px;
    text-align: center;
  }

  .hero-copy .eyebrow,
  .hero-note {
    justify-content: center;
    margin-inline: auto;
  }

  .hero-description,
  .hero-actions {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .scroll-cue,
  .hero-image-note {
    display: none;
  }
}

@media (max-width: 380px) {
  .site-header .brand-image {
    width: 94px;
    height: 70px;
  }

  .site-header .brand-image img {
    width: 124px;
    left: -15px;
    top: -22px;
  }

  .site-header .mobile-booking {
    margin-right: 8px;
    padding-inline: 9px;
  }
}

@supports (animation-timeline: scroll(root block)) and (animation-range: 0px 300px) and (scale: calc(1px / 1px)) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .hero-mark {
      visibility: hidden;
    }

    .site-header .brand {
      position: relative;
      width: 132px;
      height: 80px;
    }

    .site-header .brand-image {
      position: absolute;
      width: var(--hero-logo-width);
      height: auto;
      top: 50%;
      left: 0;
      transform-origin: top left;
      animation: hero-logo-dock 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px var(--hero-dock-distance);
    }

    .site-header .brand-image img {
      width: 140%;
      left: -20%;
      top: -39.4%;
    }

    .hero-copy {
      animation: hero-copy-rise 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px var(--hero-dock-distance);
    }

    @media (max-width: 1199px) {
      .site-header .brand {
        width: 115px;
        --hero-dock-left: 9px;
      }
    }

  }
}

@keyframes hero-logo-dock {
  from {
    transform: translate(0, calc(var(--home-header-height) / 2 + var(--hero-top))) scale(1);
  }

  to {
    transform: translate(var(--hero-dock-left), calc(var(--hero-dock-height) / -2))
      scale(calc(var(--hero-dock-width) / var(--hero-logo-width)));
  }
}

/* Le texte suit la même progression pour rester sous le logo. */
@keyframes hero-copy-rise {
  to {
    transform: translateY(calc(var(--hero-copy-offset) - var(--hero-logo-height) - var(--hero-logo-gap)));
  }
}