/* MarketRive — custom utilities (mirrors src/styles.css) */
html { scroll-behavior: smooth; }
body {
  background-color: #0A0A0A;
  color: #F5F5F5;
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4 { font-family: "Syne", sans-serif; letter-spacing: -0.02em; }
::selection { background: #E8FF00; color: #0A0A0A; }

.font-display { font-family: "Syne", sans-serif; }
.font-body { font-family: "DM Sans", sans-serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }

.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.035; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lime-glow { background: radial-gradient(ellipse at 50% 40%, rgba(232,255,0,0.08) 0%, transparent 60%); }

.marquee { animation: marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::after {
  content: ""; position: absolute; top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(0); transition: transform 0.7s ease;
}
.shimmer-btn:hover::after { transform: translateX(400%); }

.pulse-ring { animation: pulseRing 2s ease-out infinite; }
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.hairline-float { animation: drift 18s ease-in-out infinite alternate; transform-origin: center; }
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(30px,-20px); } }

/* Reveal-on-scroll (Framer Motion equivalent) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s cubic-bezier(.25,.46,.45,.94), transform .6s cubic-bezier(.25,.46,.45,.94); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-x { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; }
.reveal-x.in-view { opacity: 1; transform: translateX(0); }

.reveal-tag { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.reveal-tag.in-view { opacity: 1; transform: translateY(0); }
.reveal-tag:hover { transform: scale(1.05); }

.reveal-tech { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.reveal-tech.in-view { opacity: 1; transform: translateY(0); }
.reveal-tech:hover { transform: translateY(-2px); }

/* Hero headline stagger */
.hero-word { display: inline-block; margin-right: 0.25em; opacity: 0; transform: translateY(40px); animation: heroWord .6s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes heroWord { to { opacity: 1; transform: translateY(0); } }

.fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp .6s ease forwards; }
.fade-in { opacity: 0; animation: fadeIn .6s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

/* Timeline gradient bar grow */
.bar-grow { transform: scaleY(0); transform-origin: top; transition: transform 1.4s ease; }
.bar-grow.in-view { transform: scaleY(1); }

/* Service card SVG ring draw */
.ring-draw { stroke-dasharray: 304; stroke-dashoffset: 304; transition: stroke-dashoffset 1.2s ease-in-out; }
.ring-draw.in-view { stroke-dashoffset: 0; }

/* Floating mockup */
.float-y { animation: floatY 4s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Service card particles */
.particle { position: absolute; width: 4px; height: 4px; border-radius: 9999px; background: rgba(232,255,0,0.6); animation: particle 3s ease-in-out infinite; }
@keyframes particle { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4px,-8px); } }

/* Mobile drawer */
.drawer-enter { animation: slideInRight .25s ease forwards; }
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Mobile menu overlay default hidden */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* bg-gradient-radial helper */
.bg-gradient-radial { background-image: radial-gradient(circle, var(--tw-gradient-stops)); }