@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=Barlow+Condensed:wght@600;700;900&family=Space+Mono:wght@400;700&display=swap');

/* ── Base ── */
html { scroll-behavior: auto; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  cursor: none;
}

/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.032;
  pointer-events: none;
  z-index: 9000;
}

/* ── Navigation ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem var(--gutter);
  height: var(--nav-h);
  transition: background var(--dur-base) var(--ease-expo),
              backdrop-filter var(--dur-base) var(--ease-expo);
}

.nav--scrolled {
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Monogram logo */
.nav__mono {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-text);
  transition: opacity var(--dur-fast) var(--ease-expo);
}

.nav__mono:hover { opacity: 0.6; }

/* Nav link group (new homepage nav) */
.nav__links {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

/* Legacy nav structure — used on case study / inner pages */
.nav__left  { display: flex; gap: var(--space-md); align-items: center; }
.nav__right { display: flex; gap: var(--space-md); align-items: center; justify-content: flex-end; }
.nav__center {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__left a, .nav__right a, .nav__center a {
  font-size: var(--size-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mid);
  transition: color var(--dur-fast) var(--ease-expo);
  position: relative;
}
.nav__left a::after, .nav__right a::after, .nav__center a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--c-accent-gradient);
  transition: width var(--dur-base) var(--ease-expo);
}
.nav__left a:hover, .nav__right a:hover { color: var(--c-text); }
.nav__left a:hover::after, .nav__right a:hover::after { width: 100%; }
.nav__left a.active, .nav__right a.active { color: var(--c-text); }
.nav__left a.active::after, .nav__right a.active::after { width: 100%; }

.nav__links a {
  font-size: var(--size-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mid);
  transition: color var(--dur-fast) var(--ease-expo);
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-accent-gradient);
  transition: width var(--dur-base) var(--ease-expo);
}

.nav__links a:hover { color: var(--c-text); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.active { color: var(--c-text); }
.nav__links a.active::after { width: 100%; }

/* ── Custom cursor ── */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor__dot {
  width: 8px;
  height: 8px;
  background: var(--c-text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease-expo),
              opacity var(--dur-fast) var(--ease-expo);
}

.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-expo),
              height 0.4s var(--ease-expo),
              opacity 0.4s var(--ease-expo);
}

.cursor__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-expo);
}

body.cursor--hover .cursor__ring {
  width: 80px;
  height: 80px;
}

body.cursor--hover .cursor__dot {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

body.cursor--hover .cursor__label {
  opacity: 1;
}

body.cursor--link .cursor__ring {
  width: 52px;
  height: 52px;
  opacity: 0.6;
}

/* Hide custom cursor on touch devices — prevents dot artifact in top-left */
@media (hover: none), (pointer: coarse) {
  #cursor { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
}

/* ── Page transitions ── */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--c-accent-gradient);
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}

/* ── Utility ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.label {
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.section-pad {
  padding: var(--space-xl) var(--gutter);
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--c-border);
}

/* ── Per-character blobby warp spans ── */
.char {
  display: inline-block;
  transform: rotate(var(--rot, 0deg)) scale(var(--scl, 1));
  transform-origin: 50% 88%;
}

/* ── Nav center controls — shared pill wrapper for view-toggle + mushroom ── */
.nav__center-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  background: rgba(240, 237, 232, 0.07);
  border: 1px solid var(--c-border);
  border-radius: 99px;
  padding: 4px 8px;
  transition: background 0.25s, border-color 0.25s;
}

/* psych-switch inside the shared pill — strip its own border/bg */
.nav__center-controls .psych-switch {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
}

.nav__center-controls .psych-switch:hover {
  background: rgba(240, 237, 232, 0.1);
  border-color: transparent;
}

/* view-toggle inside the shared pill — strip its own border/bg */
.nav__center-controls .view-toggle {
  background: transparent;
  border: none;
  padding: 3px 4px;
}

.nav__center-controls .view-toggle:hover {
  background: transparent;
  border-color: transparent;
}

/* ── Psychedelic mode — global (applies on all pages) ── */
.psych-switch {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(240, 237, 232, 0.06);
  border: 1px solid rgba(240, 237, 232, 0.1);
  font-size: 1rem;
  line-height: 1;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s;
  flex-shrink: 0;
}

.psych-switch:hover {
  background: rgba(240, 237, 232, 0.12);
  border-color: rgba(240, 237, 232, 0.2);
}

:root[data-psychedelic] {
  --c-bg:           #1c000a;
  --c-text:         #fff5f8;
  --c-text-dim:     rgba(255, 200, 220, 0.5);
  --c-text-mid:     rgba(255, 200, 220, 0.75);
  --c-border:       rgba(255, 100, 150, 0.15);
  --c-border-hover: rgba(255, 120, 160, 0.32);
}

:root[data-psychedelic] body {
  background: linear-gradient(
    135deg,
    #7a0030 0%,
    #c4003a 18%,
    #e8001a 36%,
    #aa0055 54%,
    #cc0035 72%,
    #8b0040 90%,
    #7a0030 100%
  ) center / 350% 350%;
  animation: psycho-gradient 7s ease infinite;
}

/* Nav scrolled state in psychedelic mode — match the red palette */
:root[data-psychedelic] .nav--scrolled {
  background: rgba(100, 0, 25, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@keyframes psycho-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Mobile game button — centered in nav, emoji only */
.game-btn-mobile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(240, 237, 232, 0.06);
  border: 1px solid rgba(240, 237, 232, 0.1);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}

.game-btn-mobile:hover {
  background: rgba(240, 237, 232, 0.12);
  border-color: rgba(240, 237, 232, 0.2);
}

/* ── Mobile nav ── */
@media (max-width: 768px) {
  .nav__links {
    gap: var(--space-sm);
  }

  /* Center controls hidden on mobile — rain/grid/mushroom are desktop features */
  .nav__center-controls { display: none; }
}

@media (max-width: 480px) {
  /* On very small screens, abbreviate by hiding the resume nav link */
  .nav__links a[href="/resume/"] { display: none; }
}

/* Tighter tracking + no italic weight for Cherry Bomb One display headings */
.cs-hero__title,
.cs-section__heading,
.gs-hero__title,
.gs-statement p,
.otb-intro__title,
.about-hero__title,
.about-contact__heading {
  letter-spacing: -0.02em;
  font-style: normal;
  font-weight: 400;
}