/* ==========================================================================
   Puzzle Solutions — stylesheet
   Bold dark theme: 3D logo, custom cursor, marquee, grain, magnetic CTAs,
   scroll-reveal (GSAP-driven, CSS fallback included).
   Tailwind (CDN) handles utility classes; this file holds everything else.
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: #0B0A10;
  color: #F5F3FA;
  overflow-x: hidden;
  cursor: none;
}
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
}

h1, h2, h3, h4, .font-display {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

.eyebrow { letter-spacing: .08em; }

::selection { background: #7C5CFF; color: #fff; }

/* ---------------------------------------------------------------------
   Grain overlay
   --------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Custom cursor
   --------------------------------------------------------------------- */
#cursorDot, #cursorRing {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  transform: translate(-50%, -50%);
  will-change: transform;
}
#cursorDot {
  width: 7px; height: 7px;
  background: #D7FF3D;
}
#cursorRing {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(245,243,250,0.5);
  transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease, opacity .2s ease;
}
#cursorRing.hovered {
  width: 64px; height: 64px;
  background: rgba(215,255,61,0.08);
  border-color: #D7FF3D;
}
@media (hover: none), (pointer: coarse) {
  #cursorDot, #cursorRing { display: none; }
}

/* ---------------------------------------------------------------------
   3D logo mark
   --------------------------------------------------------------------- */
.logo3d-wrap {
  perspective: 600px;
}
.logo3d {
  transform-style: preserve-3d;
  animation: logoFloat 6s ease-in-out infinite;
  transition: transform .15s ease-out;
}
@keyframes logoFloat {
  0%, 100% { transform: rotateY(-12deg) rotateX(6deg) translateY(0); }
  50%      { transform: rotateY(12deg) rotateX(-4deg) translateY(-3px); }
}
.logo3d .face-side { filter: brightness(0.72); }
.logo3d .face-top   { filter: brightness(1.18); }

/* ---------------------------------------------------------------------
   Marquee
   --------------------------------------------------------------------- */
.marquee-band {
  overflow: hidden;
  white-space: nowrap;
  background: #D7FF3D;
  transform: rotate(-1.6deg) scale(1.04);
}
.marquee-track {
  display: inline-flex;
  animation: marquee 26s linear infinite;
}
.marquee-track span {
  display: inline-block;
  padding: 0 1.75rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #0B0A10;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.marquee-track span.dot { color: rgba(11,10,16,0.4); }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }

.marquee-band.dark { background: #15121C; transform: rotate(1.4deg) scale(1.04); }
.marquee-band.dark .marquee-track span { color: #F5F3FA; }
.marquee-band.dark .marquee-track span.dot { color: #7C5CFF; }

/* ---------------------------------------------------------------------
   Hero headline gradient + outline text
   --------------------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(100deg, #B9A6FF 0%, #7C5CFF 40%, #FF4FA3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,243,250,0.55);
}

/* ---------------------------------------------------------------------
   Magnetic buttons
   --------------------------------------------------------------------- */
.magnetic { position: relative; will-change: transform; }

/* ---------------------------------------------------------------------
   Filter tabs
   --------------------------------------------------------------------- */
.tab-btn { transition: all .2s ease; }
.tab-btn.active { background: #7C5CFF; color: #fff; }

/* ---------------------------------------------------------------------
   Scroll-reveal (GSAP sets initial state via JS; this is the no-JS fallback)
   --------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .logo3d { animation: none !important; }
  .marquee-track { animation: none !important; }
}

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(124,92,255,.35);
  border-color: rgba(124,92,255,.45) !important;
}

.glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------------------
   Nav scroll state
   --------------------------------------------------------------------- */
#siteNav {
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
#siteNav.scrolled {
  background-color: rgba(11,10,16,0.85);
  backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------------------
   Misc glow blobs
   --------------------------------------------------------------------- */
.blob {
  filter: blur(90px);
}

/* Number counter */
.stat-num { font-variant-numeric: tabular-nums; }

/* Scroll cue */
.scroll-cue {
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(8px); opacity: 1; }
}