{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "smj-styles",
  "title": "SMJ cyberpunk styles",
  "description": "Keyframes (slideFrameSpin, neonPulse, holoSpin, chromaticFlash, scanBeam, meshShift, etc.) and utility classes (.neon-line, .holo-card, .glass, .grid-overlay, .scrollbar-hide, .glow-cyan, .glow-violet, etc.) shared across all components.",
  "files": [
    {
      "path": "registry/styles/cyber.css",
      "content": "@import 'tailwindcss';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* ── Hide scrollbar utility ──────────────────────────────────────────── */\n.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }\n.scrollbar-hide::-webkit-scrollbar { display: none; }\n\n/* ── Slide Frame spin ──────────────────────────────────────────────────── */\n@property --frame-angle {\n  syntax: '<angle>';\n  initial-value: 0deg;\n  inherits: false;\n}\n@keyframes slideFrameSpin {\n  to { --frame-angle: 360deg; }\n}\n\n/* ── Cyber Grid scroll ──────────────────────────────────────────────────── */\n@keyframes cyberGridScroll {\n  0%   { background-position: 0 0; }\n  100% { background-position: 0 80px; }\n}\n\n/* ── Neon Line — glowing divider between sections ──────────────────────── */\n.neon-line {\n  height: 1px;\n  background: linear-gradient(to right, transparent, #06b6d4, #8b5cf6, #06b6d4, transparent);\n  position: relative;\n  overflow: visible;\n}\n.neon-line::after {\n  content: '';\n  position: absolute;\n  inset: -3px 0;\n  background: inherit;\n  filter: blur(8px);\n  opacity: 0.5;\n  animation: neonPulse 3s ease-in-out infinite;\n}\n@keyframes neonPulse {\n  0%, 100% { opacity: 0.3; filter: blur(8px); }\n  50%      { opacity: 0.7; filter: blur(12px); }\n}\n\n/* ── Holographic Card Shimmer ──────────────────────────────────────────── */\n.holo-card {\n  position: relative;\n}\n.holo-card::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: conic-gradient(\n    from var(--holo-angle, 0deg),\n    transparent 0%,\n    rgba(6, 182, 212, 0.06) 10%,\n    transparent 20%,\n    rgba(139, 92, 246, 0.06) 30%,\n    transparent 40%,\n    rgba(244, 63, 94, 0.04) 50%,\n    transparent 60%\n  );\n  opacity: 0;\n  transition: opacity 0.5s ease;\n  pointer-events: none;\n  z-index: 1;\n  animation: holoSpin 6s linear infinite;\n}\n.holo-card:hover::before {\n  opacity: 1;\n}\n@keyframes holoSpin {\n  to { --holo-angle: 360deg; }\n}\n@property --holo-angle {\n  syntax: \"<angle>\";\n  initial-value: 0deg;\n  inherits: false;\n}\n\n/* ── Circuit Board Pattern Overlay ─────────────────────────────────────── */\n.circuit-overlay {\n  position: relative;\n}\n.circuit-overlay::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: 0.025;\n  background-image:\n    linear-gradient(to right, #06b6d4 1px, transparent 1px),\n    linear-gradient(to bottom, #06b6d4 1px, transparent 1px),\n    radial-gradient(circle 2px, #06b6d4 1px, transparent 1px);\n  background-size: 120px 120px, 120px 120px, 120px 120px;\n  background-position: 0 0, 0 0, 60px 60px;\n  mask-image: radial-gradient(ellipse at center, white 30%, transparent 80%);\n  -webkit-mask-image: radial-gradient(ellipse at center, white 30%, transparent 80%);\n}\n\n/* ── Chromatic Aberration flash on interactions ────────────────────────── */\n@keyframes chromaticFlash {\n  0%   { filter: none; }\n  15%  { filter: drop-shadow(2px 0 0 rgba(255,0,0,0.15)) drop-shadow(-2px 0 0 rgba(0,255,255,0.15)); }\n  30%  { filter: drop-shadow(-1px 0 0 rgba(255,0,0,0.1)) drop-shadow(1px 0 0 rgba(0,255,255,0.1)); }\n  50%  { filter: none; }\n}\n.chromatic-flash {\n  animation: chromaticFlash 0.3s ease-out;\n}\n\n/* ── Scan beam — vertical light sweep ──────────────────────────────────── */\n@keyframes scanBeam {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(100vw); }\n}\n.scan-beam {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 200px;\n  background: linear-gradient(to right, transparent, rgba(6,182,212,0.03), transparent);\n  pointer-events: none;\n  animation: scanBeam 12s ease-in-out infinite;\n}\n\n/* ── CodePeek animations ─────────────────────────────────────────────────── */\n@keyframes codePeekSpin {\n  to { filter: hue-rotate(360deg); }\n}\n@keyframes codePeekPulse {\n  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(80, 250, 123, 0.6); }\n  50%       { opacity: 0.6; box-shadow: 0 0 0 5px rgba(80, 250, 123, 0); }\n}\n\n/* ============================================\n   MESH GRADIENT BACKGROUND\n   ============================================ */\n.mesh-gradient {\n  position: fixed;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  background:\n    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(6, 182, 212, 0.08), transparent),\n    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(139, 92, 246, 0.06), transparent),\n    radial-gradient(ellipse 50% 80% at 50% 80%, rgba(244, 63, 94, 0.04), transparent);\n  animation: meshShift 20s ease-in-out infinite alternate;\n}\n:where(.dark) .mesh-gradient {\n  background:\n    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(6, 182, 212, 0.15), transparent),\n    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(139, 92, 246, 0.12), transparent),\n    radial-gradient(ellipse 50% 80% at 50% 80%, rgba(244, 63, 94, 0.08), transparent);\n}\n@keyframes meshShift {\n  to { background-position: 100% 0%, 0% 100%, 50% 50%; }\n}\n\n/* ============================================\n   GLASSMORPHISM\n   ============================================ */\n.glass {\n  background: rgba(255, 255, 255, 0.6);\n  backdrop-filter: blur(16px) saturate(1.8);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n}\n:where(.dark) .glass {\n  background: rgba(15, 23, 42, 0.6);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n}\n.glass-subtle {\n  background: rgba(255, 255, 255, 0.4);\n  backdrop-filter: blur(12px) saturate(1.4);\n  border: 1px solid rgba(255, 255, 255, 0.25);\n}\n:where(.dark) .glass-subtle {\n  background: rgba(15, 23, 42, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.04);\n}\n\n/* ============================================\n   ANIMATED GRADIENT BORDER\n   ============================================ */\n.gradient-border {\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n.gradient-border::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.5px;\n  background: linear-gradient(135deg, #06b6d4, #8b5cf6, #f43f5e, #06b6d4);\n  background-size: 300% 300%;\n  animation: borderRotate 4s linear infinite;\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n@keyframes borderRotate {\n  to { background-position: 100% 100%; }\n}\n\n/* ============================================\n   GLOW EFFECTS\n   ============================================ */\n.glow-cyan {\n  box-shadow:\n    0 0 15px rgba(6, 182, 212, 0.15),\n    0 0 45px rgba(6, 182, 212, 0.05);\n}\n:where(.dark) .glow-cyan {\n  box-shadow:\n    0 0 15px rgba(6, 182, 212, 0.2),\n    0 0 45px rgba(6, 182, 212, 0.1);\n}\n.glow-violet {\n  box-shadow:\n    0 0 15px rgba(139, 92, 246, 0.15),\n    0 0 45px rgba(139, 92, 246, 0.05);\n}\n:where(.dark) .glow-violet {\n  box-shadow:\n    0 0 15px rgba(139, 92, 246, 0.2),\n    0 0 45px rgba(139, 92, 246, 0.1);\n}\n\n/* ============================================\n   3D CARD TRANSFORM\n   ============================================ */\n.card-3d {\n  perspective: 800px;\n  transform-style: preserve-3d;\n  transition: transform 0.3s ease;\n}\n.card-3d:hover {\n  transform: rotateY(-2deg) rotateX(2deg) translateY(-4px);\n}\n\n/* ============================================\n   NOISE OVERLAY\n   ============================================ */\n.noise-overlay {\n  position: relative;\n}\n.noise-overlay::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0.015;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E\");\n}\n\n/* ============================================\n   FLOAT ANIMATION\n   ============================================ */\n@keyframes float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n}\n.animate-float {\n  animation: float 6s ease-in-out infinite;\n}\n.animate-float-delayed {\n  animation: float 6s ease-in-out 2s infinite;\n}\n\n/* ============================================\n   PULSE RING\n   ============================================ */\n@keyframes pulseRing {\n  0% { transform: scale(1); opacity: 0.6; }\n  100% { transform: scale(2.5); opacity: 0; }\n}\n.pulse-ring::after {\n  content: '';\n  position: absolute;\n  inset: -4px;\n  border-radius: inherit;\n  border: 2px solid currentColor;\n  animation: pulseRing 2s ease-out infinite;\n}\n\n/* ============================================\n   LINE GLOW (for timeline)\n   ============================================ */\n.line-glow {\n  background: linear-gradient(180deg, #06b6d4, #8b5cf6, #f43f5e);\n  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4), 0 0 20px rgba(139, 92, 246, 0.2);\n}\n\n/* ============================================\n   TIMELINE STYLES\n   ============================================ */\n.timeline-line {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  transform: translateX(-50%);\n  background: linear-gradient(\n    180deg,\n    transparent 0%,\n    rgba(6, 182, 212, 0.6) 5%,\n    rgba(139, 92, 246, 0.6) 50%,\n    rgba(244, 63, 94, 0.6) 95%,\n    transparent 100%\n  );\n}\n:where(.dark) .timeline-line {\n  background: linear-gradient(\n    180deg,\n    transparent 0%,\n    rgba(6, 182, 212, 0.8) 5%,\n    rgba(139, 92, 246, 0.8) 50%,\n    rgba(244, 63, 94, 0.8) 95%,\n    transparent 100%\n  );\n  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3), 0 0 30px rgba(139, 92, 246, 0.15);\n}\n\n.timeline-line-inner {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  transform: translateX(-50%);\n  background: linear-gradient(\n    180deg,\n    transparent 0%,\n    rgba(6, 182, 212, 0.08) 5%,\n    rgba(139, 92, 246, 0.08) 50%,\n    rgba(244, 63, 94, 0.08) 95%,\n    transparent 100%\n  );\n  filter: blur(4px);\n}\n:where(.dark) .timeline-line-inner {\n  background: linear-gradient(\n    180deg,\n    transparent 0%,\n    rgba(6, 182, 212, 0.15) 5%,\n    rgba(139, 92, 246, 0.15) 50%,\n    rgba(244, 63, 94, 0.15) 95%,\n    transparent 100%\n  );\n  filter: blur(6px);\n}\n\n@keyframes timelinePulse {\n  0%, 100% { opacity: 0.4; transform: translateX(-50%) scaleY(1); }\n  50% { opacity: 0.8; transform: translateX(-50%) scaleY(1.02); }\n}\n\n.timeline-line-pulse {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  transform: translateX(-50%);\n  background: linear-gradient(\n    180deg,\n    transparent,\n    rgba(6, 182, 212, 0.5) 20%,\n    rgba(139, 92, 246, 0.5) 50%,\n    rgba(244, 63, 94, 0.5) 80%,\n    transparent\n  );\n  animation: timelinePulse 3s ease-in-out infinite;\n}\n\n@keyframes dotPulse {\n  0% { box-shadow: 0 0 0 0 var(--dot-color); }\n  70% { box-shadow: 0 0 0 10px transparent; }\n  100% { box-shadow: 0 0 0 0 transparent; }\n}\n\n.timeline-dot-pulse {\n  animation: dotPulse 2.5s ease-in-out infinite;\n}\n\n@keyframes scanDown {\n  0% { top: -20%; opacity: 0; }\n  10% { opacity: 1; }\n  90% { opacity: 1; }\n  100% { top: 100%; opacity: 0; }\n}\n.timeline-scan {\n  position: absolute;\n  left: 50%;\n  width: 2px;\n  height: 20%;\n  transform: translateX(-50%);\n  background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.8), transparent);\n  animation: scanDown 4s ease-in-out infinite;\n  pointer-events: none;\n}\n\n.timeline-year-marker {\n  position: relative;\n  z-index: 10;\n}\n\n.timeline-year-marker::before {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%);\n  pointer-events: none;\n}\n:where(.dark) .timeline-year-marker::before {\n  background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);\n}\n\n/* Timeline card hover connector line */\n.timeline-card {\n  position: relative;\n}\n.timeline-card::before {\n  content: '';\n  position: absolute;\n  top: 18px;\n  width: 32px;\n  height: 2px;\n  background: linear-gradient(90deg, rgba(6, 182, 212, 0.5), rgba(139, 92, 246, 0.3));\n  opacity: 0;\n  transition: opacity 0.3s ease, width 0.3s ease;\n}\n.timeline-card:hover::before {\n  opacity: 1;\n}\n.timeline-card-left::before {\n  right: -32px;\n}\n.timeline-card-right::before {\n  left: -32px;\n  background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(6, 182, 212, 0.5));\n}\n\n/* mobile timeline */\n@media (max-width: 768px) {\n  .timeline-line,\n  .timeline-line-inner,\n  .timeline-line-pulse,\n  .timeline-scan {\n    left: 20px;\n  }\n  .timeline-card::before {\n    display: none;\n  }\n}\n\n/* ============================================\n   TAB INDICATOR\n   ============================================ */\n.tab-active {\n  position: relative;\n}\n.tab-active::after {\n  content: '';\n  position: absolute;\n  bottom: -2px;\n  left: 10%;\n  right: 10%;\n  height: 2px;\n  background: linear-gradient(90deg, #06b6d4, #8b5cf6);\n  border-radius: 1px;\n}\n\n/* ============================================\n   GRADIENT TEXT ANIMATION\n   ============================================ */\n@keyframes shimmer {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n.gradient-text-animated {\n  background: linear-gradient(90deg, #06b6d4, #8b5cf6, #f43f5e, #06b6d4);\n  background-size: 300% auto;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: shimmer 4s ease-in-out infinite;\n}\n\n/* ============================================\n   TERMINAL GLOW\n   ============================================ */\n.terminal-glow {\n  box-shadow:\n    0 0 30px rgba(6, 182, 212, 0.1),\n    0 0 60px rgba(139, 92, 246, 0.05),\n    inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n:where(.dark) .terminal-glow {\n  box-shadow:\n    0 0 30px rgba(6, 182, 212, 0.15),\n    0 0 60px rgba(139, 92, 246, 0.08),\n    inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n\n/* ============================================\n   HOVER SHINE SWEEP\n   ============================================ */\n.hover-shine {\n  position: relative;\n  overflow: hidden;\n}\n.hover-shine::after {\n  content: '';\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: linear-gradient(\n    45deg,\n    transparent 40%,\n    rgba(255, 255, 255, 0.05) 45%,\n    rgba(255, 255, 255, 0.1) 50%,\n    rgba(255, 255, 255, 0.05) 55%,\n    transparent 60%\n  );\n  transform: translateX(-100%);\n  transition: transform 0.6s ease;\n  pointer-events: none;\n}\n.hover-shine:hover::after {\n  transform: translateX(100%);\n}\n\n/* ============================================\n   CUSTOM SCROLLBAR\n   ============================================ */\n::-webkit-scrollbar {\n  width: 6px;\n}\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n::-webkit-scrollbar-thumb {\n  background: rgba(100, 116, 139, 0.3);\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb:hover {\n  background: rgba(100, 116, 139, 0.5);\n}\n\n/* ============================================\n   SELECTION COLOR\n   ============================================ */\n::selection {\n  background: rgba(6, 182, 212, 0.3);\n  color: inherit;\n}\n\n/* ============================================\n   GRID OVERLAY (inspired by incredibles.dev / wodniack.dev)\n   ============================================ */\n.grid-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  opacity: 0.03;\n  background-image:\n    linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);\n  background-size: 60px 60px;\n}\n:where(.dark) .grid-overlay {\n  opacity: 0.04;\n  background-image:\n    linear-gradient(rgba(6, 182, 212, 0.5) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(6, 182, 212, 0.5) 1px, transparent 1px);\n}\n\n/* ============================================\n   SPARKLE / CROSS DECORATIVE ELEMENT\n   (inspired by wodniack.dev's + symbols)\n   ============================================ */\n.sparkle {\n  position: relative;\n}\n.sparkle::before,\n.sparkle::after {\n  content: '+';\n  position: absolute;\n  font-size: 14px;\n  font-weight: 300;\n  color: rgba(6, 182, 212, 0.4);\n  pointer-events: none;\n  animation: sparklePulse 3s ease-in-out infinite;\n}\n.sparkle::before {\n  top: -8px;\n  right: -12px;\n}\n.sparkle::after {\n  bottom: -8px;\n  left: -12px;\n  animation-delay: 1.5s;\n}\n@keyframes sparklePulse {\n  0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }\n  50% { opacity: 1; transform: scale(1.2) rotate(90deg); }\n}\n\n/* ============================================\n   CLIP-PATH REVEAL ANIMATION\n   ============================================ */\n@keyframes clipRevealUp {\n  from { clip-path: inset(100% 0 0 0); }\n  to { clip-path: inset(0 0 0 0); }\n}\n@keyframes clipRevealDown {\n  from { clip-path: inset(0 0 100% 0); }\n  to { clip-path: inset(0 0 0 0); }\n}\n@keyframes clipRevealLeft {\n  from { clip-path: inset(0 100% 0 0); }\n  to { clip-path: inset(0 0 0 0); }\n}\n@keyframes clipRevealRight {\n  from { clip-path: inset(0 0 0 100%); }\n  to { clip-path: inset(0 0 0 0); }\n}\n.clip-reveal-up {\n  animation: clipRevealUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n}\n.clip-reveal-down {\n  animation: clipRevealDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n}\n\n/* ============================================\n   CROSS-HATCH PATTERN (inspired by wodniack.dev)\n   ============================================ */\n.crosshatch {\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 4px,\n    rgba(6, 182, 212, 0.06) 4px,\n    rgba(6, 182, 212, 0.06) 5px\n  );\n}\n:where(.dark) .crosshatch {\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 4px,\n    rgba(6, 182, 212, 0.1) 4px,\n    rgba(6, 182, 212, 0.1) 5px\n  );\n}\n\n/* ============================================\n   MAGNETIC HOVER (subtle pull toward cursor)\n   ============================================ */\n.magnetic-hover {\n  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.magnetic-hover:hover {\n  transform: scale(1.02);\n}\n\n/* ============================================\n   STAGGER CHILDREN ANIMATION\n   ============================================ */\n.stagger-children > * {\n  opacity: 0;\n  transform: translateY(20px);\n  animation: staggerIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n}\n.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }\n.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }\n.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }\n.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }\n.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }\n.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }\n@keyframes staggerIn {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ============================================\n   PERSPECTIVE TILT ON SCROLL\n   ============================================ */\n.perspective-section {\n  perspective: 1200px;\n}\n.perspective-section > * {\n  transform-origin: center top;\n}\n\n/* ============================================\n   ENHANCED GLOW PULSES\n   ============================================ */\n@keyframes glowPulse {\n  0%, 100% {\n    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.1);\n  }\n  50% {\n    box-shadow: 0 0 40px rgba(6, 182, 212, 0.6), 0 0 80px rgba(139, 92, 246, 0.25), 0 0 120px rgba(6, 182, 212, 0.1);\n  }\n}\n.glow-pulse-cyan {\n  animation: glowPulse 3s ease-in-out infinite;\n}\n\n/* ============================================\n   FADE-BLUR ENTRANCE\n   ============================================ */\n@keyframes fadeBlurIn {\n  from { opacity: 0; filter: blur(12px); transform: translateY(24px); }\n  to   { opacity: 1; filter: blur(0px);  transform: translateY(0); }\n}\n.fade-blur-in {\n  animation: fadeBlurIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;\n}\n\n/* ============================================\n   ENHANCED FLOAT (multi-axis)\n   ============================================ */\n@keyframes floatDrift {\n  0%   { transform: translateY(0px) translateX(0px) rotate(0deg); }\n  25%  { transform: translateY(-14px) translateX(6px) rotate(1deg); }\n  50%  { transform: translateY(-8px) translateX(-4px) rotate(-0.5deg); }\n  75%  { transform: translateY(-18px) translateX(8px) rotate(1.5deg); }\n  100% { transform: translateY(0px) translateX(0px) rotate(0deg); }\n}\n.animate-float-drift {\n  animation: floatDrift 8s ease-in-out infinite;\n}\n.animate-float-drift-delayed {\n  animation: floatDrift 10s ease-in-out 3s infinite;\n}\n\n/* ============================================\n   SCANLINE EFFECT (for terminal / hero)\n   ============================================ */\n@keyframes scanlineMove {\n  0%   { transform: translateY(-100%); }\n  100% { transform: translateY(100vh); }\n}\n.scanline {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.04), transparent);\n  animation: scanlineMove 8s linear infinite;\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ============================================\n   CUSTOM CURSOR\n   ============================================ */\n@media (hover: hover) and (pointer: fine) {\n  body.custom-cursor,\n  body.custom-cursor * {\n    cursor: none !important;\n  }\n}\n\n/* ============================================\n   MAGNETIC BUTTON (enhanced)\n   ============================================ */\n.btn-magnetic {\n  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;\n  will-change: transform;\n}\n.btn-magnetic:hover {\n  box-shadow: 0 8px 30px rgba(6, 182, 212, 0.2);\n}\n\n/* ============================================\n   CARD 3D TILT (JS-driven via inline style)\n   ============================================ */\n.tilt-card {\n  transform-style: preserve-3d;\n  will-change: transform;\n  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n/* ============================================\n   GRADIENT BORDER (enhanced — faster spin)\n   ============================================ */\n@keyframes borderRotateFast {\n  from { background-position: 0% 0%; }\n  to   { background-position: 300% 300%; }\n}\n.gradient-border-fast::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.5px;\n  background: linear-gradient(135deg, #06b6d4, #8b5cf6, #f43f5e, #06b6d4);\n  background-size: 300% 300%;\n  animation: borderRotateFast 2.5s linear infinite;\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n/* ============================================\n   TEXT SHIMMER WIPE\n   ============================================ */\n@keyframes textShimmerWipe {\n  0%   { background-position: -200% center; }\n  100% { background-position: 200% center; }\n}\n.text-shimmer {\n  background: linear-gradient(90deg,\n    #06b6d4 0%,\n    #8b5cf6 25%,\n    #f43f5e 50%,\n    #8b5cf6 75%,\n    #06b6d4 100%\n  );\n  background-size: 200% auto;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: textShimmerWipe 3s linear infinite;\n}\n\n/* ============================================\n   IMPACT BAR FILL ANIMATION\n   ============================================ */\n@keyframes barFill {\n  from { transform: scaleX(0); }\n  to   { transform: scaleX(1); }\n}\n.bar-fill {\n  transform-origin: left center;\n  animation: barFill 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;\n}\n\n/* ============================================\n   SHAKE ANIMATION (for wrong answers)\n   ============================================ */\n@keyframes shake {\n  0%, 100% { transform: translateX(0); }\n  15%  { transform: translateX(-10px); }\n  30%  { transform: translateX(9px); }\n  45%  { transform: translateX(-7px); }\n  60%  { transform: translateX(6px); }\n  75%  { transform: translateX(-4px); }\n  90%  { transform: translateX(3px); }\n}\n.animate-shake {\n  animation: shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n}\n\n/* ============================================\n   BOUNCE IN (for correct answers)\n   ============================================ */\n@keyframes bounceIn {\n  0%   { transform: scale(0.3); opacity: 0; }\n  50%  { transform: scale(1.08); opacity: 1; }\n  70%  { transform: scale(0.96); }\n  85%  { transform: scale(1.02); }\n  100% { transform: scale(1); opacity: 1; }\n}\n.animate-bounce-in {\n  animation: bounceIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;\n}\n\n/* ============================================\n   PROGRESS BAR ANIMATED FILL\n   ============================================ */\n@keyframes progressFill {\n  from { width: 0%; }\n}\n.progress-fill {\n  animation: progressFill 1s cubic-bezier(0.23, 1, 0.32, 1) both;\n}\n\n/* ============================================\n   PREFERS-REDUCED-MOTION\n   ============================================ */\n@media (prefers-reduced-motion: reduce) {\n  /* CSS animations */\n  .animate-float,\n  .animate-float-delayed,\n  .animate-float-drift,\n  .animate-float-drift-delayed,\n  .mesh-gradient,\n  .gradient-text-animated,\n  .text-shimmer,\n  .timeline-dot-pulse,\n  .timeline-scan,\n  .timeline-line-pulse,\n  .sparkle::before,\n  .sparkle::after,\n  .gradient-border::before,\n  .gradient-border-fast::before,\n  .pulse-ring::after,\n  .glow-pulse-cyan,\n  .fade-blur-in,\n  .scanline,\n  .bar-fill,\n  .progress-fill {\n    animation: none !important;\n    opacity: 1 !important;\n    transform: none !important;\n    filter: none !important;\n  }\n\n  .stagger-children > * {\n    animation: none !important;\n    opacity: 1 !important;\n    transform: none !important;\n  }\n\n  .hover-shine::after {\n    transition: none !important;\n    display: none;\n  }\n\n  .card-3d,\n  .tilt-card {\n    transition: none !important;\n  }\n\n  .card-3d:hover,\n  .tilt-card:hover {\n    transform: none !important;\n  }\n\n  /* Hide cursor follower */\n  [data-cursor-ring],\n  [data-cursor-dot] {\n    display: none !important;\n  }\n}\n\n/* ============================================\n   VIEW TRANSITIONS\n   ============================================ */\n\n/* Old page: slide up + fade out */\n@keyframes vt-slide-out {\n  to { opacity: 0; translate: 0 -20px; }\n}\n\n/* New page: slide in from below + fade in */\n@keyframes vt-slide-in {\n  from { opacity: 0; translate: 0 20px; }\n}\n\n::view-transition-old(root) {\n  animation: vt-slide-out 0.32s cubic-bezier(0.4, 0, 1, 1) both;\n}\n\n::view-transition-new(root) {\n  animation: vt-slide-in 0.42s cubic-bezier(0, 0, 0.2, 1) both;\n}\n\n/* ============================================\n   DESKTOP EVOLUTION GLITCH SHAKE\n   ============================================ */\n@keyframes glitchShake {\n  0%  { transform: translate(0, 0)   skewX(0deg); }\n  25% { transform: translate(-3px, 1px) skewX(-1deg); }\n  50% { transform: translate(2px, -1px) skewX(0.5deg); }\n  75% { transform: translate(-1px, 2px) skewX(-0.5deg); }\n  100%{ transform: translate(0, 0)   skewX(0deg); }\n}\n\n/* ============================================\n   FILM GRAIN OVERLAY\n   ============================================ */\n.film-grain {\n  position: fixed;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.film-grain::before {\n  content: '';\n  position: absolute;\n  inset: -50%;\n  width: 200%;\n  height: 200%;\n  opacity: 0.04;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n  animation: grain 0.4s steps(3) infinite;\n}\n\n@keyframes grain {\n  0%, 100% { transform: translate(0, 0); }\n  33% { transform: translate(-3%, -2%); }\n  66% { transform: translate(2%, 3%); }\n}\n\n/* ============================================\n   AMBIENT CURSOR GLOW\n   ============================================ */\n.ambient-glow::after {\n  content: '';\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  background: radial-gradient(\n    650px circle at var(--mx, 50%) var(--my, 50%),\n    rgba(6, 182, 212, 0.04),\n    transparent 65%\n  );\n  transition: background 0.3s ease;\n}\n\n/* Story page has its own dark world — use a fade-only transition for it */\n::view-transition-old(story-root),\n::view-transition-new(story-root) {\n  animation-duration: 0.5s;\n  animation-timing-function: ease;\n}\n",
      "type": "registry:style",
      "target": "app/cyber.css"
    }
  ],
  "type": "registry:style"
}