/* ============================================================
   Hero v2 (EasyQibla style) - fully scoped under #qibla-hero-v2
   All vars prefixed --eqh-*, all classes eqh-*. Zero unprefixed.
   Load AFTER all existing CSS files (last <link> in index.html).
   ============================================================ */

#qibla-hero-v2{
  --eqh-night-1:#05060f;
  --eqh-night-2:#0b1130;
  --eqh-night-3:#151d45;
  --eqh-card-bg:rgba(19,25,56,0.55);
  --eqh-card-border:rgba(232,181,49,0.22);
  --eqh-gold:#e8b531;
  --eqh-gold-2:#f8dd8b;
  --eqh-gold-dim:#a9822c;
  --eqh-ivory:#f4efe2;
  --eqh-mist:#9aa2c9;

  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  color:var(--eqh-ivory);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  padding:100px clamp(20px,5vw,64px) 40px;
  box-sizing:border-box;
}
#qibla-hero-v2 *{box-sizing:border-box;}

#qibla-hero-v2 .eqh-sky{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 78% 18%, rgba(232,181,49,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 85%, rgba(80,60,150,0.18), transparent 60%),
    linear-gradient(160deg, var(--eqh-night-1) 0%, var(--eqh-night-2) 55%, var(--eqh-night-3) 100%);
  background-size:200% 200%;
  animation:eqhSkyDrift 26s ease-in-out infinite;
}
@keyframes eqhSkyDrift{0%{background-position:0% 0%;}50%{background-position:60% 40%;}100%{background-position:0% 0%;}}

#qibla-hero-v2 .eqh-stars{position:absolute; inset:0; z-index:1; pointer-events:none;}
#qibla-hero-v2 .eqh-stars span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--eqh-ivory); opacity:.6;
  animation:eqhTwinkle 4s ease-in-out infinite;
}
@keyframes eqhTwinkle{0%,100%{opacity:.15;}50%{opacity:.95;}}

#qibla-hero-v2 .eqh-grid{
  position:relative; z-index:2; width:100%; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:20px;
  perspective:1300px;
}

#qibla-hero-v2 .eqh-copy{transform-style:preserve-3d; will-change:transform; max-width:560px;}

#qibla-hero-v2 .eqh-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  border:1px solid var(--eqh-card-border); background:var(--eqh-card-bg);
  font-size:.82rem; color:var(--eqh-gold-2); font-weight:600;
  opacity:0; transform:translateZ(20px) translateY(8px);
  animation:eqhFadeUp .7s .15s cubic-bezier(.16,1,.3,1) forwards;
}

#qibla-hero-v2 .eqh-title{
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(2.6rem,5vw,4.1rem); line-height:1.04; margin:22px 0 20px;
  letter-spacing:-.01em;
}
#qibla-hero-v2 .eqh-line{overflow:hidden;display:block;}
#qibla-hero-v2 .eqh-line-inner{
  display:block; transform:translateY(115%);
  animation:eqhRevealUp .95s cubic-bezier(.16,1,.3,1) forwards;
}
#qibla-hero-v2 .eqh-line:nth-child(1) .eqh-line-inner{animation-delay:.28s;}
#qibla-hero-v2 .eqh-line:nth-child(2) .eqh-line-inner{animation-delay:.44s;}
#qibla-hero-v2 .eqh-gradient{
  background:linear-gradient(90deg,var(--eqh-gold-dim),var(--eqh-gold-2),var(--eqh-gold),var(--eqh-gold-dim));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:eqhShine 7s linear infinite;
}
@keyframes eqhRevealUp{to{transform:translateY(0);}}
@keyframes eqhShine{to{background-position:300% 0;}}
@keyframes eqhFadeUp{to{opacity:1; transform:translateZ(20px) translateY(0);}}

#qibla-hero-v2 .eqh-sub{
  color:var(--eqh-mist); font-size:1.05rem; line-height:1.65; max-width:460px;
  transform:translateZ(25px); opacity:0;
  animation:eqhFadeUp .8s .62s cubic-bezier(.16,1,.3,1) forwards;
}

#qibla-hero-v2 .eqh-cta-row{
  display:flex; align-items:center; gap:22px; margin-top:32px; flex-wrap:wrap;
  transform:translateZ(35px); opacity:0;
  animation:eqhFadeUp .8s .78s cubic-bezier(.16,1,.3,1) forwards;
}
#qibla-hero-v2 .eqh-btn-primary{
  background:linear-gradient(120deg,var(--eqh-gold-2),var(--eqh-gold));
  color:#1a1204; border:none; padding:15px 30px; border-radius:999px;
  font-family:inherit; font-weight:700; font-size:.98rem; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(232,181,49,.55);
  transition:transform .3s ease;
}
#qibla-hero-v2 .eqh-btn-primary:hover{transform:translateY(-2px);}
#qibla-hero-v2 .eqh-play-btn{
  display:flex; align-items:center; gap:12px; background:none; border:none;
  color:var(--eqh-ivory); font-family:inherit; font-size:.95rem; cursor:pointer;
}
#qibla-hero-v2 .eqh-play-circle{
  position:relative; width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,239,226,0.08); border:1px solid rgba(244,239,226,.35);
}
#qibla-hero-v2 .eqh-play-circle::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--eqh-gold); opacity:0;
  animation:eqhPulseRing 2.6s ease-out infinite;
}
@keyframes eqhPulseRing{0%{transform:scale(.8);opacity:.7;}80%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}

