@import url("../styles.css");

:root {
  --paper: #102832;
  --ink: #eff2ed;
  --muted: #aab9b7;
  --accent: #77c7b3;
  --line: rgba(239, 242, 237, 0.2);
  --light-paper: #edf0ea;
  --light-ink: #17313a;
  --warm: #ed765d;
}

body {
  background:
    radial-gradient(circle at 82% 5%, rgba(119, 199, 179, 0.14), transparent 30rem),
    var(--paper);
}

::selection {
  background: var(--warm);
  color: #fff;
}

.site-header {
  border-color: var(--line);
}

.site-header nav {
  color: var(--muted);
}

.site-header nav a:hover,
.primary-link:hover {
  color: var(--accent);
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero > :not(.hero-system) {
  position: relative;
  z-index: 1;
}

.hero-system {
  --pointer-x: 0px;
  --pointer-y: 0px;
  position: absolute;
  z-index: 0;
  top: 11%;
  right: -4%;
  display: block;
  width: clamp(360px, 44vw, 660px);
  aspect-ratio: 1.25 / 1;
  opacity: 0.82;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.hero-system::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(119, 199, 179, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 199, 179, 0.07) 1px, transparent 1px);
  background-size: 11% 14%;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  animation: architecture-grid 18s ease-in-out infinite;
}

.architecture-node {
  --from-x: 0px;
  --from-y: 0px;
  position: absolute;
  display: block;
  width: clamp(46px, 5vw, 72px);
  height: clamp(30px, 3.2vw, 44px);
  border: 1px solid rgba(119, 199, 179, 0.38);
  background:
    linear-gradient(var(--accent), var(--accent)) 10px 10px / 5px 5px no-repeat,
    linear-gradient(rgba(239, 242, 237, 0.42), rgba(239, 242, 237, 0.42)) 24px 12px / calc(100% - 34px) 1px no-repeat,
    rgba(16, 40, 50, 0.72);
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.12);
  animation: architecture-node 18s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
}

.node-a { --from-x: 46px; --from-y: -28px; top: 18%; left: 5%; }
.node-b { --from-x: -34px; --from-y: 24px; top: 66%; left: 5%; }
.node-c { --from-x: 28px; --from-y: 44px; top: 13%; left: 38%; }
.node-e { --from-x: -42px; --from-y: -20px; top: 17%; left: 73%; }
.node-f { --from-x: 34px; --from-y: 35px; top: 66%; left: 73%; }
.node-output { --from-x: 52px; --from-y: -12px; top: 41%; left: 88%; width: clamp(34px, 4vw, 54px); }

.node-gate {
  --from-x: -54px;
  --from-y: 16px;
  top: 45%;
  left: 38%;
  width: clamp(58px, 6vw, 84px);
  border-color: rgba(237, 118, 93, 0.78);
  background:
    linear-gradient(90deg, var(--warm) 0 2px, transparent 2px 7px, var(--warm) 7px 9px, transparent 9px 14px, var(--warm) 14px 16px) 12px 12px / 16px 8px no-repeat,
    linear-gradient(rgba(239, 242, 237, 0.42), rgba(239, 242, 237, 0.42)) 36px 15px / calc(100% - 47px) 1px no-repeat,
    rgba(16, 40, 50, 0.82);
}

.architecture-connection {
  position: absolute;
  height: 1px;
  background: rgba(119, 199, 179, 0.3);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: architecture-link 18s ease-in-out infinite;
}

.architecture-connection.vertical {
  width: 1px;
  height: 28%;
  transform: scaleY(0);
  transform-origin: center top;
  animation-name: architecture-link-vertical;
}

.connection-a { top: 22%; left: 14%; width: 27%; }
.connection-b { top: 70%; left: 14%; width: 27%; }
.connection-c { top: 22%; left: 47%; width: 29%; }
.connection-d { top: 70%; left: 47%; width: 29%; }
.connection-e { top: 24%; left: 42%; }
.connection-f { top: 24%; left: 77%; height: 46%; }

