/* =====================================================================
   HERO REVEAL EFFECT v3 — pixel-art scene + circular spotlight reveal
   - base landscape + moving clouds always visible (pixelated)
   - a pixelated circular spotlight follows the cursor
   - sun + landmarks are FIXED in place, hidden by default, and "pop up"
     when the spotlight reaches them (JS toggles .is-lit)
   HOW TO REMOVE: delete css/hero-reveal.css + js/hero-reveal.js +
     images/hero-*.png; strip the hero-reveal class + .hero-reveal-bg block
     + the <link> and <script> tags in index.html & ar/index.html.
   ===================================================================== */

.hero-reveal {
  position: relative;
  overflow: hidden;
}

.hero-reveal > .container {
  position: relative;
  z-index: 3;
}

.hero-reveal-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* base landscape (sky + desert ground), always visible, pixelated */
.hr-base {
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-base.png");
  background-size: 100% 100%;
  background-position: center;
  image-rendering: pixelated;
}

/* moving clouds — always visible, pixelated */
.hr-cloud {
  position: absolute;
  background-image: url("/images/hero-cloud.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  aspect-ratio: 240 / 120;
}
.hr-cloud-1 { top: 8%;  left: -25%; width: 20%; animation: hr-drift 75s linear infinite; animation-delay: -25s; }
.hr-cloud-2 { top: 22%; left: -25%; width: 14%; animation: hr-drift 115s linear infinite; animation-delay: -70s; }
.hr-cloud-3 { top: 15%; left: -25%; width: 10%; animation: hr-drift 150s linear infinite; animation-delay: -60s; opacity: 0.8; }

@keyframes hr-drift {
  to { transform: translateX(calc(100vw + 70%)); }
}

/* circular spotlight (follows cursor, JS sets --sx/--sy) */
.hr-spotlight {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 220, 0.65) 0%, rgba(255, 246, 220, 0.16) 55%, transparent 72%);
  transform: translate(calc(var(--sx, -400px) - 150px), calc(var(--sy, -400px) - 150px));
  pointer-events: none;
  z-index: 1;
}

/* sun + landmarks: FIXED, hidden, pop up when the spotlight reaches them */
.hr-sun,
.hr-lm {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: auto;
}
.hr-sun.is-lit,
.hr-lm.is-lit {
  opacity: 1;
}

.hr-sun {
  background-image: url("/images/hero-sun.png");
  background-position: center;
}

.hr-lm[data-lm="notredame"]   { background-image: url("/images/hero-lm-notredame.png");   background-position: bottom center; }
.hr-lm[data-lm="sagrada"]     { background-image: url("/images/hero-lm-sagrada.png");     background-position: bottom center; }
.hr-lm[data-lm="reichstag"]   { background-image: url("/images/hero-lm-reichstag.png");   background-position: bottom center; }
.hr-lm[data-lm="burjkhalifa"] { background-image: url("/images/hero-lm-burjkhalifa.png"); background-position: bottom center; }
.hr-lm[data-lm="gcc2"]        { background-image: url("/images/hero-lm-gcc2.png");        background-position: bottom center; }
.hr-lm[data-lm="mosque"]      { background-image: url("/images/hero-lm-mosque.png");      background-position: bottom center; }

/* Mobile & tablet: hide the effect entirely */
@media (max-width: 1023px) {
  .hero-reveal-bg {
    display: none;
  }
}