/* ============================================================================
   sections/hero.css — Full-screen hero
   ----------------------------------------------------------------------------
   Eyebrow, monumental Cinzel H1, Cormorant italic lead, two CTAs, market flag
   row, animated scroll cue. The monument silhouettes live in the global bg.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(6rem, 14vh, 9rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
/* Readability scrim: a soft deep-green wash pooling at the lower-left where the
   headline + CTAs sit, so cream/gold type stays crisp over the golden photo
   without hiding the scene. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 75% at 22% 78%, rgba(8,41,30,.62), rgba(8,41,30,.22) 55%, transparent 78%),
    linear-gradient(180deg, transparent 40%, rgba(8,41,30,.45) 100%);
}
.hero .container { width: 100%; position: relative; z-index: 2; }

/* ---- Tilted rotating "product plate" cards (desktop delight) ---------
   Two overlapping, gold-framed cards in the open right-hand area of the hero.
   hero-deck.js cross-fades them through the live catalogue photos. Kept light
   (pointer-events:none, translucent, softly floating) so the golden Dubai
   scene still reads behind them. Hidden on smaller screens. */
.hero-deck {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(2rem, 9vw, 9rem);
  top: 70%; transform: translateY(-30%);
  width: clamp(150px, 18vw, 250px);
  height: clamp(160px, 20vw, 260px);
}
.hd-card {
  position: absolute; top: 0;
  width: clamp(96px, 10.5vw, 138px); aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid rgba(201, 162, 75, .55);
  box-shadow: 0 26px 64px -22px rgba(0, 0, 0, .62), 0 0 0 1px rgba(201, 162, 75, .14) inset;
  background: linear-gradient(180deg, var(--green-700), var(--green-900));
}
.hd-card::after {                              /* soft foot shadow + gold sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 41, 30, .55) 100%);
}
.hd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .85s var(--ease, ease); }
.hd-card img.is-on { opacity: 1; }
.hd-card--a { left: 0;  top: 9%; transform: rotate(-7deg); z-index: 2; animation: hd-floatA 6.5s ease-in-out infinite; }
.hd-card--b { right: 0; top: 0;  transform: rotate(6deg);  z-index: 1; animation: hd-floatB 7.5s ease-in-out infinite; }
@keyframes hd-floatA { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-9px); } }
@keyframes hd-floatB { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .hd-card { animation: none; } }
@media (max-width: 980px) { .hero-deck { display: none; } }

/* Line spacing tightened ~15% (client request) so everything below the hero
   headline sits a touch higher / more compact. */
.hero .eyebrow { margin-bottom: calc(var(--space-4) * .85); }
.hero h1 { max-width: 18ch; margin-bottom: calc(var(--space-5) * .85); line-height: .98; }
.hero h1 .text-gold { display: inline; }
.hero .lead { max-width: 56ch; margin-bottom: calc(var(--space-6) * .85); line-height: 1.32; }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: calc(var(--space-7) * .85); }

/* Market flag chips row */
.market-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.market-row .label { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted-on-dark); margin-right: .5rem; }

/* Scroll cue (animated gold chevron) */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: var(--gold-300); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
}
.scroll-cue svg { width: 22px; height: 22px; animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

@media (max-width: 640px) {
  .hero { min-height: 92svh; }
  .hero-cta .btn { flex: 1 1 100%; }
}