/* HAR TRAVELS — animations.css */

/* =========================================
   AOS-LIKE ANIMATIONS (custom)
   ========================================= */
[data-aos]{opacity:0;transition:opacity .7s ease,transform .7s ease}
[data-aos="fade-up"]{transform:translateY(40px)}
[data-aos="fade-down"]{transform:translateY(-40px)}
[data-aos="fade-left"]{transform:translateX(-40px)}
[data-aos="fade-right"]{transform:translateX(40px)}
[data-aos="zoom-in"]{transform:scale(.9)}
[data-aos="zoom-out"]{transform:scale(1.1)}
[data-aos].aos-animate{opacity:1;transform:none}

[data-aos-delay="100"]{transition-delay:.1s}
[data-aos-delay="150"]{transition-delay:.15s}
[data-aos-delay="200"]{transition-delay:.2s}
[data-aos-delay="300"]{transition-delay:.3s}
[data-aos-delay="400"]{transition-delay:.4s}
[data-aos-delay="500"]{transition-delay:.5s}
[data-aos-delay="600"]{transition-delay:.6s}

/* =========================================
   HERO ENTRANCE ANIMATIONS
   ========================================= */
@keyframes heroFadeUp{
  0%{opacity:0;transform:translateY(30px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes heroFadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes heroScale{
  0%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@keyframes goldShimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes fadeIn{
  0%{opacity:0;transform:translateY(20px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes scaleIn{
  0%{opacity:0;transform:scale(.95)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes slideInLeft{
  0%{opacity:0;transform:translateX(-30px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes slideInRight{
  0%{opacity:0;transform:translateX(30px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes rotateIn{
  0%{opacity:0;transform:rotate(-5deg) scale(.9)}
  100%{opacity:1;transform:rotate(0) scale(1)}
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.05);opacity:1}
}
@keyframes spinSlow{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes particleDrift{
  0%{transform:translateY(0) translateX(0);opacity:0}
  20%{opacity:.8}
  80%{opacity:.4}
  100%{transform:translateY(-120px) translateX(var(--drift,20px));opacity:0}
}

/* =========================================
   HERO ELEMENT ANIMATIONS
   ========================================= */
.hero-animate-label{animation:heroFadeUp .8s ease .3s both}
.hero-animate-title{animation:heroFadeUp .9s ease .5s both}
.hero-animate-sub{animation:heroFadeUp .8s ease .7s both}
.hero-animate-cta{animation:heroFadeUp .8s ease .9s both}
.hero-img{animation:heroScale 1.2s ease both}

/* =========================================
   GOLD TEXT SHIMMER
   ========================================= */
.text-shimmer{
  background:linear-gradient(90deg,#f28a21 0%,#f9c47e 30%,#ffffff 50%,#f9c47e 70%,#f28a21 100%);
  background-size:200% auto;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldShimmer 4s linear infinite;
}

/* =========================================
   FLOATING PARTICLES (hero background)
   ========================================= */
.particles-container{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#f28a21;animation:particleDrift 6s ease-in infinite;--drift:20px}
.particle:nth-child(2){animation-delay:1s;left:20%!important;--drift:-15px}
.particle:nth-child(3){animation-delay:2s;left:40%!important;--drift:25px}
.particle:nth-child(4){animation-delay:3s;left:60%!important;--drift:-20px}
.particle:nth-child(5){animation-delay:4s;left:80%!important;--drift:10px}
.particle:nth-child(6){animation-delay:.5s;left:10%!important;--drift:30px}
.particle:nth-child(7){animation-delay:1.5s;left:70%!important;--drift:-30px}
.particle:nth-child(8){animation-delay:2.5s;left:90%!important;--drift:20px}

/* =========================================
   SCROLL INDICATOR (hero)
   ========================================= */
.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:float 2.5s ease-in-out infinite;z-index:3}
@media(max-width:768px){ .scroll-indicator{display:none} }
.scroll-indicator-line{width:1px;height:50px;background:linear-gradient(to bottom,rgba(242,138,33,.8),transparent)}
.scroll-indicator-text{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(242,138,33,.6)}

/* =========================================
   COUNTER ANIMATION
   ========================================= */
.counter-item{text-align:center}
.counter-number{font-family:'Playfair Display',Georgia,serif;font-size:3.5rem;font-weight:700;color:var(--color-primary);line-height:1;display:block;transition:all .3s ease}
.counter-label{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);margin-top:.5rem}
.counters-strip{background:var(--color-bg);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:4rem 0}
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
@media(max-width:640px){.counters-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================
   MAP PIN CUSTOM
   ========================================= */
.map-pin-custom{
  width:36px;height:36px;background:#f28a21;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);position:relative;
  box-shadow:0 0 0 4px rgba(242,138,33,.25),0 4px 15px rgba(0,0,0,.5);
  transition:all .3s ease;cursor:pointer;
}
.map-pin-custom:hover{background:#f9c47e;transform:rotate(-45deg) scale(1.2)}
.map-pin-custom::after{
  content:'';position:absolute;width:14px;height:14px;background:#080808;
  border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);
}

/* =========================================
   PAGE TRANSITION
   ========================================= */
.page-enter{animation:fadeIn .6s ease both}

/* =========================================
   HOVER GLOW EFFECT
   ========================================= */
.hover-glow{transition:box-shadow .3s ease}
.hover-glow:hover{box-shadow:0 0 30px rgba(242,138,33,.2),0 8px 30px rgba(0,0,0,.5)}

/* =========================================
   DECORATIVE LINE
   ========================================= */
.deco-line{width:60px;height:2px;background:linear-gradient(to right,#f28a21,#a07c45);border-radius:99px;margin:.75rem 0 1.5rem}
.deco-line-center{margin:1rem auto 1.5rem}

/* =========================================
   LOADING SHIMMER
   ========================================= */
@keyframes shimmer{
  0%{background-position:-1000px 0}
  100%{background-position:1000px 0}
}
.shimmer{
  background:linear-gradient(to right,#111 0%,#1a1a1a 20%,#111 40%,#111 100%);
  background-size:1000px 100%;
  animation:shimmer 2s linear infinite;
}

/* =========================================
   SCROLL PROGRESS BAR
   ========================================= */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(to right,#f28a21,#f9c47e);z-index:9999;width:0;transition:width .1s linear}