/* ============================================================
   TECHNICALLY DESIGNED
   Shared styles
   ============================================================ */

:root {
  color-scheme: dark;

  --bg: #0a1015;
  --surface: #101b22;
  --surface-light: #12242b;

  --line: #284047;

  --ink: #e8f2f0;
  --muted: #a8b9bd;

  --accent: #80e8cf;
  --accent-bright: #a5f6e4;

  --dim: #173d3f;
}


/* ============================================================
   BASE
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--ink);

  font:
          16px / 1.65
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;

  overflow-x: hidden;
}

a {
  color: inherit;
}

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

::selection {
  background: var(--accent);
  color: var(--bg);
}

.wrap {
  width: min(1160px, calc(100% - 48px));
  margin: auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  border-bottom: 1px solid var(--line);

  position: relative;
  z-index: 10;

  background: var(--bg);
}

.nav {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.brand {
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
  font-size: 1.2rem;
}

.brand span {
  color: var(--accent);
}

nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;

  color: var(--muted);

  font-size: 0.92rem;

  transition: color 0.2s ease;
}

nav a:hover,
nav a[aria-current="page"],
.footer a:hover {
  color: var(--accent);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
p {
  margin-top: 0;
}

.eyebrow {
  font-size: 24px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  font-weight: 750;

  color: var(--accent);
}


/* ============================================================
   HOME HERO
   ============================================================ */

.hero {
  padding: 105px 0 95px;

  border-bottom: 1px solid var(--line);

  position: relative;

  overflow: hidden;

  background:
          radial-gradient(
                  ellipse at 82% 30%,
                  #174049 0,
                  transparent 47%
          );
}

.hero h1 {
  font-size: clamp(3.5rem, 9vw, 7.9rem);

  line-height: 1.02;

  letter-spacing: -0.075em;

  margin: 18px 0 25px;

  max-width: 850px;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.lead {
  max-width: 670px;

  font-size: clamp(1.1rem, 2vw, 1.35rem);

  color: #c3d2d3;

  line-height: 1.6;
}

.hero-mark {
  position: absolute;

  right: 3%;
  top: 13%;

  font-size: clamp(180px, 32vw, 470px);

  line-height: 1;

  color: #82e9d0;

  opacity: 0.07;

  transform: rotate(-12deg);

  pointer-events: none;

  font-weight: 900;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.actions {
  display: flex;

  gap: 13px;

  flex-wrap: wrap;

  margin-top: 35px;
}

.button {
  border: 1px solid var(--accent);

  color: var(--bg);

  background: var(--accent);

  padding: 12px 20px;

  text-decoration: none;

  font-weight: 750;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-height: 48px;

  transition:
          transform 0.2s ease,
          background 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);

  background: var(--accent-bright);
}

.button.secondary {
  background: transparent;

  color: var(--ink);

  border-color: #648388;
}

.button.secondary:hover {
  background: #1a3037;
}


/* ============================================================
   GENERIC SECTIONS
   ============================================================ */

section {
  padding: 84px 0;
}

.section-head {
  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 28px;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);

  letter-spacing: -0.055em;

  line-height: 1.1;

  margin: 8px 0 0;
}

.section-head p {
  max-width: 390px;

  color: var(--muted);

  margin: 0;
}


/* ============================================================
   ABOUT
   ============================================================ */

.about {
  border-top: 1px solid var(--line);

  background: #0d171c;
}

.about-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;
}

.about h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);

  letter-spacing: -0.055em;

  line-height: 1.1;

  margin: 10px 0 24px;
}

.about p {
  color: var(--muted);

  max-width: 590px;
}

.skills {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  align-content: start;
}

.skill {
  border-bottom: 1px solid var(--line);

  padding: 14px 0;

  font-weight: 600;
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  border-top: 1px solid var(--line);
}

.contact-box {
  border-left: 3px solid var(--accent);

  padding-left: 28px;

  max-width: 900px;
}

.contact-box h2 {
  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.12;

  letter-spacing: -0.05em;
}

.contact-box p {
  color: var(--muted);
}

.contact-links {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 32px;
}

.contact-link {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 22px;

  color: inherit;

  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  transition:
          transform 0.2s ease,
          border-color 0.2s ease,
          background-color 0.2s ease;
}

