/* ══════════════════════════════════════════════════════════════════════
   MINTCRATE PUBLIC SITE — Animation & Polish Layer
   ──────────────────────────────────────────────────────────────────────
   Load AFTER mintcrate_public.css.
   Adds entrance staggers, micro-interactions, and scroll polish to
   index/services/about/contact/thankyou.
   Mirrors the spirit of dashboard_animations.css but tuned for marketing.
   ══════════════════════════════════════════════════════════════════════ */


/* ==================== 1. ENTRANCE ANIMATIONS ==================== */

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

@keyframes pubFadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

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

/* Utility classes — work alongside the existing IntersectionObserver
   in index_script.js / about_script.js. The observer adds .visible. */
.anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
  will-change: opacity, transform;
}

.anim-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.7s var(--ease-spring);
}

.anim-fade-in.visible { opacity: 1; }

/* Stagger delays — apply with .delay-1 ... .delay-4 */
.anim-fade-up.delay-1,
.anim-fade-in.delay-1 { transition-delay: 0.08s; }
.anim-fade-up.delay-2,
.anim-fade-in.delay-2 { transition-delay: 0.16s; }
.anim-fade-up.delay-3,
.anim-fade-in.delay-3 { transition-delay: 0.24s; }
.anim-fade-up.delay-4,
.anim-fade-in.delay-4 { transition-delay: 0.32s; }


/* ==================== 2. MICRO-INTERACTIONS ==================== */

/* Button press — tactile scale on every button */
button:active,
.cta-primary:active,
a.cta-primary:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

/* CTA glow — primary brand button hover */
.cta-primary:hover {
  box-shadow: var(--shadow-cta);
}

/* Service card — springier hover than the base public.css default.
   This overrides the base hover with a slightly more polished feel
   while preserving the blue border accent. */
.service-card {
  transition:
    transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-slow) var(--ease-spring),
    border-color var(--dur-base) ease !important;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-blue);
  box-shadow:
    0 20px 25px -5px rgb(15 23 42 / 0.08),
    0 10px 10px -6px rgb(15 23 42 / 0.04);
}

/* Tech-label eyebrow — subtle color lift on parent card hover */
.service-card:hover .tech-label {
  color: var(--accent-blue);
  transition: color var(--dur-base) ease;
}

/* Tab buttons (index "What We Deliver / Who We Serve") */
[id^="btn-deliver"],
[id^="btn-serve"] {
  transition: all var(--dur-base) var(--ease-spring) !important;
}


/* ==================== 3. INPUT FOCUS POLISH ==================== */

input:focus,
textarea:focus,
select:focus {
  transition:
    border-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease;
}


/* ==================== 4. LIVE PULSE (status dots, "online" indicators) ==================== */

.live-pulse {
  animation: pubLivePulse 2s var(--ease-smooth) infinite;
}

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


/* ==================== 5. LOGO HOVER — gradient shimmer ==================== */

.logo-text {
  transition: color var(--dur-base) ease;
  background-size: 200% 200%;
}

a:hover .logo-text,
.logo-text:hover {
  background: linear-gradient(135deg, var(--accent-blue), #6366f1, var(--accent-blue));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pubShimmer 2s linear infinite;
}

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


/* ==================== 6. MOBILE MENU ITEM REVEAL ==================== */

.mobile-menu.active a {
  animation: pubFadeInUp 0.5s var(--ease-spring) both;
}

.mobile-menu.active a:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu.active a:nth-child(2) { animation-delay: 0.10s; }
.mobile-menu.active a:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu.active a:nth-child(4) { animation-delay: 0.20s; }
.mobile-menu.active a:nth-child(5) { animation-delay: 0.25s; }
.mobile-menu.active a:nth-child(6) { animation-delay: 0.30s; }
.mobile-menu.active a:nth-child(7) { animation-delay: 0.35s; }


/* ==================== 7. TABLE ROW HOVER (services comparison table) ==================== */

tbody tr {
  transition: background-color var(--dur-base) ease;
}


/* ==================== 8. PRINT — DISABLE ANIMATIONS ==================== */

@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ==================== 9. FADE-UP (revamp observer) ==================== */

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.2,1,0.2,1), transform 0.65s cubic-bezier(0.2,1,0.2,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.d1 { transition-delay: 0.08s; }
.fade-up.d2 { transition-delay: 0.16s; }
.fade-up.d3 { transition-delay: 0.24s; }
.fade-up.d4 { transition-delay: 0.32s; }