:root {
  --page-bg: #030304;
  --line: rgba(255, 255, 255, 0.1);
  --muted: #918c9a;
  --blue: #8b5cf6;
  --theme-accent: #8b5cf6;
  --theme-accent-bright: #a970ff;
  --theme-surface: #0b0811;
  --theme-surface-raised: #110c1b;
}

html,
body,
.grainient-zone {
  background: var(--page-bg);
}

body {
  color: #f6f3f8;
}

::selection {
  color: #fff;
  background: rgba(139, 92, 246, 0.72);
}

.cinematic-overlay {
  background: rgba(5, 2, 10, 0.2);
}

.hero-evil-eye {
  filter: brightness(0.62) saturate(0.88);
}

.cinematic-vignette {
  background:
    linear-gradient(rgba(3, 1, 7, 0.72), rgba(3, 1, 7, 0.06) 38%, rgba(3, 1, 7, 0.7)),
    radial-gradient(circle at 50% 52%, transparent 28%, rgba(6, 2, 12, 0.48) 100%);
}

.cinematic-nav.cinematic-nav--scrolled {
  background: rgba(15, 9, 24, 0.76);
  border-color: rgba(173, 129, 255, 0.28);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.58),
    inset 0 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px rgba(139, 92, 246, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
}

.mobile-menu-glass {
  background: rgba(12, 8, 18, 0.9);
  border-color: rgba(139, 92, 246, 0.2);
}

@media (max-width: 640px) {
  .cinematic-brand,
  .cinematic-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .cinematic-brand {
    margin-left: -11px;
  }

  .cinematic-menu-toggle {
    margin-right: -11px;
  }

  .mobile-menu-glass button {
    min-width: 140px;
    min-height: 44px;
  }

  .project-folder-close,
  .project-gallery-nav {
    width: 44px;
    height: 44px;
  }

  .footer-bottom button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 44px;
  }
}

.nav-links button:hover,
.cinematic-nav button:hover,
.mobile-menu-glass button:hover {
  color: var(--theme-accent-bright);
}

.contact-pill:hover,
.hero-cta:hover,
.scroll-button:hover,
.project-open:hover {
  color: #fff;
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  box-shadow: 0 10px 34px rgba(139, 92, 246, 0.3);
}

.hero-name,
.hero-stat strong,
.hero-manifesto b,
.stats sup {
  color: var(--theme-accent);
}

.cinematic-title .shiny-text {
  color: var(--theme-accent-bright);
  background-image: linear-gradient(
    100deg,
    #8b5cf6 20% 38%,
    #d8c3ff 50%,
    #8b5cf6 62% 80%
  );
}

.portrait-glow {
  background: var(--theme-accent);
}

.about-reference-grid .tilted-card-img {
  object-position: 50% 42%;
}

.tilted-card-caption {
  background: var(--theme-accent);
}

.project-carousel {
  background: #060408;
  border-color: rgba(139, 92, 246, 0.14);
}

.project-carousel-slide {
  background: #0a0710;
  border-color: rgba(176, 139, 255, 0.2);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.52);
}

.project-carousel-slide:hover {
  border-color: rgba(169, 112, 255, 0.62);
  box-shadow: 0 24px 70px rgba(80, 35, 150, 0.28);
}

/* Keep the archive moving over its heading and empty space. Pause only when
   the pointer is actually over one of the visual cards. */
.project-carousel-wall:hover .project-carousel-track {
  animation-play-state: running;
}

.project-carousel-wall:has(.project-carousel-slide:hover) .project-carousel-track {
  animation-play-state: paused;
}

.project-folder-card {
  --folder-accent: var(--theme-accent);
}

.project-folder-back {
  background:
    linear-gradient(150deg, rgba(139, 92, 246, 0.14), transparent 38%),
    #0c0911;
  border-color: rgba(167, 126, 243, 0.24);
}

.project-folder-front {
  background:
    linear-gradient(120deg, rgba(167, 126, 243, 0.16), transparent 35%),
    #0c0912;
  border-color: rgba(176, 139, 255, 0.26);
}

.project-folder-trigger:hover .project-folder-front,
.project-folder-trigger:focus-visible .project-folder-front {
  border-color: rgba(169, 112, 255, 0.66);
}

.experience-reference .experience-item div > span {
  color: #fff;
  background: linear-gradient(110deg, #5f2de1 0%, #8546e8 52%, #a264f4 100%);
  border: 1px solid rgba(191, 151, 255, 0.72);
  border-radius: 999px;
  padding: 7px 15px;
  font-weight: 500;
  box-shadow:
    0 5px 18px rgba(119, 61, 225, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.34),
    inset 0 -1px rgba(59, 20, 128, 0.34);
  text-shadow: 0 1px 3px rgba(32, 8, 74, 0.38);
}

.experience-reference .experience-item:hover div > span {
  background: linear-gradient(110deg, #6e38ed 0%, #9557f0 55%, #b274ff 100%);
  border-color: rgba(220, 194, 255, 0.88);
  box-shadow:
    0 7px 24px rgba(139, 92, 246, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.4);
}

.project-folder-modal {
  background: rgba(2, 1, 4, 0.86);
}

.project-folder-modal .project-card--gallery,
.project-card--gallery {
  background: #050307;
}

.project-gallery-nav,
.project-lightbox-nav {
  z-index: 12;
  color: #fff;
  cursor: pointer;
  background: rgba(16, 10, 25, 0.76);
  border: 1px solid rgba(183, 147, 255, 0.38);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0 0 4px;
  font: 300 38px/1 Arial, sans-serif;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.46),
    inset 0 1px rgba(255, 255, 255, 0.18);
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.project-gallery-nav {
  position: absolute;
  top: calc(50% - 55px);
  transform: translateY(-50%);
}

.project-gallery-nav--prev {
  left: clamp(8px, 2.4vw, 36px);
}

.project-gallery-nav--next {
  right: clamp(8px, 2.4vw, 36px);
}

.project-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.project-lightbox-nav--prev {
  left: clamp(14px, 3vw, 48px);
}

.project-lightbox-nav--next {
  right: clamp(14px, 3vw, 48px);
}

.project-gallery-nav:hover,
.project-lightbox-nav:hover {
  color: #fff;
  background: var(--theme-accent);
  border-color: rgba(226, 207, 255, 0.9);
  box-shadow:
    0 16px 40px rgba(105, 55, 205, 0.46),
    inset 0 1px rgba(255, 255, 255, 0.32);
}

.project-gallery-nav:hover {
  transform: translateY(-50%) scale(1.07);
}

.project-lightbox-nav:hover {
  transform: translateY(-50%) scale(1.07);
}

@media (max-width: 720px) {
  .project-gallery-nav,
  .project-lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 31px;
  }

  .project-gallery-nav {
    top: calc(50% - 45px);
  }
}

.strength-reference-grid .is-featured,
.contact-signature {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}

.strength-reference-grid .is-featured:hover {
  background: var(--theme-accent-bright);
  border-color: #bd94ff;
}

.contact-card {
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.11), transparent 45%),
    rgba(12, 8, 18, 0.94);
  border-color: rgba(176, 139, 255, 0.22);
}

.contact-code:hover {
  background: #0d0814;
  border-color: rgba(169, 112, 255, 0.6);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--theme-accent-bright);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  button,
  a,
  .project-carousel-slide {
    transition-duration: 0.28s;
  }
}