/* ============================================================
   BRANDMMERCE — ANIMATIONS & KEYFRAMES  (Premium v4)
   ============================================================ */

/* ── Floating ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes floatX {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(15px); }
}

/* ── Bounce ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-24px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
@keyframes bounceDot {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* ── Pulse / Glow ── */
@keyframes pulseGold {
  0%,100% { box-shadow: 0 0 0 0 rgba(199,147,41,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(199,147,41,0); }
}
@keyframes glowText {
  0%, 100% { text-shadow: 0 0 10px rgba(199,147,41,0.3); }
  50%       { text-shadow: 0 0 30px rgba(199,147,41,0.9), 0 0 60px rgba(199,147,41,0.4); }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(199,147,41,0.3); }
  50%       { border-color: rgba(199,147,41,1); }
}

/* ── Gold gradient text flow ── */
@keyframes gradientFlow {
  0%   { background-position: 0%; }
  100% { background-position: 200%; }
}
.grad-text {
  background: linear-gradient(135deg, #c79329 0%, #e0a93a 50%, #c79329 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 4s linear infinite;
}

/* ── Shimmer ── */
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}
@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Glitch ── */
@keyframes glitch {
  0%        { clip-path: inset(0 0 98% 0); transform: translate(-2px, 0); }
  5%        { clip-path: inset(30% 0 50% 0); transform: translate(2px, 0); }
  10%       { clip-path: inset(60% 0 20% 0); transform: translate(-1px, 0); }
  15%       { clip-path: inset(80% 0 5% 0); transform: translate(1px, 0); }
  20%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

/* ── Fade Ins ── */
@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight{ from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* ── Slide ── */
@keyframes slideUp     { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ── Rotate ── */
@keyframes rotateSlow   { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes rotateReverse{ from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes spinRing     { to   { transform: rotate(360deg); } }
@keyframes orbit        {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* ── Marquee ── */
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Particle Float ── */
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(var(--drift, 60px)) scale(0.3); opacity: 0; }
}
@keyframes particlePulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.5); opacity: 1; }
}

/* ── Loader ── */
@keyframes loaderSpin  { 0%   { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes loaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } }

/* ── Counter ── */
@keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Underline Draw ── */
@keyframes drawLine { from { width: 0; } to { width: 100%; } }

/* ── Typing Cursor ── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Gold line draw ── */
@keyframes goldLineDraw { from { width: 0; opacity: 0; } to { width: 60px; opacity: 1; } }

/* ── Section Entry ── */
@keyframes sectionEntry { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Map pin ripple ── */
@keyframes pinRipple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }

/* ── Hero child entrance ── */
@keyframes heroChildEnter {
  0%   { opacity: 0; transform: translateY(22px); filter: blur(2px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Timeline dot pulse ── */
@keyframes timelineDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,147,41,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(199,147,41,0); }
}

/* ── Office card entrance ── */
@keyframes officeCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Number pop ── */
@keyframes numPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Hex pulse ── */
@keyframes hexPulse { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.2; } }

/* ── Scan line ── */
@keyframes scanLine { 0% { top: 0%; } 100% { top: 100%; } }

/* ── Heading reveal ── */
@keyframes headingReveal {
  0%   { opacity: 0; transform: translateY(24px) skewY(1deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}

/* ── Badge slide ── */
@keyframes badgeSlide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }

/* ── Connector draw ── */
@keyframes connectorDraw { from { width: 0; opacity: 0; } to { width: 100%; opacity: 1; } }

/* ── Stagger delay helpers ── */
.anim-delay-1 { animation-delay: 0.1s !important; }
.anim-delay-2 { animation-delay: 0.2s !important; }
.anim-delay-3 { animation-delay: 0.3s !important; }
.anim-delay-4 { animation-delay: 0.4s !important; }
.anim-delay-5 { animation-delay: 0.5s !important; }
.anim-delay-6 { animation-delay: 0.6s !important; }
.anim-delay-7 { animation-delay: 0.7s !important; }
.anim-delay-8 { animation-delay: 0.8s !important; }

/* ── Scroll-triggered reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Stagger children ── */
.stagger-parent > * { opacity: 0; transform: translateY(20px); }
.stagger-parent.ready > * { animation: fadeInUp 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.stagger-parent.ready > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-parent.ready > *:nth-child(2) { animation-delay: 0.12s; }
.stagger-parent.ready > *:nth-child(3) { animation-delay: 0.19s; }
.stagger-parent.ready > *:nth-child(4) { animation-delay: 0.26s; }
.stagger-parent.ready > *:nth-child(5) { animation-delay: 0.33s; }
.stagger-parent.ready > *:nth-child(6) { animation-delay: 0.40s; }

/* ── Floating helpers ── */
.float-anim  { animation: float 8s ease-in-out infinite; }
.float-slow  { animation: floatSlow 12s ease-in-out infinite; }
.float-x     { animation: floatX 7s ease-in-out infinite; }
.bounce-anim { animation: bounce 2s infinite; }
.spin-slow   { animation: rotateSlow 24s linear infinite; }
.spin-reverse{ animation: rotateReverse 18s linear infinite; }
.pulse-gold  { animation: pulseGold 2s ease-in-out infinite; }
.glow-text   { animation: glowText 4s ease-in-out infinite; }
.num-pop     { animation: numPop 0.6s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Card hover transitions ── */
.card, .tilt-card, .market-card, .office-card, .blog-card {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* ── Section entry ── */
.section-entry { animation: sectionEntry 0.7s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Gold divider ── */
.gold-divider { animation: goldLineDraw 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both; }

/* ── Map pin ripple ── */
.map-pin-dot {
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  position: relative;
}
.map-pin-dot::before, .map-pin-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(199,147,41,0.4);
  animation: pinRipple 2s ease-out infinite;
}
.map-pin-dot::after { animation-delay: 1s; }

/* ── Hero child ── */
.hero-child-enter { animation: heroChildEnter 0.85s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Timeline dot ── */
.timeline-dot-pulse { animation: timelineDot 2s ease-in-out infinite; }

/* ── Office card ── */
.office-card-anim { animation: officeCardIn 0.7s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Service pillar card ── */
.service-pillar-card {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.service-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(199,147,41,0.2);
}

/* ── Page Loader ── */
#page-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #080808;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
  width: 60px; height: 60px;
  border: 3px solid rgba(199,147,41,0.2);
  border-top-color: #c79329;
  border-radius: 50%;
  animation: loaderSpin 0.8s linear infinite;
}

/* ── Custom Cursor ── */
.custom-cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: #c79329;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, width 0.3s ease, height 0.3s ease;
  mix-blend-mode: difference;
}
.cursor-follower {
  position: fixed;
  width: 38px; height: 38px;
  border: 1px solid rgba(199,147,41,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease;
}
.custom-cursor.hovered  { width: 6px; height: 6px; }
.cursor-follower.hovered{ width: 52px; height: 52px; border-color: #c79329; }

@media (max-width: 768px) {
  .custom-cursor, .cursor-follower { display: none; }
}