/* ============================================================
   ASTROPILOT — icons.css
   Professional SVG Icon Animations
   ============================================================ */

/* ---- Base Icon Wrapper ---- */
.ap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap-icon svg {
  display: block;
  overflow: visible;
}

/* ---- Service Icon Containers ---- */
.service-icon {
  position: relative;
}

.service-icon .ap-icon {
  width: 100%;
  height: 100%;
}

/* ============================================================
   ICON ANIMATIONS
   ============================================================ */

/* 1. Crystal Ball — rotating orbital ring */
@keyframes orbit-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orb-pulse {
  0%, 100% { opacity: 0.6; r: 5; }
  50%       { opacity: 1;   r: 6; }
}
@keyframes crystal-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(201,168,76,0.4)); }
  50%       { filter: drop-shadow(0 0 12px rgba(201,168,76,0.8)); }
}
.icon-crystal svg { animation: crystal-glow 2.5s ease-in-out infinite; }
.icon-crystal .orbit { animation: orbit-ring 6s linear infinite; transform-origin: 12px 12px; }
.icon-crystal .orbit-reverse { animation: orbit-ring 9s linear infinite reverse; transform-origin: 12px 12px; }

/* 2. Planet / Saturn — spinning ring */
@keyframes planet-ring {
  from { transform: rotateX(60deg) rotate(0deg); }
  to   { transform: rotateX(60deg) rotate(360deg); }
}
@keyframes planet-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
.icon-planet svg { animation: planet-float 3s ease-in-out infinite; }
.icon-planet .ring { animation: orbit-ring 4s linear infinite; transform-origin: 12px 12px; }

/* 3. Rings / Matchmaking — heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.08); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.05); }
  56%       { transform: scale(1); }
}
.icon-rings svg { animation: heartbeat 2s ease-in-out infinite; }

/* 4. House — breathe glow */
@keyframes house-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(201,168,76,0.3)); }
  50%       { filter: drop-shadow(0 0 10px rgba(201,168,76,0.7)); }
}
@keyframes door-open {
  0%, 80%, 100% { transform-origin: left center; transform: scaleX(1); }
  40%            { transform-origin: left center; transform: scaleX(0.4); }
}
.icon-house svg { animation: house-breathe 3s ease-in-out infinite; }
.icon-house .door { animation: door-open 4s ease-in-out infinite; }

/* 5. Calendar — page flip */
@keyframes cal-flip {
  0%, 85%, 100% { transform: scaleY(1); }
  40%            { transform: scaleY(0.7); }
}
@keyframes cal-mark {
  0%, 60%, 100% { opacity: 0; }
  80%            { opacity: 1; }
}
.icon-calendar svg { animation: cal-flip 3.5s ease-in-out infinite; transform-origin: center top; }
.icon-calendar .cal-check { animation: cal-mark 3.5s ease-in-out infinite; }

/* 6. Flame / Diya — flicker */
@keyframes flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
  20%       { transform: scaleY(1.1) scaleX(0.9) rotate(-2deg); }
  40%       { transform: scaleY(0.95) scaleX(1.05) rotate(1deg); }
  60%       { transform: scaleY(1.08) scaleX(0.93) rotate(-1deg); }
  80%       { transform: scaleY(0.98) scaleX(1.02) rotate(2deg); }
}
@keyframes flame-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,140,0,0.5)); }
  50%       { filter: drop-shadow(0 0 14px rgba(255,180,0,0.9)); }
}
.icon-flame svg { animation: flame-glow 1s ease-in-out infinite; }
.icon-flame .flame-body { animation: flicker 0.7s ease-in-out infinite; transform-origin: center bottom; }

/* 7. Diamond / Gem — shimmer facets */
@keyframes gem-shimmer {
  0%, 100% { opacity: 1; }
  33%       { opacity: 0.4; }
  66%       { opacity: 0.7; }
}
@keyframes gem-rotate {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(150,220,255,0.4)); }
  50%       { filter: drop-shadow(0 0 10px rgba(150,220,255,0.9)); }
}
.icon-gem svg { animation: gem-rotate 2.5s ease-in-out infinite; }
.icon-gem .facet-1 { animation: gem-shimmer 2s ease-in-out infinite 0s; }
.icon-gem .facet-2 { animation: gem-shimmer 2s ease-in-out infinite 0.4s; }
.icon-gem .facet-3 { animation: gem-shimmer 2s ease-in-out infinite 0.8s; }

