/* ═══════════════════════════════════════
   GLOBAL / RESET
═══════════════════════════════════════ */

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #1E1E1E; }
::-webkit-scrollbar-thumb { background: #B8963E; border-radius: 2px; }

/* Fonts */
.font-serif  { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-sans   { font-family: 'DM Sans', sans-serif; }
.font-arabic { font-family: 'Tajawal', sans-serif; }

/* Smooth scroll */
html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}
body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════
   KEYFRAMES (MERGED)
═══════════════════════════════════════ */

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:scaleY(1); }
  50% { opacity:1; transform:scaleY(.6); }
}

@keyframes ticker {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

@keyframes pulseRing {
  0% { transform:scale(1); opacity:.8; }
  100% { transform:scale(3); opacity:0; }
}

@keyframes bounceIn {
  0% { transform:scale(0); opacity:0; }
  60% { transform:scale(1.15); }
  80% { transform:scale(.95); }
  100% { transform:scale(1); opacity:1; }
}

@keyframes subtleFloat {
  0% { transform: translate(-50%, -50%) rotateY(0) rotateX(0); }
  50% { transform: translate(-50%, -60%) rotateY(8deg) rotateX(5deg); }
  100% { transform: translate(-50%, -50%) rotateY(0) rotateX(0); }
}

@keyframes hover3D {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -70%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes slideUpFade {
  to { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════
   HERO / BACKGROUND
═══════════════════════════════════════ */

.hero-page-bg::before,
.hero-grid-bg::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(184,150,62,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,150,62,.05) 1px,transparent 1px);
  background-size:80px 80px;
  animation:gridDrift 20s linear infinite;
}

.hero-page-bg::after,
.hero-grid-bg::after {
  content:'';
  position:absolute;
  top:-250px; right:-250px;
  width:750px; height:750px;
  border:1px solid rgba(184,150,62,.1);
  border-radius:50%;
  animation:rotateSlow 45s linear infinite;
}

/* ═══════════════════════════════════════
   COMMON COMPONENTS
═══════════════════════════════════════ */

/* Scroll indicator */
.scroll-line {
  width:1px;
  height:40px;
  background:linear-gradient(to bottom,#B8963E,transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}

/* Ticker */
.ticker-wrap { overflow:hidden; }
.ticker-inner {
  display:flex;
  gap:40px;
  white-space:nowrap;
  animation:ticker 30s linear infinite;
}

/* Reveal animations */
.reveal, .reveal-left, .reveal-right {
  opacity:0;
  transition:all .8s cubic-bezier(.16,1,.3,1);
}
.reveal { transform:translateY(40px); }
.reveal-left { transform:translateX(-40px); }
.reveal-right { transform:translateX(40px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity:1;
  transform:translate(0);
}

/* Delay helpers */
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}
.delay-5{transition-delay:.5s}

/* Buttons */
.gold-button-gradient {
  background: linear-gradient(135deg,#b69f74 0%,#6f5c36 100%);
  box-shadow: 0 12px 20px -10px rgba(111,92,54,.35);
}

.btn-arrow {
  display:inline-block;
  transition:transform .3s;
}
a:hover .btn-arrow { transform:translateX(4px); }

/* CTA */
.nav-cta-btn {
  transition:all .3s!important;
}
.nav-cta-btn:hover {
  background:#B8963E;
  color:#1E1E1E!important;
}

/* WhatsApp */
.whatsapp-btn { animation:bounceIn 1s 2s both; }

/* ═══════════════════════════════════════
   CARDS / HOVERS
═══════════════════════════════════════ */

.value-card,
.stat-card,
.b2b-unit-card {
  transition:all .3s;
}

.value-card:hover,
.stat-card:hover {
  transform:translateY(-4px);
  border-color:rgba(184,150,62,.5)!important;
}

.b2b-unit-card:hover {
  background:rgba(184,150,62,.06)!important;
  border-color:rgba(184,150,62,.4)!important;
}

/* Gallery */
.gallery-item {
  overflow:hidden;
  transition:transform .4s;
}
.gallery-item:hover { transform:scale(1.02); }
.gallery-overlay { opacity:0; transition:.3s; }
.gallery-item:hover .gallery-overlay { opacity:1; }

/* ═══════════════════════════════════════
   MAP / LOCATION
═══════════════════════════════════════ */

.pulse-dot {
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg,#b69f74,#6f5c36);
  position:relative;
}

.pulse-dot::before,
.pulse-dot::after {
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid #b69f74;
  animation:pulseRing 2s infinite;
}
.pulse-dot::after { animation-delay:1s; }

.map-label::after {
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#b69f74;
}

/* ═══════════════════════════════════════
   ZONE / 3D ICONS
═══════════════════════════════════════ */

.card-3d-icon {
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70%;
  animation:subtleFloat 4s infinite;
}

.zone-card:hover .card-3d-icon {
  animation:hover3D 2.5s forwards;
}

/* ═══════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════ */

.line { transition:.3s; }

.menu-open .line:nth-child(1) {
  transform:translateY(8px) rotate(45deg);
}
.menu-open .line:nth-child(2) {
  opacity:0;
}
.menu-open .line:nth-child(3) {
  transform:translateY(-8px) rotate(-45deg);
}

.mobile-link {
  opacity:0;
  transform:translateY(20px);
  animation:slideUpFade .4s forwards;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */

.footer-h {
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#B8963E;
  font-weight:600;
  margin-bottom:20px;
}

.footer-links { list-style:none; }
.footer-links li { margin-bottom:12px; }

.footer-links a {
  font-size:14px;
  color:rgba(248,245,240,.5);
  display:flex;
  gap:8px;
  transition:.25s;
}

.footer-links a::before {
  content:'';
  width:16px;
  height:1px;
  background:rgba(184,150,62,.3);
  transition:.25s;
  margin-top: 10px;
}

.footer-links a:hover {
  color:#D4AF6A;
}
.footer-links a:hover::before {
  width:26px;
  background:#B8963E;
}

.footer-social {
  width:36px;
  height:36px;
  border:1px solid rgba(184,150,62,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
  color: #FFF
}
.footer-social:hover {
  border-color:#B8963E;
  color:#B8963E;
  background:rgba(184,150,62,.08);
}
/* Mobile layout */
.zones-grid {
  grid-template-areas:
    "ice"
    "food"
    "outlet"
    "sports"
    "terrace"
    "hyper";
}

/* Desktop layout */
@media (min-width: 768px) {
  .zones-grid {
    grid-template-areas:
      "ice food outlet sports"
      "ice terrace hyper hyper";
  }
}

.ice { grid-area: ice; }
.food { grid-area: food; }
.outlet { grid-area: outlet; }
.sports { grid-area: sports; }
.terrace { grid-area: terrace; }
.hyper { grid-area: hyper; }