/* ==========================================================================
   HOMEFRAME — Animation layer
   Pairs with js/app.js (GSAP + ScrollTrigger + Lenis).
   ========================================================================== */

/* Elements start hidden; app.js reveals them via GSAP on scroll/load.
   These defaults ensure a sane no-JS fallback (content is still visible). */
[data-reveal] { opacity: 1; }
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

/* Hero cinematic backdrop: layered gradient + slow drift + grain,
   standing in for the client's motion footage until it's dropped in. */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(200,169,106,0.16), transparent 55%),
    linear-gradient(160deg, #0B0F19 0%, #111827 55%, #0B0F19 100%);
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(245,243,239,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,239,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: drift 40s linear infinite;
  opacity: 0.5;
}
@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-64px, -64px, 0); }
}

.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.4s steps(4) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
}

.pulse-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200,169,106,0.5);
  animation: pulse 2.6s var(--ease, ease-out) infinite;
}
@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.float-card {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Sticky nav shrink transition handled in style.css; this covers the
   underline sweep used across text links elsewhere on the site. */
.link-sweep { position: relative; }
.link-sweep::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--gold, #C8A96A);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .hero-media::before, .grain, .pulse-ring, .float-card { animation: none !important; }
}

/* ==========================================================================
   Hero entrance — CSS-only, no external JS dependency.
   Previously the hero (headline, subtext, CTA, stats) stayed invisible
   until 3 third-party scripts (GSAP, ScrollTrigger, Lenis) finished
   downloading from cdnjs/unpkg. On a slow connection that meant a blank
   hero for a noticeable stretch. This runs immediately on paint instead.
   ========================================================================== */
[data-hero-eyebrow], [data-hero-title], [data-hero-sub], [data-hero-cta], [data-hero-stats] {
  animation: hero-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
[data-hero-eyebrow] { animation-delay: 0s; }
[data-hero-title]   { animation-delay: 0.08s; }
[data-hero-sub]     { animation-delay: 0.16s; }
[data-hero-cta]     { animation-delay: 0.24s; }
[data-hero-stats]   { animation-delay: 0.32s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-eyebrow], [data-hero-title], [data-hero-sub], [data-hero-cta], [data-hero-stats] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}