/* 8. Hand / Palmistry — wave */
@keyframes hand-wave {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-8deg); }
  40%       { transform: rotate(6deg); }
  60%       { transform: rotate(-4deg); }
  80%       { transform: rotate(3deg); }
}
.icon-hand svg { animation: hand-wave 2.5s ease-in-out infinite; transform-origin: center bottom; }

/* 9. Eye — blink */
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%            { transform: scaleY(0.05); }
}
@keyframes eye-scan {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(2px); }
  75%       { transform: translateX(-2px); }
}
.icon-eye svg { animation: blink 3.5s ease-in-out infinite; transform-origin: center center; }
.icon-eye .pupil { animation: eye-scan 4s ease-in-out infinite; }

/* 10. Phone — ring vibration */
@keyframes phone-ring {
  0%, 100%  { transform: rotate(0deg); }
  10%        { transform: rotate(-15deg); }
  20%        { transform: rotate(15deg); }
  30%        { transform: rotate(-10deg); }
  40%        { transform: rotate(10deg); }
  50%        { transform: rotate(0deg); }
}
@keyframes ring-wave {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.icon-phone svg { animation: phone-ring 3s ease-in-out infinite; transform-origin: center center; }
.icon-phone .ring-1 { animation: ring-wave 3s ease-in-out infinite 0.5s; }
.icon-phone .ring-2 { animation: ring-wave 3s ease-in-out infinite 1s; }

/* 11. WhatsApp / Chat bubble — bounce */
@keyframes chat-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-5px) scale(1.05); }
  60%       { transform: translateY(-3px) scale(1.02); }
}
@keyframes dot-type {
  0%, 60%, 100% { opacity: 0; }
  30%            { opacity: 1; }
}
.icon-chat svg { animation: chat-bounce 2s ease-in-out infinite; }
.icon-chat .dot-1 { animation: dot-type 1.5s ease-in-out infinite 0s; }
.icon-chat .dot-2 { animation: dot-type 1.5s ease-in-out infinite 0.2s; }
.icon-chat .dot-3 { animation: dot-type 1.5s ease-in-out infinite 0.4s; }

/* 12. Mail / Envelope — open flap */
@keyframes flap-open {
  0%, 60%, 100% { transform: rotateX(0deg); }
  30%            { transform: rotateX(-160deg); }
}
.icon-mail .flap { animation: flap-open 3s ease-in-out infinite; transform-origin: center top; }
.icon-mail svg { animation: planet-float 3s ease-in-out infinite 0.5s; }

/* 13. Location Pin — drop bounce */
@keyframes pin-drop {
  0%   { transform: translateY(-8px); opacity: 0; }
  40%  { transform: translateY(2px);  opacity: 1; }
  55%  { transform: translateY(-2px); }
  70%  { transform: translateY(1px); }
  85%  { transform: translateY(0px); }
  100% { transform: translateY(0px); opacity: 1; }
}
@keyframes pin-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%       { transform: scale(1.6); opacity: 0; }
}
.icon-pin svg { animation: pin-drop 3s ease-in-out infinite; }
.icon-pin .pin-shadow { animation: pin-pulse 3s ease-in-out infinite; }

/* 14. Star — twinkle */
@keyframes star-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 1; }
  25%       { transform: scale(1.2) rotate(15deg); opacity: 0.8; }
  50%       { transform: scale(0.8) rotate(-10deg); opacity: 0.6; }
  75%       { transform: scale(1.1) rotate(5deg);  opacity: 0.9; }
}
.icon-star svg { animation: star-twinkle 2s ease-in-out infinite; }

/* 15. Check / Tick — draw in */
@keyframes draw-check {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}
.icon-check .check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw-check 0.6s ease forwards;
}
.feature-item:hover .icon-check .check-path {
  animation: draw-check 0.4s ease forwards;
}

/* 16. Compass — needle spin */
@keyframes needle-spin {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
.icon-compass .needle { animation: needle-spin 3s ease-in-out infinite; transform-origin: center center; }

/* 17. Moon — slow rotate + glow */
@keyframes moon-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(201,168,76,0.4)); }
  50%       { filter: drop-shadow(0 0 15px rgba(240,192,64,0.8)); }
}
.icon-moon svg { animation: moon-glow 3s ease-in-out infinite; }

/* 18. Sun — spin rays */
@keyframes sun-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon-sun .rays { animation: sun-spin 8s linear infinite; transform-origin: center center; }
.icon-sun svg { animation: crystal-glow 2s ease-in-out infinite; }

/* 19. Globe — slow rotate */
@keyframes globe-rotate {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.icon-globe svg { animation: orbit-ring 12s linear infinite; transform-origin: center center; }

/* 20. Shield / Lock — pulse */
@keyframes shield-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(201,168,76,0.3)); }
  50%       { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(201,168,76,0.6)); }
}
.icon-shield svg { animation: shield-pulse 2.5s ease-in-out infinite; }

