/* ============================================
   Mid Town Grooming LLC – Animations
   mtg-animations.css
   ============================================ */

/* ── Keyframe Definitions ── */
@keyframes mtg-fade-up {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes mtg-fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes mtg-slide-left {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes mtg-slide-right {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes mtg-scale-in {
  from { opacity:0; transform:scale(.9); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes mtg-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}
@keyframes mtg-pulse-ring {
  0%   { transform:scale(1); opacity:.6; }
  100% { transform:scale(1.5); opacity:0; }
}
@keyframes mtg-counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mtg-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes mtg-bounce-in {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mtg-wiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}
@keyframes mtg-wave {
  0%,100% { transform: scaleY(1); }
  50%      { transform: scaleY(.6); }
}
@keyframes mtg-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes mtg-dot-pulse {
  0%,80%,100% { transform: scale(0); }
  40%          { transform: scale(1); }
}
@keyframes mtg-progress-fill {
  from { width: 0; }
}

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

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

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

.mtg-reveal-scale {
  opacity: 0; transform: scale(.92);
  transition: opacity .6s ease, transform .6s ease;
}
.mtg-reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Delay helpers */
.mtg-delay-1 { transition-delay: .1s; }
.mtg-delay-2 { transition-delay: .2s; }
.mtg-delay-3 { transition-delay: .3s; }
.mtg-delay-4 { transition-delay: .4s; }
.mtg-delay-5 { transition-delay: .5s; }
.mtg-delay-6 { transition-delay: .6s; }

/* ── Hero Animations ── */
.mtg-hero-badge    { animation: mtg-fade-up .6s ease .1s both; }
.mtg-hero-title    { animation: mtg-fade-up .6s ease .25s both; }
.mtg-hero-subtitle { animation: mtg-fade-up .6s ease .4s both; }
.mtg-hero-actions  { animation: mtg-fade-up .6s ease .55s both; }
.mtg-hero-stats    { animation: mtg-fade-up .6s ease .7s both; }
.mtg-hero-image-wrap { animation: mtg-scale-in .8s ease .3s both; }

/* ── Float animation for hero image ── */
.mtg-hero-image-wrap { animation: mtg-scale-in .8s ease .3s both, mtg-float 6s ease-in-out 1.5s infinite; }

/* ── Shape float ── */
.mtg-hero-shape-1 { animation: mtg-float 8s ease-in-out infinite; }
.mtg-hero-shape-2 { animation: mtg-float 10s ease-in-out 2s infinite; }
.mtg-hero-shape-3 { animation: mtg-float 7s ease-in-out 1s infinite; }

/* ── Shimmer text effect ── */
.mtg-shimmer-text {
  background: linear-gradient(90deg, var(--mtg-primary) 0%, var(--mtg-secondary) 30%, var(--mtg-accent-dk) 60%, var(--mtg-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mtg-shimmer 3s linear infinite;
}

/* ── Animated gradient background ── */
.mtg-gradient-bg {
  background: linear-gradient(135deg, var(--mtg-primary), var(--mtg-primary-lt), var(--mtg-secondary), var(--mtg-primary));
  background-size: 300% 300%;
  animation: mtg-gradient-shift 8s ease infinite;
}

/* ── Pulse ring (for hero CTA) ── */
.mtg-pulse-wrap { position: relative; display: inline-block; }
.mtg-pulse-ring {
  position: absolute; inset: -6px;
  border-radius: 99px;
  border: 2px solid rgba(255,255,255,.4);
  animation: mtg-pulse-ring 2s cubic-bezier(.3,.5,.7,1) infinite;
  pointer-events: none;
}

/* ── Stat counter animation ── */
.mtg-counter { transition: none; }

/* ── Loading dots ── */
.mtg-loading-dots span {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mtg-primary);
  margin: 0 3px;
  animation: mtg-dot-pulse 1.4s ease-in-out infinite;
}
.mtg-loading-dots span:nth-child(2) { animation-delay: .2s; }
.mtg-loading-dots span:nth-child(3) { animation-delay: .4s; }

/* ── Hover micro-interactions ── */
.mtg-hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.mtg-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--mtg-shadow-lg); }

.mtg-hover-scale { transition: transform .3s ease; }
.mtg-hover-scale:hover { transform: scale(1.03); }

.mtg-icon-wiggle:hover i { animation: mtg-wiggle .4s ease; }

/* ── Progress bars ── */
.mtg-progress-bar {
  height: 8px; background: var(--mtg-bg2);
  border-radius: 4px; overflow: hidden;
}
.mtg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mtg-primary), var(--mtg-secondary));
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ── Stagger children ── */
.mtg-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.mtg-stagger.visible > * { opacity: 1; transform: translateY(0); }
.mtg-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.mtg-stagger.visible > *:nth-child(2) { transition-delay: .1s; }
.mtg-stagger.visible > *:nth-child(3) { transition-delay: .2s; }
.mtg-stagger.visible > *:nth-child(4) { transition-delay: .3s; }
.mtg-stagger.visible > *:nth-child(5) { transition-delay: .4s; }
.mtg-stagger.visible > *:nth-child(6) { transition-delay: .5s; }

/* ── Page transition overlay ── */
.mtg-page-transition {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--mtg-primary);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}

/* ── Typing cursor ── */
.mtg-typing::after {
  content: '|';
  animation: mtg-fade-in .5s step-end infinite alternate;
}

/* ── Star rating animation ── */
.mtg-star-fill {
  color: #F5A623;
  display: inline-block;
  animation: mtg-bounce-in .3s ease both;
}

/* ── Notification badge ── */
@keyframes mtg-badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.mtg-badge-animated { animation: mtg-badge-pop .4s cubic-bezier(.4,0,.2,1) both; }

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--mtg-bg2); }
::-webkit-scrollbar-thumb { background: var(--mtg-secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mtg-primary); }

/* ── Focus ring for accessibility ── */
:focus-visible {
  outline: 3px solid var(--mtg-primary);
  outline-offset: 2px;
}