#qibla-hero-v2 .eqh-stats{
  display:flex; gap:clamp(28px,4vw,56px); margin-top:56px; flex-wrap:wrap;
  transform:translateZ(15px); opacity:0;
  animation:eqhFadeUp .8s .95s cubic-bezier(.16,1,.3,1) forwards;
}
#qibla-hero-v2 .eqh-stat b{
  display:block; font-family:'Fraunces',Georgia,serif; font-size:1.9rem; color:var(--eqh-gold-2); font-weight:700;
}
#qibla-hero-v2 .eqh-stat span{font-size:.82rem; color:var(--eqh-mist);}

#qibla-hero-v2 .eqh-visual{position:relative; height:min(640px,72vh); perspective:1400px;}
#qibla-hero-v2 #eqh-earth-container{position:absolute; inset:0; width:100%; height:100%;}
#qibla-hero-v2 #eqh-earth-canvas{display:block; width:100%; height:100%;}

#qibla-hero-v2 .eqh-card{
  position:absolute; width:200px; border-radius:18px; overflow:hidden;
  background:var(--eqh-card-bg); border:1px solid var(--eqh-card-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.65);
  transform-style:preserve-3d;
  transform:translateZ(-520px) rotateY(-58deg); opacity:0;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1), opacity 1.15s cubic-bezier(.16,1,.3,1);
}
#qibla-hero-v2 .eqh-card.eqh-visible{transform:translateZ(0) rotateY(0deg); opacity:1;}
#qibla-hero-v2 .eqh-c1{top:2%; right:0;}
#qibla-hero-v2 .eqh-c2{top:38%; right:-6%; width:186px;}
#qibla-hero-v2 .eqh-c3{bottom:1%; right:20%;}
#qibla-hero-v2 .eqh-card-tile{height:96px; display:flex; align-items:center; justify-content:center; font-size:2rem;}
#qibla-hero-v2 .eqh-card-body{padding:14px 16px 16px;}
#qibla-hero-v2 .eqh-card-city{font-weight:700; font-size:.98rem;}
#qibla-hero-v2 .eqh-card-meta{font-size:.78rem; color:var(--eqh-mist); margin:4px 0 10px; line-height:1.4;}
#qibla-hero-v2 .eqh-card-dist{font-size:.86rem; font-weight:700; color:var(--eqh-gold-2);}
#qibla-hero-v2 .eqh-c1 .eqh-card-tile{background:linear-gradient(135deg,#7a3ea8,#c94f9c);}
#qibla-hero-v2 .eqh-c2 .eqh-card-tile{background:linear-gradient(135deg,#1e6fae,#3fa6d6);}
#qibla-hero-v2 .eqh-c3 .eqh-card-tile{background:linear-gradient(135deg,#c98a20,#e8b531);}

@keyframes eqhBobA{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes eqhBobB{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes eqhBobC{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
#qibla-hero-v2 .eqh-c1 .eqh-card-bob{animation:eqhBobA 9s ease-in-out infinite;}
#qibla-hero-v2 .eqh-c2 .eqh-card-bob{animation:eqhBobB 10s ease-in-out infinite .5s;}
#qibla-hero-v2 .eqh-c3 .eqh-card-bob{animation:eqhBobC 8.5s ease-in-out infinite 1s;}

#qibla-hero-v2 .eqh-scroll{
  position:absolute; right:0; bottom:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--eqh-mist); font-size:.72rem; letter-spacing:.14em;
}
#qibla-hero-v2 .eqh-scroll span{writing-mode:vertical-rl;}
#qibla-hero-v2 .eqh-wheel{width:22px;height:36px;border:1.5px solid var(--eqh-mist);border-radius:12px;position:relative;}
#qibla-hero-v2 .eqh-wheel::before{
  content:''; position:absolute; top:6px; left:50%; width:3px;height:6px;
  background:var(--eqh-gold-2); border-radius:2px; transform:translateX(-50%);
  animation:eqhScrollDot 1.8s ease-in-out infinite;
}
@keyframes eqhScrollDot{0%{opacity:1;top:6px;}70%{opacity:0;top:20px;}100%{opacity:0;top:6px;}}

@media (max-width:900px){
  #qibla-hero-v2{padding-top:120px;}
  #qibla-hero-v2 .eqh-grid{grid-template-columns:1fr;}
  #qibla-hero-v2 .eqh-copy{max-width:100%; order:1;}
  #qibla-hero-v2 .eqh-visual{order:2; height:420px;}
  #qibla-hero-v2 .eqh-card{width:150px;}
  #qibla-hero-v2 .eqh-card-tile{height:74px;font-size:1.5rem;}
  #qibla-hero-v2 .eqh-c1{top:0;right:0;}
  #qibla-hero-v2 .eqh-c2{top:42%;right:-2%;width:140px;}
  #qibla-hero-v2 .eqh-c3{bottom:0;right:14%;}
  #qibla-hero-v2 .eqh-scroll{display:none;}
}
@media (prefers-reduced-motion: reduce){
  #qibla-hero-v2 *,#qibla-hero-v2 *::before,#qibla-hero-v2 *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
}