/* ============================================
   BYA — Institut de beauté
   HERO — écran d'accueil plein cadre (page d'accueil)
   ============================================ */

.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: end start;
  color: var(--ivory);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero-media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: scale(1.06);
  animation: heroZoom 22s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.14); }
  to { transform: scale(1.02); }
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(36, 23, 16, 0.72) 0%, rgba(36, 23, 16, 0.28) 52%, rgba(36, 23, 16, 0.4) 100%),
    linear-gradient(180deg, rgba(36, 23, 16, 0.18) 0%, rgba(36, 23, 16, 0.55) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 0 0 13vh 6vw;
  max-width: 800px;
}

.hero-copy > * {
  opacity: 0;
  transform: translateY(28px);
  animation: rise 1.15s var(--ease) forwards;
}

.hero-copy .label { animation-delay: 0.15s; }
.hero-copy h1 { animation-delay: 0.32s; }
.hero-copy p { animation-delay: 0.48s; }
.hero-copy .btn { animation-delay: 0.64s; }

.hero-copy .label {
  color: var(--gold-bright);
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 8vw, 7.2rem);
  font-weight: 500;
  line-height: 0.94;
  margin: 18px 0 24px;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-bright);
}

.hero-copy p {
  max-width: 440px;
  color: var(--sand);
  font-size: 1.08rem;
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 300;
}

.scroll-hint {
  position: absolute;
  right: 6vw;
  bottom: 8vh;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-label);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  color: var(--sand);
  opacity: 0;
  animation: rise 1s 0.7s var(--ease) forwards;
}

.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 72px;
  margin: 12px auto 0;
  background: linear-gradient(var(--gold), transparent);
  animation: lineDrop 2s ease-in-out infinite;
}

@keyframes lineDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}