/* Hero load entrance. Scroll-driven properties (topline / ledger layout opacity +
   transform, photo clip-path, img shift) stay in hero.css and are never animated here. */

/* Shared by heading-reveal.js on every heading: keeps the text on one
   compositing path, so antialiasing does not change at cleanup. */
.heading-reveal-text { transform: translateZ(0); }

.hero .hero-title { transform-origin: center bottom; }

/* The enquiry card opens from its top edge; its trigger previews that direction. */
@media (hover: hover) and (pointer: fine) {
  .hero-enquire {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color 280ms cubic-bezier(.165,.84,.44,1);
  }

  .hero-enquire::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--ground);
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 280ms cubic-bezier(.165,.84,.44,1);
  }

  .hero-enquire:hover {
    color: var(--accent);
  }

  .hero-enquire:hover::before {
    transform: scaleY(1);
  }
}

html.hero-motion-pending .hero .hero-title,
html.hero-motion-pending .hero .hero-subtitle,
html.hero-motion-pending .hero .hero-image,
html.hero-motion-pending .hero .hero-copy,
html.hero-motion-pending .hero .hero-offer { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hero-enquire,
  .hero-enquire::before { transition: none; }

  html.hero-motion-pending .hero .hero-title,
  html.hero-motion-pending .hero .hero-subtitle,
  html.hero-motion-pending .hero .hero-image,
  html.hero-motion-pending .hero .hero-copy,
  html.hero-motion-pending .hero .hero-offer { visibility: visible; }
}