.contact-link:hover {
  transform: translateY(-4px);

  border-color: rgba(255, 255, 255, 0.35);

  background-color: rgba(255, 255, 255, 0.04);
}

.contact-link-label {
  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  opacity: 0.55;
}

.contact-link-value {
  font-size: 1rem;

  font-weight: 600;

  overflow-wrap: anywhere;
}


/* ============================================================
   STANDARD PAGE INTRO
   ============================================================ */

.page-intro {
  padding: 96px 0 80px;

  border-bottom: 1px solid var(--line);

  background:
          radial-gradient(
                  ellipse at 85% 25%,
                  #174049 0,
                  transparent 48%
          );
}

.page-intro h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);

  line-height: 1;

  letter-spacing: -0.07em;

  margin: 15px 0 20px;
}


/* ============================================================
   GAMEPLAY SYSTEMS / PROJECT BROWSER
   ============================================================ */

.projects-intro {
  padding: 80px 0 110px;

  overflow: hidden;

  background:
          radial-gradient(
                  ellipse at 85% 12%,
                  rgba(23, 64, 73, 0.48),
                  transparent 38%
          );
}

.projects-intro-grid {
  display: grid;

  grid-template-columns: 1.5fr 0.8fr;

  gap: 80px;

  align-items: end;

  margin-bottom: 52px;
}

.projects-intro-grid h1 {
  font-size: clamp(3.2rem, 6vw, 5.8rem);

  line-height: 1;

  letter-spacing: -0.065em;

  margin: 14px 0 0;
}

.projects-intro-grid > p {
  color: #bfd0d2;

  max-width: 430px;

  margin: 0 0 8px;

  font-size: 1.02rem;
}


/* ============================================================
   CAROUSEL HEADER
   ============================================================ */

.project-carousel-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  margin-bottom: 20px;
}

.project-carousel-label {
  display: flex;

  align-items: center;

  gap: 22px;

  color: var(--accent);

  text-transform: uppercase;

  font-size: 0.77rem;

  font-weight: 800;

  letter-spacing: 0.17em;
}

.project-counter {
  color: var(--muted);

  letter-spacing: 0.08em;
}

.project-counter strong {
  color: var(--ink);
}

.carousel-controls {
  display: flex;

  gap: 8px;
}

.carousel-button {
  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  border: 1px solid #45646a;

  background: transparent;

  color: var(--ink);

  font-size: 1.3rem;

  cursor: pointer;

  transition:
          background 0.2s ease,
          color 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease;
}

.carousel-button:hover {
  background: var(--accent);

  color: var(--bg);

  border-color: var(--accent);

  transform: translateY(-2px);
}


/* ============================================================
   CAROUSEL
   ============================================================ */

.project-carousel-shell {
  width: min(
          1400px,
          calc(100% - max(48px, calc((100vw - 1160px) / 2)))
  );

  margin-left:
          max(
                  24px,
                  calc((100vw - 1160px) / 2)
          );
}

.project-carousel {
  display: flex;

  gap: 24px;

  overflow-x: auto;

  overscroll-behavior-inline: contain;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  scrollbar-width: none;

  padding: 0 60px 18px 0;

  cursor: grab;

  user-select: none;

  touch-action: pan-y;
}

.project-carousel::-webkit-scrollbar {
  display: none;
}

.project-carousel.is-dragging {
  cursor: grabbing;

  scroll-snap-type: none;

  scroll-behavior: auto;
}


/* ============================================================
   PROJECT SLIDES
   ============================================================ */

.project-slide {
  flex: 0 0 min(1045px, calc(100vw - 96px));

  scroll-snap-align: start;

  border: 1px solid var(--line);

  background: var(--surface);

  min-height: 535px;

  transition:
          border-color 0.25s ease,
          transform 0.25s ease;
}

.project-slide-featured {
  border-color: var(--accent);
}

.project-slide:hover {
  border-color: var(--accent);
}

.project-slide-link {
  min-height: 535px;

  display: grid;

  grid-template-columns: 1.08fr 0.92fr;

  text-decoration: none;

  color: inherit;
}


/* ============================================================
   PROJECT VISUAL
   ============================================================ */

.project-visual {
  min-height: 535px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
          linear-gradient(
                  145deg,
                  #0c2029,
                  #0c363c 68%,
                  #163537
          );
}

