/* AE HR | Landmark finish — quiet architectural light, with restrained GCC colour cues.
   Homepage-only refinement. Keeps the established deep-teal / champagne brand and layout. */
.hero-lights-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.hero-lights-layer .tl {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  --pad: 18px;
  isolation: isolate;
  will-change: opacity, clip-path;
}
.hero-lights-layer .tl-aura {
  position: absolute;
  inset: 0;
  filter: blur(12px);
  opacity: .22;
}
.hero-lights-layer .tl-m {
  position: absolute;
  inset: var(--pad);
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.hero-lights-layer .tl-m--fill { opacity: .14; }
.hero-lights-layer .tl-aura .tl-m--fill { opacity: .75; }
.hero-lights-layer .tl--burj .tl-m--fill {
  -webkit-mask-image: url(../images/tower-burj-fill.webp);
  mask-image: url(../images/tower-burj-fill.webp);
}
.hero-lights-layer .tl--burj .tl-m--line,
.hero-lights-layer .tl--burj .tl-m--edge {
  -webkit-mask-image: url(../images/tower-burj-line.webp);
  mask-image: url(../images/tower-burj-line.webp);
}
.hero-lights-layer .tl--doha .tl-m--fill {
  -webkit-mask-image: url(../images/tower-doha-fill.webp);
  mask-image: url(../images/tower-doha-fill.webp);
}
.hero-lights-layer .tl--doha .tl-m--line,
.hero-lights-layer .tl--doha .tl-m--edge {
  -webkit-mask-image: url(../images/tower-doha-line.webp);
  mask-image: url(../images/tower-doha-line.webp);
}
/* UAE landmark: luminous pearl-silver with restrained ivory highlights. */
.hero-lights-layer .tl--uae .tl-m {
  background-image: linear-gradient(180deg,
    #CAD1D0 0%, #E8EAE5 16%, #BAC4C5 32%, #DFE2DD 49%,
    #B3C0C2 66%, #DCDDD6 84%, #D0D2C9 94%, #C8A96B 100%);
}
/* Qatar landmark: muted champagne amber, warm pearl and metallic depth. */
.hero-lights-layer .tl--qatar .tl-m {
  background-image: linear-gradient(180deg,
    #B99763 0%, #E2C590 17%, #CDA66C 34%, #E8C995 51%,
    #B58B51 69%, #DCC18B 86%, #CBA76F 95%, #C8A96B 100%);
}
.hero-lights-layer .tl-m--line { opacity: .68; }
.hero-lights-layer .tl-m--edge {
  background-image: none;
  background-color: #D7DEDA;
  opacity: .24;
}
.hero-lights-layer .tl--uae .tl-m--edge {
  background-color: #E3E7E2;
  opacity: .22;
}
.hero-lights-layer .tl--qatar .tl-m--edge {
  background-color: #DFC18B;
  opacity: .23;
}
@media (min-width: 761px) {
  .hero-lights-layer .tl-aura { opacity: .24; filter: blur(10px); }
  .hero-lights-layer .tl-m--fill { opacity: .16; }
  .hero-lights-layer .tl-m--line { opacity: .72; }
  .hero-lights-layer .tl-m--edge { opacity: .27; }
}
@media (max-width: 760px) {
  .hero-lights-layer.is-compact {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--fs, 55%), transparent var(--fe, 85%));
    mask-image: linear-gradient(180deg, #000 0, #000 var(--fs, 55%), transparent var(--fe, 85%));
  }
  .hero-lights-layer.is-compact .tl-aura { opacity: .14; filter: blur(7px); }
  .hero-lights-layer.is-compact .tl-m--fill { opacity: .10; }
  .hero-lights-layer.is-compact .tl-m--line { opacity: .64; }
  .hero-lights-layer.is-compact .tl-m--edge { opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lights-layer .tl { will-change: auto; }
}

/* ==========================================================================
   29 Oct finish pass
   1. Falcon takes the same cool pearl rim-light as the towers (palette is set in js/hero-falcon.js).
   2. Desktop landmarks are larger and sit lower in the frame, so the right side of the hero is filled.
   3. The light reveal has a visible before / after: towers rest quieter, then light up on landing.
   4. Phones: no orphaned separator in the eyebrow; the two CTAs have room for the perched falcon.
   ========================================================================== */

/* 1. Falcon rim light: pearl-silver instead of the earlier warm gold halo. */
.hero--landmarks .hero-falcon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(206,224,226,.30));
}
.ae-falcon-guide-bird {
  filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.40)) drop-shadow(0 0 4px rgba(206,224,226,.20));
}