.architecture-trace {
  position: absolute;
  top: 70%;
  left: 10%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 16px rgba(237, 118, 93, 0.75);
  opacity: 0;
  animation: architecture-trace 18s ease-in-out infinite;
}

.hero-system.is-paused *,
.hero-system.is-paused::before {
  animation-play-state: paused;
}

@keyframes architecture-grid {
  0%, 6%, 98%, 100% { opacity: 0; }
  18%, 90% { opacity: 0.7; }
}

@keyframes architecture-node {
  0%, 5% { opacity: 0; transform: translate(var(--from-x), var(--from-y)); }
  15% { opacity: 0.3; transform: translate(var(--from-x), var(--from-y)); }
  32%, 91% { opacity: 1; transform: translate(0, 0); }
  97%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes architecture-link {
  0%, 31% { opacity: 0; transform: scaleX(0); }
  48%, 91% { opacity: 1; transform: scaleX(1); }
  97%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes architecture-link-vertical {
  0%, 31% { opacity: 0; transform: scaleY(0); }
  48%, 91% { opacity: 1; transform: scaleY(1); }
  97%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes architecture-trace {
  0%, 51% { top: 70%; left: 10%; opacity: 0; }
  55% { top: 70%; left: 10%; opacity: 1; }
  62% { top: 70%; left: 42%; opacity: 1; }
  68% { top: 50%; left: 42%; opacity: 1; }
  76% { top: 50%; left: 77%; opacity: 1; }
  83% { top: 45%; left: 92%; opacity: 1; }
  87%, 100% { top: 45%; left: 92%; opacity: 0; }
}

.eyebrow,
.section-number,
.focus-index {
  color: var(--accent);
}

.hero h1 {
  max-width: 1080px;
  letter-spacing: -0.05em;
}

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

.hero-footer p {
  color: #c8d3d1;
}

.section {
  background: var(--light-paper);
  box-shadow: 0 0 0 100vmax var(--light-paper);
  clip-path: inset(0 -100vmax);
  color: var(--light-ink);
  border-color: rgba(23, 49, 58, 0.2);
}

.section .section-number,
.section .focus-index {
  color: #287c6f;
}

.section .work-intro > p:not(.large-copy),
.section .focus-grid article > p:last-child,
.section .about-copy > p:not(.large-copy),
.section .detail-list > div > span {
  color: #617176;
}

.section .focus-grid,
.section .focus-grid article,
.section .detail-list,
.section .detail-list div {
  border-color: rgba(23, 49, 58, 0.2);
}

.focus-grid article {
  position: relative;
}

.focus-grid article::after {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm);
  content: "";
}

.selected-section {
  background: #184550;
  box-shadow: 0 0 0 100vmax #184550;
  color: #f1f4ef;
}

.selected-section .section-number {
  color: var(--accent);
}

.work-card {
  border-color: rgba(239, 242, 237, 0.22);
}

.work-card:hover {
  color: #aee0d4;
}

.work-description > span,
.work-meta,
.selected-note {
  color: #aec0bd;
}

.selected-note a {
  color: #aee0d4;
}

.about-section {
  background: #dce6df;
  box-shadow: 0 0 0 100vmax #dce6df;
}

.connect {
  border-color: var(--line);
}

.connect h2 {
  color: #f5f1e8;
}

.profile-list,
.profile-list a,
.site-footer {
  border-color: var(--line);
}

.profile-list a:hover {
  color: var(--accent);
}

.profile-handle,
.site-footer {
  color: var(--muted);
}

@media (max-width: 680px) {
  .hero-system {
    top: 18%;
    right: -58%;
    width: 460px;
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-system,
  .hero-system *,
  .hero-system::before {
    animation: none !important;
    transition: none !important;
  }

  .architecture-connection {
    opacity: 1;
    transform: scaleX(1);
  }

  .architecture-connection.vertical {
    transform: scaleY(1);
  }

  .architecture-trace {
    display: none;
  }
}