.nexus-visual {
  background:
          radial-gradient(
                  circle at 50% 50%,
                  rgba(57, 185, 167, 0.14),
                  transparent 36%
          ),
          linear-gradient(
                  145deg,
                  #0c2029,
                  #0d3339 65%,
                  #123338
          );
}

.nexus-symbol {
  position: relative;

  z-index: 2;

  font-size: clamp(9rem, 18vw, 17rem);

  line-height: 1;

  color: var(--accent);

  font-weight: 900;

  text-shadow:
          0 0 55px rgba(60, 225, 188, 0.35);

  transform: rotate(-8deg);
}

.nexus-rings {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  pointer-events: none;
}

.nexus-rings span {
  position: absolute;

  width: 57%;

  aspect-ratio: 2.3 / 1;

  border: 1px solid rgba(128, 232, 207, 0.3);

  border-radius: 50%;

  transform: rotateX(65deg);
}

.nexus-rings span:nth-child(2) {
  width: 73%;

  opacity: 0.38;
}

.nexus-rings span:nth-child(3) {
  width: 88%;

  opacity: 0.16;
}

.project-engine {
  position: absolute;

  left: 28px;

  bottom: 24px;

  color: #a7d9d4;

  text-transform: uppercase;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.16em;
}


/* ============================================================
   PLACEHOLDER VISUAL
   ============================================================ */

.placeholder-visual {
  background:
          linear-gradient(
                  145deg,
                  #0d1a20,
                  #10242b
          );
}

.placeholder-number {
  font-size: clamp(8rem, 16vw, 15rem);

  line-height: 1;

  font-weight: 900;

  letter-spacing: -0.08em;

  color: transparent;

  -webkit-text-stroke:
          1px rgba(128, 232, 207, 0.2);

  opacity: 0.7;
}


/* ============================================================
   PROJECT INFO
   ============================================================ */

.project-info {
  padding: clamp(34px, 4vw, 58px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: #101d24;
}

.project-meta {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin-bottom: 25px;
}

.project-featured-label {
  color: var(--accent);

  text-transform: uppercase;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.project-status {
  color: var(--muted);

  font-size: 0.76rem;
}

.project-info h2 {
  font-size: clamp(3rem, 6vw, 5rem);

  line-height: 0.95;

  letter-spacing: -0.07em;

  margin: 0 0 22px;
}

.project-description {
  color: #bfd0d2;

  max-width: 480px;

  font-size: 1rem;

  line-height: 1.65;
}

.project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  padding: 0;

  margin: 20px 0 32px;

  list-style: none;
}

.project-tags li {
  border: 1px solid #38565b;

  padding: 4px 9px;

  color: #d1e0e1;

  font-size: 0.74rem;
}

.project-open {
  border-top: 1px solid var(--line);

  padding-top: 25px;

  margin-top: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--accent);

  font-weight: 750;
}

.project-slide-featured .project-slide-link:hover .project-open {
  color: var(--accent-bright);
}

.project-open-disabled {
  color: #668084;
}


/* ============================================================
   CAROUSEL DOTS
   ============================================================ */

.carousel-dots {
  display: flex;

  gap: 9px;

  margin-top: 18px;
}

.carousel-dot {
  width: 30px;

  height: 4px;

  border: 0;

  padding: 0;

  background: #385057;

  cursor: pointer;

  transition:
          width 0.2s ease,
          background 0.2s ease;
}

.carousel-dot:hover {
  background: #648388;
}

.carousel-dot.is-active {
  width: 58px;

  background: var(--accent);
}

.carousel-hint {
  margin-top: 15px;

  color: #668084;

  font-size: 0.76rem;
}


/* ============================================================
   LEGACY / PROJECT DETAIL CARDS
   Used by Nexus project page
   ============================================================ */

.feature {
  display: grid;

  grid-template-columns: 1.08fr 0.92fr;

  border: 1px solid var(--line);

  background: var(--surface);
}

.feature-art {
  min-height: 390px;

  background:
          linear-gradient(
                  145deg,
                  #0c2029,
                  #0c363c 68%,
                  #163537
          );

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}

.feature-art::before {
  content: "";

  width: 280px;

  height: 280px;

  border: 1px solid #55c9bd70;

  border-radius: 50%;

  box-shadow:
          0 0 0 45px #63d7c40b,
          0 0 0 96px #63d7c408;

  transform:
          rotateX(65deg)
          rotate(-30deg);
}