/* 4a. Eyebrow separator belongs to the geo line on wide screens only. */
.hero--landmarks .eyebrow > .eyebrow-geo::before { content: "\00B7\00A0"; }
@media (max-width: 760px) {
  .hero--landmarks .eyebrow > .eyebrow-geo::before { content: none; }
  /* The geo line aligns under the first word, after the champagne rule (20px rule + 9px gap). */
  .hero--landmarks .eyebrow > .eyebrow-geo { padding-left: 29px; }
}

/* 2 + 3. Desktop: larger landmarks, and a quieter resting state so the landing light is a visible event.
   The artwork box grows past its grid row (negative block margin) because the PNG's top and bottom are
   empty sky and water; the falcon and the light layer read the live image bounds, so they follow. */
@media (min-width: 1101px) {
  .hero--landmarks .hero-inner { grid-template-columns: minmax(0, 1fr) clamp(380px, 36vw, 480px); gap: 40px; }
  .hero--landmarks .hero-artwork {
    max-width: none;
    width: 100%;
    height: clamp(600px, 47vw, 690px);
    margin-block: -56px;
  }
  .hero--landmarks .hero-artwork img { opacity: .72; }
  .hero-lights-layer .tl-aura { opacity: .30; }
  .hero-lights-layer .tl-m--fill { opacity: .20; }
  .hero-lights-layer .tl-m--line { opacity: .95; }
  .hero-lights-layer .tl-m--edge { opacity: .36; }
  .hero-lights-layer .tl--uae .tl-m--edge { opacity: .32; }
  .hero-lights-layer .tl--qatar .tl-m--edge { opacity: .33; }
}

/* 4b. Phones: enough room between the two audience buttons for the falcon to perch in the gap
   without covering either button border. */
@media (max-width: 760px) {
  .hero--landmarks .hero-path-actions { gap: 22px !important; }
}

/* ======================================================================
   AE HR NIGHT SIGNATURE — 29 October 2026
   Tuned reveal strength for a refined, realistic night appearance.
   ====================================================================== */
/* Clear architectural detail with a soft, natural-looking night glow. */
.hero-lights-layer .tl-m--fill { opacity: .14; }
.hero-lights-layer .tl-aura { opacity: .10; filter: blur(8px); }
.hero-lights-layer .tl-aura .tl-m--fill { opacity: .46; }
.hero-lights-layer .tl-m--line { opacity: .78; }
.hero-lights-layer .tl-m--edge {
  background-image: none;
  background-color: #D7DEDA;
  opacity: .23;
}
.hero-lights-layer .tl--uae .tl-m--edge {
  background-color: #E3E7E2;
  opacity: .25;
}
.hero-lights-layer .tl--qatar .tl-m--edge {
  background-color: #DFC18B;
  opacity: .23;
}
@media (min-width: 761px) {
  .hero-lights-layer .tl-aura { opacity: .14; filter: blur(9px); }
  .hero-lights-layer .tl-m--fill { opacity: .17; }
  .hero-lights-layer .tl-m--line { opacity: .84; }
  .hero-lights-layer .tl-m--edge { opacity: .27; }
  .hero-lights-layer .tl--uae .tl-m--edge { opacity: .27; }
  .hero-lights-layer .tl--qatar .tl-m--edge { opacity: .25; }
}
@media (max-width: 760px) {
  .hero-lights-layer.is-compact .tl-aura { opacity: .08; filter: blur(6px); }
  .hero-lights-layer.is-compact .tl-m--fill { opacity: .11; }
  .hero-lights-layer.is-compact .tl-m--line { opacity: .74; }
  .hero-lights-layer.is-compact .tl-m--edge { opacity: .19; }
  .hero-lights-layer.is-compact .tl--uae .tl-m--edge { opacity: .20; }
  .hero-lights-layer.is-compact .tl--qatar .tl-m--edge { opacity: .19; }
}