/* DC Trading Solutions — site styles */

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Lenis smooth-scroll resets — applied when JS init succeeds */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Smooth reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav background transition */
#nav {
  background: transparent;
}
#nav.is-scrolled {
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #E2E8F0;
}

/* Form polish */
input, textarea, select {
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
}

/* Pretty selection */
::selection { background: #2563EB; color: #fff; }

/* Override Tailwind's font-mono — use clean sans-serif for small caps labels site-wide */
.font-mono {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0.16em;
  font-weight: 500;
}

/* Mobile menu drawer */
#mobile-menu { animation: slideIn 0.25s ease-out; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Better mobile typography */
@media (max-width: 640px) {
  h1, h2 { letter-spacing: -0.02em; }
}

/* FAQ icon transition */
[data-faq-icon] { transition: transform 0.2s ease; }

/* Editorial serif accent */
.font-serif-italic { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Subtle paper grain — adds warmth */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Marquee */
.marquee { overflow: hidden; }
.marquee__track { display: inline-flex; gap: 3rem; animation: marquee 40s linear infinite; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Big oversized number for editorial blocks */
.numeral { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; line-height: 0.85; letter-spacing: -0.04em; }

/* Tilt for editorial polaroid-style images */
.tilt-left { transform: rotate(-1.5deg); }
.tilt-right { transform: rotate(1.5deg); }

/* Underline scribble */
.scribble {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'><path d='M2 5 Q 30 1, 60 4 T 118 4' stroke='%23F97316' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.4em;
  padding-bottom: 0.1em;
}