/* 21. Medal — swing */
@keyframes medal-swing {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}
.icon-medal svg { animation: medal-swing 2s ease-in-out infinite; transform-origin: center top; }

/* 22. Clock / Time — hands move */
@keyframes clock-minute {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes clock-hour {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon-clock .minute-hand { animation: clock-minute 4s linear infinite; transform-origin: 12px 12px; }
.icon-clock .hour-hand   { animation: clock-hour 48s linear infinite; transform-origin: 12px 12px; }

/* 23. Arrow / Direction — slide */
@keyframes arrow-slide {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}
.icon-arrow svg { animation: arrow-slide 1.5s ease-in-out infinite; }

/* 24. Plane — fly */
@keyframes plane-fly {
  0%, 100% { transform: translate(0,0) rotate(-10deg); }
  50%       { transform: translate(3px,-3px) rotate(-10deg); }
}
.icon-plane svg { animation: plane-fly 2s ease-in-out infinite; }

/* 25. Book — open pages */
@keyframes book-flutter {
  0%, 80%, 100% { transform: scaleX(1); }
  40%            { transform: scaleX(0.85); }
}
.icon-book svg { animation: book-flutter 3s ease-in-out infinite; }

/* ============================================================
   FEATURE CHECK ANIMATED
   ============================================================ */
.feature-check-svg {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: all 0.3s ease;
}

.feature-check-svg svg {
  width: 12px;
  height: 12px;
  color: var(--gold);
  stroke: var(--gold);
}

.feature-item:hover .feature-check-svg {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: transparent;
  box-shadow: 0 0 12px rgba(201,168,76,0.4);
}

.feature-item:hover .feature-check-svg svg {
  stroke: #0A0B1E;
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.social-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: all 0.3s ease;
}

.social-link:hover svg { stroke: var(--gold); }

/* ============================================================
   CONTACT ICON WRAPS
   ============================================================ */
.contact-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: var(--gold);
  flex-shrink: 0;
}

.contact-icon-wrap:hover svg { stroke: var(--gold-light); }

/* ============================================================
   SERVICE CARD ICON HOVER TRANSFORMS
   ============================================================ */
.service-card:hover .icon-crystal svg { animation-duration: 1.5s; }
.service-card:hover .icon-house svg   { animation-duration: 1.5s; }
.service-card:hover .icon-flame .flame-body { animation-duration: 0.4s; }
.service-card:hover .icon-gem svg   { animation-duration: 1.2s; }
.service-card:hover .icon-rings svg { animation-duration: 1s; }

/* ============================================================
   NAV ICON (hamburger dots → animated)
   ============================================================ */
.nav-hamburger:hover span { background: var(--gold); }

/* ============================================================
   REVIEW STARS
   ============================================================ */
.star-svg {
  display: inline-block;
  animation: star-twinkle 2s ease-in-out infinite;
}
.star-svg:nth-child(1) { animation-delay: 0s; }
.star-svg:nth-child(2) { animation-delay: 0.15s; }
.star-svg:nth-child(3) { animation-delay: 0.3s; }
.star-svg:nth-child(4) { animation-delay: 0.45s; }
.star-svg:nth-child(5) { animation-delay: 0.6s; }

/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.footer-social .social-link {
  transition: all 0.3s ease;
}
.footer-social .social-link:hover {
  transform: translateY(-3px) rotate(8deg);
}

/* ============================================================
   ICON SIZE UTILITIES
   ============================================================ */
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; }
.icon-xl  { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }
.icon-3xl { width: 64px; height: 64px; }

/* ============================================================
   ANIMATE ON HOVER ONLY (performance optimization)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .icon-crystal svg,
  .icon-planet svg,
  .icon-rings svg,
  .icon-house svg,
  .icon-calendar svg,
  .icon-flame svg,
  .icon-flame .flame-body,
  .icon-gem svg,
  .icon-hand svg,
  .icon-eye svg,
  .icon-phone svg,
  .icon-chat svg,
  .icon-mail svg,
  .icon-pin svg,
  .icon-star svg,
  .icon-compass .needle,
  .icon-moon svg,
  .icon-sun .rays,
  .icon-globe svg,
  .icon-shield svg,
  .icon-medal svg,
  .icon-clock .minute-hand,
  .icon-clock .hour-hand,
  .icon-arrow svg,
  .icon-plane svg,
  .icon-book svg,
  .star-svg {
    animation: none !important;
  }
}