/* Chaos Creative — site styles
   Palette: #000000 base · #7335FD primary · #03F3FD accent
   Type: Space Grotesk (display) · Instrument Sans (body) · JetBrains Mono (labels)
   Layout is authored inline on the elements; this file holds resets, keyframes,
   interaction states and the one nav breakpoint. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #000000; color: #EDEDF2; font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #03F3FD; text-decoration: none; }
a:hover { color: #7335FD; }
input, textarea, select, button { font: inherit; color: inherit; }
::selection { background: #7335FD; color: #ffffff; }
@keyframes cc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cc-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes cc-drift2 { 0% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-4%, 3%, 0) scale(1); } 100% { transform: translate3d(0,0,0) scale(1.05); } }
@keyframes cc-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cc-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0.15; } 100% { opacity: 1; } }

/* --- responsive nav: burger below 860px --- */
[data-nav-burger] { display: none; }
@media (max-width: 860px) {
  [data-nav-desktop] { display: none !important; }
  [data-nav-burger] { display: block; }
  [data-nav-burger][hidden] { display: block; }
}
[data-nav-drawer][hidden] { display: none; }

/* --- interaction states (generated; !important to beat inline styles) --- */
.cc-i1:hover { color: #EDEDF2 !important }
.cc-i2:hover { color: #EDEDF2 !important }
.cc-i3:hover { color: #EDEDF2 !important }
.cc-i4:hover { color: #EDEDF2 !important }
.cc-i5:hover { background: #03F3FD !important; border-color: #03F3FD !important; color: #000000 !important }
.cc-i6:hover { border-color: #7335FD !important }
.cc-i7:hover { color: #03F3FD !important }
.cc-i8:hover { color: #03F3FD !important }
.cc-i9:hover { color: #03F3FD !important }
.cc-i10:hover { color: #03F3FD !important }
.cc-i11:hover { background: #03F3FD !important; color: #000000 !important }
.cc-i12:hover { background: #7335FD !important; border-color: #7335FD !important; color: #ffffff !important }
.cc-i13:hover { border-color: #7335FD !important; background: rgba(115,53,253,0.12) !important }
.cc-i14:hover { border-color: rgba(115,53,253,0.85) !important; transform: translateY(-5px) !important; background: linear-gradient(180deg, #0D0A1B 0%, #04040A 100%) !important }
.cc-i15:hover { border-color: rgba(115,53,253,0.85) !important; transform: translateY(-5px) !important; background: linear-gradient(180deg, #0D0A1B 0%, #04040A 100%) !important }
.cc-i16:hover { border-color: rgba(115,53,253,0.85) !important; transform: translateY(-5px) !important; background: linear-gradient(180deg, #0D0A1B 0%, #04040A 100%) !important }
.cc-i17:hover { border-color: rgba(3,243,253,0.85) !important; transform: translateY(-5px) !important; background: linear-gradient(180deg, #0A1518 0%, #04040A 100%) !important }
.cc-i18:hover { background: rgba(115,53,253,0.06) !important }
.cc-i19:focus { border-color: #7335FD !important; background: rgba(115,53,253,0.08) !important }
.cc-i20:focus { border-color: #7335FD !important; background: rgba(115,53,253,0.08) !important }
.cc-i21:focus { border-color: #7335FD !important }
.cc-i22:focus { border-color: #7335FD !important; background: rgba(115,53,253,0.08) !important }
.cc-i23:hover { background: #7335FD !important; border-color: #7335FD !important; color: #ffffff !important }
.cc-i24:hover { color: #EDEDF2 !important }
.cc-i25:hover { color: #EDEDF2 !important }
.cc-i26:hover { color: #EDEDF2 !important }
.cc-i27:hover { color: #EDEDF2 !important }
.cc-i28:hover { color: #EDEDF2 !important }
.cc-i29:hover { color: #EDEDF2 !important }
.cc-i30:hover { color: #EDEDF2 !important }
.cc-i31:hover { background: #03F3FD !important; border-color: #03F3FD !important; color: #000000 !important }
.cc-i32:hover { border-color: #7335FD !important }
.cc-i33:hover { color: #03F3FD !important }
.cc-i34:hover { color: #03F3FD !important }
.cc-i35:hover { color: #03F3FD !important }
.cc-i36:hover { color: #03F3FD !important }
.cc-i37:hover { background: #03F3FD !important; color: #000000 !important }
.cc-i38:hover { background: #7335FD !important; border-color: #7335FD !important; color: #ffffff !important }
.cc-i39:hover { border-color: #7335FD !important; background: rgba(115,53,253,0.12) !important }
.cc-i40:hover { color: #EDEDF2 !important }
.cc-i41:hover { color: #EDEDF2 !important }
.cc-i42:hover { color: #EDEDF2 !important }
.cc-i43:hover { color: #EDEDF2 !important }
.cc-i44:hover { color: #EDEDF2 !important }
.cc-i45:hover { color: #EDEDF2 !important }
.cc-i46:hover { color: #EDEDF2 !important }
.cc-i47:hover { background: #03F3FD !important; border-color: #03F3FD !important; color: #000000 !important }
.cc-i48:hover { border-color: #7335FD !important }
.cc-i49:hover { color: #03F3FD !important }
.cc-i50:hover { color: #03F3FD !important }
.cc-i51:hover { color: #03F3FD !important }
.cc-i52:hover { color: #03F3FD !important }
.cc-i53:hover { background: #03F3FD !important; color: #000000 !important }
.cc-i54:hover { background: #7335FD !important; border-color: #7335FD !important; color: #ffffff !important }
.cc-i55:hover { border-color: #7335FD !important; background: rgba(115,53,253,0.12) !important }
.cc-i56:hover { color: #EDEDF2 !important }
.cc-i57:hover { color: #EDEDF2 !important }
.cc-i58:hover { color: #EDEDF2 !important }