.feature-art strong {
  position: absolute;

  font-size: clamp(4rem, 10vw, 9rem);

  letter-spacing: -0.09em;

  text-transform: uppercase;

  color: #c4fff1;

  text-shadow:
          0 0 55px #3ce1bc80;
}

.feature-art small {
  position: absolute;

  bottom: 25px;

  left: 30px;

  color: #a3cac7;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  font-size: 0.72rem;
}

.feature-copy {
  padding: clamp(28px, 5vw, 60px);

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.tag {
  font-size: 0.73rem;

  color: var(--accent);

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.17em;
}

.feature h3 {
  font-size: 2.45rem;

  line-height: 1.1;

  letter-spacing: -0.055em;

  margin: 16px 0;
}

.feature p {
  color: var(--muted);
}

.chips {
  list-style: none;

  padding: 0;

  margin: 18px 0 0;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

.chips li {
  border: 1px solid #38565b;

  padding: 4px 10px;

  font-size: 0.8rem;

  color: #ccdbdc;
}

.grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

  margin-top: 18px;
}

.card {
  padding: 30px;

  border: 1px solid var(--line);

  background: #0d181e;
}

.card .num {
  color: var(--accent);

  font-size: 0.8rem;

  letter-spacing: 0.16em;
}

.card h3 {
  font-size: 1.5rem;

  letter-spacing: -0.04em;

  margin: 15px 0 10px;
}

.card p {
  color: var(--muted);

  margin: 0;
}


/* ============================================================
   MODELING
   ============================================================ */

.empty-gallery {
  border: 1px dashed #38565b;

  padding: 70px 24px;

  color: var(--muted);

  text-align: center;
}

.model-card img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  margin-bottom: 22px;

  background: var(--surface);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--line);

  padding: 25px 0;

  color: var(--muted);

  font-size: 0.86rem;
}

.footer {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;
}

.footer a {
  text-decoration: none;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 900px) {

  .projects-intro-grid {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .projects-intro-grid > p {
    max-width: 600px;
  }

  .project-slide {
    flex-basis: calc(100vw - 72px);
  }

  .project-slide-link {
    grid-template-columns: 1fr;
  }

  .project-visual {
    min-height: 360px;
  }

  .project-info {
    min-height: 470px;
  }

  .contact-links {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .nav {
    padding: 15px 0;

    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }

  nav {
    gap: 18px;
  }

  .hero {
    padding: 75px 0;
  }

  .feature,
  .grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .feature-art {
    min-height: 290px;
  }

  .feature-copy {
    padding: 28px;
  }

  .section-head {
    display: block;
  }

  .section-head p {
    margin-top: 14px;
  }

  section {
    padding: 64px 0;
  }

  .about-grid {
    gap: 25px;
  }

  .page-intro {
    padding: 72px 0 60px;
  }

  .projects-intro {
    padding: 60px 0 80px;
  }

  .projects-intro-grid {
    margin-bottom: 38px;
  }

  .project-carousel-shell {
    width: calc(100% - 24px);

    margin-left: 24px;
  }

  .project-carousel {
    gap: 14px;

    padding-right: 24px;
  }

  .project-slide {
    flex-basis: calc(100vw - 48px);
  }

  .project-slide-link {
    min-height: auto;
  }

  .project-visual {
    min-height: 300px;
  }

  .project-info {
    min-height: 430px;

    padding: 30px;
  }

  .project-info h2 {
    font-size: 3rem;
  }

  .project-carousel-header {
    margin-bottom: 15px;
  }

  .carousel-hint {
    display: none;
  }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .wrap {
    width: min(
            calc(100% - 32px),
            1160px
    );
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .skills {
    grid-template-columns: 1fr;
  }

  .eyebrow {
    font-size: 0.9rem;
  }

  .projects-intro-grid h1 {
    font-size: 3.2rem;
  }

  .project-carousel-header {
    align-items: flex-end;
  }

  .project-carousel-label {
    flex-direction: column;

    align-items: flex-start;

    gap: 3px;
  }

  .carousel-button {
    width: 44px;

    height: 44px;
  }

  .project-carousel-shell {
    margin-left: 16px;

    width: calc(100% - 16px);
  }

  .project-slide {
    flex-basis: calc(100vw - 32px);
  }

  .project-visual {
    min-height: 260px;
  }

  .project-info {
    padding: 25px;

    min-height: 440px;
  }

  .project-meta {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .button,
  .carousel-button,
  .project-slide,
  .carousel-dot {
    transition: none;
  }

  .project-carousel {
    scroll-behavior: auto;
  }
}

/* =========================================================
   GAMEPLAY SYSTEMS — PROJECT COVER FLOW
   ========================================================= */

.projects-intro {
  padding: 90px 0 25px;
  border: 0;
}

.projects-intro-inner {
  text-align: center;
}

.projects-intro .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.projects-intro h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.5rem);
}

.projects-intro p {
  max-width: 600px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 1.05rem;
}


/* =========================================================
   SHOWCASE
   ========================================================= */

.project-showcase {
  padding: 30px 0 100px;
  overflow: hidden;
}


/* =========================================================
   COVERFLOW
   ========================================================= */

.coverflow {
  position: relative;
  height: 610px;
  outline: none;
  user-select: none;
  touch-action: pan-y;
}

.coverflow-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1600px;
}


/* =========================================================
   PROJECT CARD
   ========================================================= */

.project-cover {
  position: absolute;

  top: 20px;
  left: 50%;

  width: min(520px, 46vw);
  height: 550px;

  border: 1px solid var(--line);
  background: #0d181e;

  overflow: hidden;

  transform-origin: center center;

  transition:
          transform 0.5s cubic-bezier(.22, .8, .25, 1),
          opacity 0.4s ease,
          filter 0.4s ease,
          border-color 0.3s ease,
          box-shadow 0.4s ease;

  will-change: transform;
}


/* CENTER */

.project-cover.is-active {
  z-index: 5;

  transform:
          translateX(-50%)
          translateX(0)
          scale(1);

  opacity: 1;
  filter: none;

  border-color: var(--accent);

  box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.35),
          0 0 45px rgba(128, 232, 207, 0.06);
}


