/* Cyclogon — Custom overrides */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

/* ─── Color tokens ─────────────────────────────────────────────── */
:root {
  --bg:        #0a0a14;
  --bg-alt:    #0f0f1e;
  --bg-mid:    #141428;
  --accent:    #00c8ff;
  --accent2:   #0072ff;
  --fg:        rgba(255, 255, 255, 0.78);
  --fg-bold:   #ffffff;
  --border:    rgba(255, 255, 255, 0.10);
}

/* ─── Base ─────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background-color: var(--bg);
}

p {
  line-height: 1.8;
  color: var(--fg);
}

h1, h2, h3 {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--fg-bold);
  letter-spacing: -0.01em;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
}

/* ─── Sidebar ──────────────────────────────────────────────────── */
#sidebar {
  background-color: var(--bg-alt);
  border-right: 1px solid var(--border);
}

#sidebar .inner {
  background-color: var(--bg-alt);
}

#sidebar nav ul li a {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.25s ease, padding-left 0.25s ease;
}

#sidebar nav ul li a:hover,
#sidebar nav ul li a.active {
  color: var(--accent);
  padding-left: 0.5em;
}

/* ─── Intro section ────────────────────────────────────────────── */
#intro.wrapper {
  background-color: var(--bg);
}

#intro .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ─── Wrapper sections ─────────────────────────────────────────── */
.wrapper.style1 {
  background-color: var(--bg);
}

.wrapper.style1-alt {
  background-color: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.wrapper.style2 {
  background-color: var(--bg-mid);
}

/* Alternate spotlight rows for rhythm */
#two.wrapper.style2 {
  background-color: var(--bg);
}

/* ─── Game card / spotlight polish ─────────────────────────────── */
.spotlights section {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease;
}

.spotlights section:last-child {
  border-bottom: none;
}

/* Image hover: scale + subtle darkening */
.spotlights section .image {
  overflow: hidden;
}

.spotlights section .image img {
  transition: transform 0.45s ease, filter 0.45s ease;
  will-change: transform;
}

.spotlights section:hover .image img {
  transform: scale(1.06);
  filter: brightness(0.82) saturate(1.15);
}

/* Content panel */
.spotlights section .content {
  background-color: inherit;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.button {
  border-color: var(--accent);
  color: var(--accent);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.button:hover {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--fg-bold);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.45),
              inset 0 0 0 1px var(--accent);
}

.button.primary,
input[type="submit"] {
  background-color: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}

.button.primary:hover,
input[type="submit"]:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
}

/* ─── Nav "scrolly" button in intro ───────────────────────────── */
a.scrolly.button {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Contact icons ────────────────────────────────────────────── */
ul.icons li a {
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

ul.icons li a:hover {
  color: var(--accent);
}

/* ─── Footer ───────────────────────────────────────────────────── */
#footer.wrapper.style1-alt {
  background-color: var(--bg-alt);
}

#footer .menu li {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85em;
}

/* ─── Highlight / active nav dot ──────────────────────────────── */
#sidebar nav ul li a::before {
  border-color: var(--accent);
}