/* ═══════════════════════════════════════════════════════════
   ÉIRA — Animations complémentaires
   ═══════════════════════════════════════════════════════════ */

/* ─── Page-specific hero text lines ─── */
.hero__line {
  overflow: hidden;
  display: block;
}

.hero__line-inner {
  display: block;
  transform: translateY(105%);
}

/* ─── Parallax image wrapper ─── */
.parallax-wrap {
  overflow: hidden;
  position: relative;
}

.parallax-wrap img {
  will-change: transform;
}

/* ─── Gold underline reveal ─── */
.gold-line {
  display: block;
  width: 60px;
  height: 1px;
  background-color: var(--or-clair);
  transform: scaleX(0);
  transform-origin: left;
}

/* ─── Stagger children ─── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}

/* ─── Counter animation ─── */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ─── Image reveal mask ─── */
.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--ivoire);
  z-index: 2;
  transform-origin: right;
}

/* ─── Magnetic hover (applied via JS) ─── */
.magnetic {
  will-change: transform;
}

/* ─── Smooth entrance for page transitions ─── */
.page-enter {
  opacity: 0;
}

.page-enter--active {
  opacity: 1;
  transition: opacity 600ms var(--ease-out);
}