/* LEFT */

.project-cover.is-left {
  z-index: 3;

  transform:
          translateX(-50%)
          translateX(-72%)
          scale(0.76)
          rotateY(7deg);

  opacity: 0.48;

  filter:
          brightness(0.7)
          saturate(0.75);

  cursor: pointer;
}


/* RIGHT */

.project-cover.is-right {
  z-index: 3;

  transform:
          translateX(-50%)
          translateX(72%)
          scale(0.76)
          rotateY(-7deg);

  opacity: 0.48;

  filter:
          brightness(0.7)
          saturate(0.75);

  cursor: pointer;
}


/* HIDDEN CARDS */

.project-cover.is-hidden {
  z-index: 1;

  transform:
          translateX(-50%)
          scale(0.55);

  opacity: 0;
  pointer-events: none;
}


/* =========================================================
   CARD LINK
   ========================================================= */

.project-cover-link {
  display: grid;
  grid-template-rows: 46% 54%;

  width: 100%;
  height: 100%;

  color: inherit;
  text-decoration: none;
}


/* =========================================================
   CARD VISUAL
   ========================================================= */

.project-cover-visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
          radial-gradient(
                  circle at center,
                  #17454a 0,
                  #0e3036 35%,
                  #0b2027 70%,
                  #0b171d 100%
          );

  border-bottom: 1px solid var(--line);
}


.project-cover-visual::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 90px;

  border: 1px solid rgba(128, 232, 207, 0.3);
  border-radius: 50%;

  box-shadow:
          0 0 0 35px rgba(128, 232, 207, 0.035),
          0 0 0 70px rgba(128, 232, 207, 0.018);
}


.project-cover-bolt {
  position: relative;
  z-index: 2;

  color: var(--accent);

  font-size: 10rem;
  font-weight: 900;

  line-height: 1;

  text-shadow:
          0 0 45px rgba(128, 232, 207, 0.25);
}


.project-cover-engine {
  position: absolute;

  left: 25px;
  bottom: 20px;

  z-index: 3;

  color: #b8e6df;

  font-size: 0.68rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.16em;
}


/* =========================================================
   PLACEHOLDER ART
   ========================================================= */

