/* ============================================================
   Apex Cloud Host LLP — Animations & Keyframes
   ============================================================ */

/* ── Core Keyframes ── */
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes slideUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes slideDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes slideLeft {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes slideRight {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.9); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes spin {
  to { transform:rotate(360deg); }
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.8); }
}

@keyframes floatOrb {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-30px) scale(1.05); }
}

@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

@keyframes toastIn {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes toastOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(30px); }
}

@keyframes glow {
  0%,100% { box-shadow:0 0 20px rgba(108,99,255,0.3); }
  50%      { box-shadow:0 0 40px rgba(108,99,255,0.6); }
}

@keyframes borderGlow {
  0%,100% { border-color:rgba(108,99,255,0.2); }
  50%      { border-color:rgba(108,99,255,0.6); }
}

@keyframes textShimmer {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

@keyframes particleFloat {
  0%   { transform:translateY(0) translateX(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(-100vh) translateX(20px) rotate(360deg); opacity:0; }
}

@keyframes countUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes ripple {
  0%   { transform:scale(0); opacity:0.6; }
  100% { transform:scale(4); opacity:0; }
}

@keyframes scanline {
  0%   { top:0%; }
  100% { top:100%; }
}

@keyframes typewriter {
  from { width:0; }
  to   { width:100%; }
}

@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}

/* ── Hero Particles Canvas ── */
#particles-canvas {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}

/* ── Scroll Reveal ── */
.reveal {
  opacity:0; transform:translateY(32px); transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity:1; transform:none;
}
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }
.reveal-delay-5 { transition-delay:0.5s; }

/* ── Gradient Text Animation ── */
.text-animate {
  background:linear-gradient(270deg, #6c63ff, #00d4ff, #ff6584, #6c63ff);
  background-size:300% 300%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 5s ease infinite;
}

/* ── Glowing border animation ── */
.glow-border { animation:borderGlow 3s ease infinite; }

/* ── Floating animation ── */
.float { animation:floatOrb 6s ease-in-out infinite; }
.float-delay-1 { animation-delay:-2s; }
.float-delay-2 { animation-delay:-4s; }

/* ── Hero search bar focus glow ── */
.search-box:focus-within {
  animation:glow 3s ease infinite;
}

/* ── Button ripple ── */
.btn { position:relative; overflow:hidden; }
.btn .ripple-effect {
  position:absolute; border-radius:50%; width:10px; height:10px;
  background:rgba(255,255,255,0.4); transform:scale(0); animation:ripple 0.7s linear; pointer-events:none;
}

/* ── Card hover glow ── */
.feature-card:hover  { box-shadow:0 0 0 1px rgba(108,99,255,0.1), 0 8px 32px rgba(108,99,255,0.1); }
.pricing-card:hover  { box-shadow:0 0 0 1px rgba(108,99,255,0.15), 0 20px 50px rgba(0,0,0,0.4); }
.tld-card:hover      { box-shadow:0 0 0 1px rgba(108,99,255,0.2), 0 8px 24px rgba(108,99,255,0.1); }

/* ── Page entrance ── */
.page-enter { animation:fadeIn 0.5s ease; }

/* ── Loading skeleton ── */
.skeleton-line {
  height:14px; border-radius:7px; margin-bottom:8px;
  background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite;
}
.skeleton-line.short { width:60%; }
.skeleton-line.medium { width:80%; }

/* ── Typing cursor ── */
.typing-cursor::after {
  content:'|'; animation:blink 1s infinite; color:var(--cyan);
}

/* ── Stars rating ── */
.star-fill { color:#f6c90e; }
.star-empty { color:rgba(255,255,255,0.2); }

/* ── Smooth page transitions ── */
body { animation:fadeIn 0.4s ease; }

/* ── Nav link underline animation ── */
.nav-links a::before {
  content:''; position:absolute; bottom:-1px; left:50%;
  width:0; height:2px; background:var(--accent); border-radius:2px;
  transition:width 0.3s ease, left 0.3s ease;
  transform:none;
}
.nav-links a:hover::before { width:70%; left:15%; }

/* ── Orbit decoration ── */
.orbit-ring {
  position:absolute; border-radius:50%; border:1px solid rgba(108,99,255,0.1);
  animation:spin linear infinite; pointer-events:none;
}
.orbit-dot {
  position:absolute; top:0; left:50%; width:8px; height:8px;
  background:var(--accent); border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--accent);
}

/* ── Mobile menu animation ── */
.mobile-menu {
  animation:slideDown 0.25s ease;
}

/* ── Gradient border ── */
.grad-border {
  position:relative;
}
.grad-border::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* ── Hover scale ── */
.hover-scale { transition:transform 0.25s ease; }
.hover-scale:hover { transform:scale(1.04); }

/* ── Whois loader ── */
.whois-loader {
  display:flex; justify-content:center; align-items:center; gap:8px; padding:40px;
}
.whois-dot {
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  animation:pulse 1.4s ease-in-out infinite;
}
.whois-dot:nth-child(2) { animation-delay:0.2s; background:var(--cyan); }
.whois-dot:nth-child(3) { animation-delay:0.4s; background:var(--pink); }

/* ── Success checkmark ── */
@keyframes checkDraw {
  from { stroke-dashoffset:100; }
  to   { stroke-dashoffset:0; }
}
.check-circle {
  width:64px; height:64px; border-radius:50%;
  background:rgba(0,184,148,0.12); border:2px solid var(--success);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--success); margin:0 auto 20px;
  animation:scaleIn 0.5s ease;
}