/* Hoppa marketing — tokens, motion, product-mockup frame.
   Tailwind (CDN) handles utilities; this file owns keyframes, the browser
   window frame, mockup primitives, the FAQ accordion, and reduced-motion. */

:root {
  --hp-purple-600: #9333ea;
  --hp-purple-700: #7e22ce;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Scroll reveal ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Gentle float (hero mock + glass stat cards) --------------------- */
@keyframes hp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hp-float { animation: hp-float 5.5s ease-in-out infinite; }
.hp-float-slow { animation: hp-float 6.5s ease-in-out infinite; }

/* ---- The hop (logo dot) ---------------------------------------------- */
@keyframes hp-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-3px) scaleY(1.05); }
  55% { transform: translateY(0) scaleY(0.92); }
  70% { transform: translateY(-1px) scaleY(1); }
}
.hp-hop { animation: hp-hop 2.4s ease-in-out infinite; transform-origin: center bottom; }

/* ---- Card hover lift -------------------------------------------------- */
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover { transform: translateY(-4px); }

/* ---- Showcase tab crossfade ----------------------------------------- */
@keyframes hp-fade {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: none; }
}
.shot-panel { display: none; }
.shot-panel.active { display: block; animation: hp-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- Nav scroll state + hover underline ----------------------------- */
#nav { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
#nav.scrolled { box-shadow: 0 10px 30px -10px rgba(88, 28, 135, 0.55); }
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: #fff;
  transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }

/* ---- Hero grid + glow ------------------------------------------------- */
.hp-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---- Browser window frame ------------------------------------------- */
.win {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(17, 24, 39, 0.25);
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.tl { width: 11px; height: 11px; border-radius: 9999px; }
.tl-r { background: #ff5f57; }
.tl-y { background: #febc2e; }
.tl-g { background: #28c840; }
.win-url {
  margin-left: 10px;
  font-size: 11px;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 4px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ---- Avatars (mockups) ----------------------------------------------- */
.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  border: 2px solid #fff;
  flex: none;
}
.av-sg { background: #9333ea; }
.av-ml { background: #2563eb; }
.av-pp { background: #0d9488; }
.av-jr { background: #db2777; }
.av-ac { background: #f97316; }
.av-so { background: #22c55e; }
.av-stack > * + * { margin-left: -8px; }

/* tiny progress bars inside mockups */
.bar { height: 4px; border-radius: 9999px; background: #f3f4f6; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 9999px; }

/* ---- FAQ accordion --------------------------------------------------- */
.faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, padding 0.4s ease;
}
.faq-item.open .faq-a { opacity: 1; }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hp-float, .hp-float-slow, .hp-hop { animation: none; }
  .shot-panel.active { animation: none; }
  .lift { transition: none; }
}