.placeholder-number {
  position: relative;
  z-index: 2;

  font-size: 9rem;
  font-weight: 900;

  line-height: 1;

  color: rgba(128, 232, 207, 0.12);

  letter-spacing: -0.08em;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.project-cover-content {
  display: flex;
  flex-direction: column;

  padding: 27px 30px 30px;
}


.project-cover-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 10px;
}


.project-number {
  color: var(--accent);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.16em;
}


.project-status {
  color: var(--muted);

  font-size: 0.68rem;

  text-transform: uppercase;
  letter-spacing: 0.1em;
}


.project-cover h2 {
  margin: 0 0 10px;

  font-size: 2.5rem;

  line-height: 1;

  letter-spacing: -0.055em;
}


.project-cover p {
  margin: 0;

  color: var(--muted);

  font-size: 0.91rem;
  line-height: 1.55;
}


/* =========================================================
   TAGS
   ========================================================= */

.project-cover-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  list-style: none;

  padding: 0;
  margin: 18px 0;
}


.project-cover-tags li {
  padding: 3px 8px;

  border: 1px solid #38565b;

  color: #cbdadb;

  font-size: 0.67rem;
}


/* =========================================================
   ACTION
   ========================================================= */

.project-cover-action {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: auto;
  padding-top: 14px;

  border-top: 1px solid var(--line);

  color: var(--accent);

  font-size: 0.82rem;
  font-weight: 800;
}


.project-coming-soon {
  margin-top: auto;
  padding-top: 15px;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 0.75rem;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* =========================================================
   ACTIVE CARD HOVER
   ========================================================= */

.project-cover.is-active:has(a):hover {
  border-color: #a5f6e4;

  box-shadow:
          0 35px 90px rgba(0, 0, 0, 0.45),
          0 0 55px rgba(128, 232, 207, 0.1);
}


/* =========================================================
   ARROWS
   ========================================================= */

.coverflow-arrow {
  position: absolute;

  top: 50%;

  z-index: 20;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #47666b;
  border-radius: 50%;

  background: rgba(10, 16, 21, 0.88);
  color: var(--ink);

  font-size: 1.25rem;

  cursor: pointer;

  transform: translateY(-50%);

  transition:
          background 0.2s ease,
          border-color 0.2s ease,
          color 0.2s ease,
          transform 0.2s ease;
}


.coverflow-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}


.coverflow-arrow-left {
  left: 10px;
}


.coverflow-arrow-right {
  right: 10px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.coverflow-pagination {
  display: flex;
  justify-content: center;

  gap: 10px;

  margin-top: 5px;
}


.coverflow-dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: 1px solid #648388;
  border-radius: 50%;

  background: transparent;

  cursor: pointer;

  transition:
          width 0.25s ease,
          border-radius 0.25s ease,
          background 0.25s ease;
}


.coverflow-dot.is-active {
  width: 28px;

  border-radius: 20px;

  background: var(--accent);
  border-color: var(--accent);
}


.coverflow-hint {
  margin: 16px 0 0;

  text-align: center;

  color: var(--muted);

  font-size: 0.75rem;

  letter-spacing: 0.04em;
}


/* =========================================================
   DRAGGING
   ========================================================= */

.coverflow.is-dragging {
  cursor: grabbing;
}


.coverflow.is-dragging .project-cover {
  transition: none;
}


