/* =========================================================
   Paris T’aime — Style System V0.7
   homepage.css
   UNIQUEMENT pour la homepage animée.
   À ne PAS charger sur les pages dédiées.
   Le body de la homepage doit avoir : class="pta-homepage"
   ========================================================= */

body.pta-homepage .pta-home-intro {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  margin-bottom: -64svh;
  background:
    linear-gradient(
      180deg,
      var(--pta-paris-night) 0%,
      var(--pta-paris-night) 52%,
      rgba(7,17,31,.96) 66%,
      rgba(7,17,31,.66) 82%,
      rgba(7,17,31,0) 100%
    );
  --title-y: 0vh;
  --title-opacity: 1;
  --title-scale: 1;
}

body.pta-homepage .pta-home-intro__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

body.pta-homepage .pta-home-intro h1 {
  margin: 0;
  color: var(--pta-cream);
  font-family: var(--font-cinema);
  font-size: clamp(2.15rem, 4.5vw, 4.55rem);
  line-height: 1;
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0,0,0) scale(.985);
  transition:
    opacity 4.6s cubic-bezier(.18,.72,.22,1),
    transform 4.6s cubic-bezier(.18,.72,.22,1),
    letter-spacing 4.6s cubic-bezier(.18,.72,.22,1);
}

body.pta-homepage .pta-home-intro.is-title-ready h1 {
  opacity: var(--title-opacity);
  transform: translate3d(0,var(--title-y),0) scale(var(--title-scale));
}

body.pta-homepage .pta-home-hero {
  position: relative;
  z-index: 1;
  min-height: 50svh;
  background: var(--pta-paris-night);
  --hero-image-progress: 0;
  --hero-image-opacity: 0;
  --hero-image-y: 9vh;
  --hero-image-scale: 1.045;
}

body.pta-homepage .pta-home-hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

body.pta-homepage .pta-home-hero picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: var(--hero-image-opacity);
  transform: translateY(var(--hero-image-y)) scale(var(--hero-image-scale));
  transition:
    opacity .42s linear,
    transform .42s cubic-bezier(.16,1,.3,1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.06) 8%, rgba(0,0,0,.56) 24%, #000 39%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.06) 8%, rgba(0,0,0,.56) 24%, #000 39%, #000 100%);
}

body.pta-homepage .pta-home-hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.pta-homepage .pta-home-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: calc(var(--hero-image-progress) * .78);
  background:
    linear-gradient(180deg, rgba(7,17,31,.96) 0%, rgba(7,17,31,.70) 15%, rgba(7,17,31,.20) 36%, rgba(7,17,31,.12) 55%, rgba(7,17,31,.94) 100%),
    linear-gradient(90deg, rgba(7,17,31,.84), rgba(7,17,31,.12) 72%);
}

body.pta-homepage .pta-home-hero__copy {
  position: relative;
  width: var(--pta-wide);
  margin: 0 auto;
  padding: 7rem 0 clamp(7rem,16vh,12rem);
  pointer-events: none;
}

body.pta-homepage .pta-home-hero h2,
body.pta-homepage .pta-home-hero__copy > p {
  opacity: 0;
  transform: translateY(1.7rem);
  filter: blur(4px);
  transition:
    opacity 1.35s cubic-bezier(.16,1,.3,1),
    transform 1.35s cubic-bezier(.16,1,.3,1),
    filter 1.35s cubic-bezier(.16,1,.3,1);
}

body.pta-homepage .pta-home-hero.is-copy-visible h2,
body.pta-homepage .pta-home-hero.is-signature-visible .pta-home-hero__copy > p {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

body.pta-homepage .pta-home-hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  gap: .7rem;
  opacity: 0;
  transform: translateY(1.1rem);
  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1);
}

body.pta-homepage .pta-home-hero.is-buttons-visible .pta-home-hero__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Topbar spéciale homepage : peut être cachée au début */
body.pta-homepage .pta-site-header {
  position: fixed;
  inset: 0 0 auto;
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

body.pta-homepage .pta-site-header.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.pta-homepage .pta-site-header.is-hidden {
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}

@media (max-width: 760px) {
  body.pta-homepage .pta-home-intro {
    min-height: 140svh;
    margin-bottom: -56svh;
  }

  body.pta-homepage .pta-home-intro h1 {
    font-size: clamp(1.9rem, 10.2vw, 3.05rem);
  }

  body.pta-homepage .pta-home-hero {
    min-height: 108svh;
    --hero-image-y: 7vh;
  }

  body.pta-homepage .pta-home-hero__actions {
    grid-template-columns: 1fr;
  }
  body.pta-homepage .pta-home-hero + .pta-black-card,
body.pta-homepage .pta-black-card-trio--first {
  margin-top: 0;
}
}