/* ============================================================
   AUCTION247 — ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(233,69,96,0.5); }
  50%       { opacity: 0.7; transform: scale(1.1); box-shadow: 0 0 0 5px rgba(233,69,96,0); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(233,69,96,0.6); }
  70%  { transform: scale(1); box-shadow: 0 0 0 12px rgba(233,69,96,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(233,69,96,0); }
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

@keyframes float-orb {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(120deg); }
  66%       { transform: translateY(10px) rotate(240deg); }
}

@keyframes digit-flip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes slide-in-right {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

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

@keyframes border-pulse {
  0%, 100% { border-color: rgba(233,69,96,0.2); }
  50%       { border-color: rgba(233,69,96,0.6); }
}

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

/* ── Hero Particle Canvas Background ─────────────────────── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.08;
  pointer-events: none;
  animation: float-orb linear infinite;
}
.hero-orb-1 {
  width: 600px; height: 600px;
  background: var(--color-primary);
  top: -200px; left: -100px;
  animation-duration: 18s;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: var(--color-accent);
  bottom: -100px; right: -80px;
  animation-duration: 22s;
  animation-direction: reverse;
}
.hero-orb-3 {
  width: 300px; height: 300px;
  background: var(--color-gold);
  top: 40%; right: 20%;
  animation-duration: 28s;
  opacity: 0.05;
}

/* ── Live Pulse Indicator ─────────────────────────────────── */
.live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live-pulse__dot {
  width: 10px; height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.live-pulse__ring {
  position: relative;
  width: 10px; height: 10px;
}
.live-pulse__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-ring 1.4s ease-out infinite;
}

/* ── Bid Button Pulse ─────────────────────────────────────── */
.btn-bid-animate {
  animation: pulse-ring 2s ease-out infinite;
}

/* ── Countdown digits flip ────────────────────────────────── */
.countdown-segment {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}
.countdown-digit {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  transition: transform 0.15s ease;
  display: block;
}
.countdown-digit.flipping { animation: digit-flip 0.3s ease; }
.countdown-unit {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.countdown-sep {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-accent);
  padding: 0 2px;
  margin-top: -4px;
}

/* ── Skeleton Shimmer (loading state for AF shortcodes) ───── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  border-radius: var(--radius-lg);
  aspect-ratio: 3/4;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Toast Notification ──────────────────────────────────── */
.a247-toast-container {
  position: fixed;
  top: 88px; right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.a247-toast {
  pointer-events: auto;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: var(--shadow-card);
  animation: slide-in-right 0.35s ease both;
}
.a247-toast.removing { animation: slide-out-right 0.3s ease both; }
.a247-toast__icon { font-size: 1.2rem; flex-shrink: 0; }
.a247-toast__msg { font-size: 0.875rem; font-weight: 500; flex: 1; }
.a247-toast--success { border-left: 3px solid #22C55E; }
.a247-toast--error   { border-left: 3px solid var(--color-accent); }
.a247-toast--info    { border-left: 3px solid var(--color-primary); }

/* ── Scroll-reveal base ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.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; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .main-nav.open { display: block; position: absolute; top: 70px; left: 0; right: 0;
    background: var(--color-secondary); padding: 16px; border-bottom: 1px solid var(--color-border); }
  .main-nav.open ul { flex-direction: column; gap: 4px; }
  .mobile-menu-toggle { display: flex; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .lot-detail-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .seller-benefits-grid { grid-template-columns: 1fr; }
  :root { --section-py: 56px; }
}

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__ctas { flex-direction: column; align-items: center; }
  .newsletter-form { flex-direction: column; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .differentiator-grid { grid-template-columns: 1fr; }
  :root { --section-py: 40px; }
}