.coverflow img,
.coverflow a {
  -webkit-user-drag: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .project-cover {
    width: min(470px, 58vw);
  }

  .project-cover.is-left {
    transform:
            translateX(-50%)
            translateX(-62%)
            scale(0.72)
            rotateY(6deg);
  }

  .project-cover.is-right {
    transform:
            translateX(-50%)
            translateX(62%)
            scale(0.72)
            rotateY(-6deg);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .projects-intro {
    padding: 60px 0 15px;
  }

  .projects-intro h1 {
    font-size: 3rem;
  }

  .projects-intro p {
    font-size: 0.95rem;
  }


  .project-showcase {
    padding: 15px 0 70px;
  }


  .coverflow {
    height: 555px;
  }


  .project-cover {
    top: 10px;

    width: 76vw;
    max-width: 360px;

    height: 510px;
  }


  /* Side cards deliberately peek into the viewport */

  .project-cover.is-left {
    transform:
            translateX(-50%)
            translateX(-63%)
            scale(0.68);

    opacity: 0.4;
    filter: brightness(0.65);
  }


  .project-cover.is-right {
    transform:
            translateX(-50%)
            translateX(63%)
            scale(0.68);

    opacity: 0.4;
    filter: brightness(0.65);
  }


  .project-cover-link {
    grid-template-rows: 43% 57%;
  }


  .project-cover-content {
    padding: 22px;
  }


  .project-cover h2 {
    font-size: 2rem;
  }


  .project-cover p {
    font-size: 0.82rem;
  }


  .project-cover-bolt {
    font-size: 7.5rem;
  }


  .placeholder-number {
    font-size: 6.5rem;
  }


  .project-cover-tags {
    margin: 13px 0;
  }


  .project-cover-tags li {
    font-size: 0.59rem;
  }


  .coverflow-arrow {
    width: 42px;
    height: 42px;

    top: 48%;

    background: rgba(10, 16, 21, 0.94);
  }


  .coverflow-arrow-left {
    left: 2px;
  }


  .coverflow-arrow-right {
    right: 2px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .project-cover {
    width: 78vw;
  }


  .project-cover.is-left {
    transform:
            translateX(-50%)
            translateX(-61%)
            scale(0.65);
  }


  .project-cover.is-right {
    transform:
            translateX(-50%)
            translateX(61%)
            scale(0.65);
  }


  .project-cover-content {
    padding: 19px;
  }


  .project-cover p {
    font-size: 0.78rem;
  }


  .project-cover-tags li:nth-child(n+5) {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .project-cover,
  .coverflow-dot,
  .coverflow-arrow {
    transition: none;
  }

}

/* =========================================================
   3D MODELING PROJECT COVER
   ========================================================= */

.modeling-cover {
  background:
          radial-gradient(
                  circle at center,
                  #17454a 0,
                  #103038 35%,
                  #0b2027 70%,
                  #0b171d 100%
          );
}

.modeling-cover-symbol {
  position: relative;
  z-index: 2;

  color: var(--accent);

  font-size: 10rem;
  font-weight: 300;

  line-height: 1;

  transform: rotate(45deg);

  text-shadow:
          0 0 45px rgba(128, 232, 207, 0.25);
}

@media (max-width: 600px) {

  .modeling-cover-symbol {
    font-size: 7.5rem;
  }

}

/* =========================================================
   3D MODELING COLLECTION CARDS
   ========================================================= */

.food-collection-cover {
  background:
          radial-gradient(
                  circle at 50% 45%,
                  #1b5150 0,
                  #12383d 32%,
                  #0c252c 62%,
                  #09171d 100%
          );
}

.environment-collection-cover {
  background:
          radial-gradient(
                  circle at 50% 42%,
                  #1a4a50 0,
                  #12343b 34%,
                  #0c242b 65%,
                  #09171d 100%
          );
}

.collection-symbol {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--accent);

  font-size: clamp(7rem, 14vw, 12rem);
  font-weight: 300;

  line-height: 1;

  opacity: 0.9;

  text-shadow:
          0 0 50px rgba(128, 232, 207, 0.25);
}

.environment-symbol {
  font-size: clamp(8rem, 15vw, 13rem);
}


/* =========================================================
   COLLECTION PAGE HERO
   ========================================================= */

.collection-hero {
  padding: 90px 0 80px;

  border-bottom: 1px solid var(--line);

  background:
          radial-gradient(
                  ellipse at 80% 25%,
                  #174049 0,
                  transparent 48%
          );
}

.collection-back {
  display: inline-block;

  margin-bottom: 45px;

  color: var(--muted);

  text-decoration: none;

  font-size: 0.9rem;
  font-weight: 650;

  transition:
          color 0.2s ease,
          transform 0.2s ease;
}

.collection-back:hover {
  color: var(--accent);
  transform: translateX(-4px);
}

.collection-hero h1 {
  max-width: 900px;

  margin:
          15px
          0
          25px;

  font-size:
          clamp(
                  3.2rem,
                  7vw,
                  6.5rem
          );

  line-height: 0.98;
}

.collection-lead {
  max-width: 720px;

  color: #c3d2d3;

  font-size:
          clamp(
                  1.05rem,
                  1.8vw,
                  1.3rem
          );

  line-height: 1.7;
}

.collection-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 32px;
}

.collection-meta span {
  padding: 6px 12px;

  border: 1px solid #38565b;

  color: #ccdbdc;

  font-size: 0.78rem;
}


/* =========================================================
   ARTWORK PROJECT GRID
   ========================================================= */

.artwork-section {
  padding: 85px 0 110px;
}

.artwork-grid {
  display: grid;

  grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

  gap: 22px;

  margin-top: 35px;
}

.artwork-card {
  min-width: 0;

  border: 1px solid var(--line);

  background: #0d181e;

  overflow: hidden;

  transition:
          transform 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
}

.artwork-card:hover {
  transform: translateY(-6px);

  border-color: var(--accent);

  box-shadow:
          0 18px 50px
          rgba(0, 0, 0, 0.22);
}

.artwork-card-button {
  width: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: left;

  font: inherit;

  cursor: pointer;
}

.artwork-image-placeholder {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-bottom:
          1px solid
          var(--line);

  background:
          radial-gradient(
                  circle at center,
                  #194c49 0,
                  #10343a 38%,
                  #0c2027 70%,
                  #09171c 100%
          );
}

.environment-placeholder {
  aspect-ratio: 16 / 10;

  background:
          linear-gradient(
                  145deg,
                  #102b32,
                  #174248 55%,
                  #10252b
          );
}

.artwork-image-placeholder::before {
  content: "";

  position: absolute;

  width: 45%;
  aspect-ratio: 1;

  border:
          1px solid
          rgba(128, 232, 207, 0.25);

  border-radius: 50%;

  box-shadow:
          0 0 0 35px
          rgba(128, 232, 207, 0.025);
}

.artwork-image-placeholder span {
  position: relative;
  z-index: 2;

  color: var(--accent);

  font-size: 0.72rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.artwork-card-copy {
  padding: 25px;
}

.artwork-number {
  color: var(--accent);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.15em;
}

.artwork-card h3 {
  margin:
          12px
          0
          8px;

  font-size: 1.35rem;

  letter-spacing: -0.035em;
}

.artwork-card p {
  margin-bottom: 22px;

  color: var(--muted);

  font-size: 0.88rem;
}

.artwork-view {
  color: var(--accent);

  font-size: 0.82rem;
  font-weight: 750;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .artwork-grid {
    grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .collection-hero {
    padding:
            65px
            0
            55px;
  }

  .collection-back {
    margin-bottom: 35px;
  }

  .collection-hero h1 {
    font-size:
            clamp(
                    2.8rem,
                    14vw,
                    4.3rem
            );
  }

  .artwork-section {
    padding:
            60px
            0
            75px;
  }

  .artwork-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .artwork-card-copy {
    padding: 22px;
  }

}

.artwork-image-placeholder img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 2;

  transition: transform 0.4s ease;
}

.artwork-card:hover .artwork-image-placeholder img {
  transform: scale(1.035);
}

/* =========================================================
   ARTSTATION DYNAMIC PROJECTS
   ========================================================= */

.artwork-image-placeholder img {
  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
          transform 0.45s
          cubic-bezier(.22, .8, .25, 1);
}


.artwork-card:hover
.artwork-image-placeholder img {

  transform: scale(1.04);

}


/* =========================================================
   LOADING
   ========================================================= */

.artstation-loading {
  grid-column: 1 / -1;

  min-height: 300px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 18px;

  color: var(--muted);
}


.artstation-loading p {
  margin: 0;

  font-size: 0.82rem;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}


.artstation-spinner {
  width: 34px;
  height: 34px;

  border: 2px solid
  rgba(128, 232, 207, 0.15);

  border-top-color:
          var(--accent);

  border-radius: 50%;

  animation:
          artstation-spin
          0.8s
          linear
          infinite;
}


@keyframes artstation-spin {

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   ERROR / EMPTY
   ========================================================= */

.artstation-message {
  grid-column: 1 / -1;

  min-height: 300px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 50px;

  border: 1px solid
  var(--line);

  background: var(--surface);

  text-align: center;
}


.artstation-message h3 {
  margin:
          10px
          0
          8px;

  font-size: 1.8rem;
}


.artstation-message p {
  max-width: 450px;

  margin:
          0
          0
          25px;

  color: var(--muted);
}


/* =========================================================
   MISSING PROJECT IMAGE
   ========================================================= */

.artstation-image-fallback {
  position: relative;

  z-index: 1;

  color: var(--accent);

  font-size: 0.7rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.16em;
}