/* Light cobalt cover, transitioning into the dark portfolio sections. */
:root {
  --preview-paper: #ffffff;
  --preview-wash: #f1f7ff;
  --preview-ink: #17294c;
  --preview-muted: #526987;
  --preview-line: #c8d6ed;
  --preview-blue: #0217fd;
}

html {
  color-scheme: light;
  scrollbar-color: #8aa4ce var(--preview-paper);
}

body:not(.is-detail) {
  background: #080c11;
  color: var(--white);
}

#home-view {
  --acid: var(--preview-blue);
  --cover-accent-text: #8190ff;
  color: var(--white);
  background: #080c11;
}

.hero, .nav { --cover-accent-text: var(--preview-blue); }

::-webkit-scrollbar-track { background: var(--preview-paper); }
::-webkit-scrollbar-thumb { background: #8aa4ce; border-color: var(--preview-paper); }

.nav {
  background: linear-gradient(100deg, #f1f7ff, #e4f0fd 68%, #dcecfb);
  border-bottom-color: var(--preview-line);
  isolation: isolate;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b0f12;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.is-dark-home .nav::before { opacity: 1; }
.is-dark-home .nav { border-bottom-color: #24313b; --cover-accent-text: #8190ff; }
.is-dark-home .nav .brand-text { color: #d1d7d2; }
.is-dark-home .nav > .nav-right > :is(a, button) { color: #d6dfd9; }

.brand-text { color: #435c86; }
.brand-mark {
  width: 44px;
  height: 32px;
  font-size: 15px;
}
.nav a, .nav button { color: #263d65; }
.nav .contact { border-color: #8199c5; }
.nav a:hover, .nav button:hover { color: var(--preview-blue); }
.nav .contact:hover, .nav:has(.about-id:popover-open) .contact {
  background: var(--preview-blue);
  border-color: var(--preview-blue);
  color: #ffffff;
}

.hero {
  background:
    radial-gradient(ellipse 58% 36% at 88% 0%, rgb(132 186 234 / 0.35), transparent 76%),
    linear-gradient(180deg, #e3effc 0%, #f2f8ff 20%, #ffffff 48%);
}

.hero::before {
  background-image: linear-gradient(rgb(2 23 253 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(2 23 253 / 0.025) 1px, transparent 1px);
}

.hero::after {
  background: none;
}

.hero h1 { color: #394f7c; }
.hero h1 .soft { color: #8da5c2; }
.hero h1 .acid { color: var(--preview-blue); }
.signal-id { color: var(--preview-muted); }
.hero-desc p { color: #455e80; }
.hero-desc .en { color: #587195; }
.ascii-bg {
  filter: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 100%);
}
.cross { color: #8eacd5; }
.hero-foot { color: #607797; }

.scroll-anchor { color: #294772; }
.scroll-anchor span {
  background: #e9f1ff;
  border-color: #9aafd3;
  color: var(--preview-blue);
}
.scroll-anchor:hover span { background: var(--preview-blue); color: #ffffff; }

.depth-section {
  height: clamp(220px, 26vw, 360px);
  background: linear-gradient(180deg,
    #ffffff 0%, #f1f5fa 16%, #d6e1eb 34%, #8fa5bc 52%,
    #43586e 70%, #182633 86%, #080c11 100%);
}
.depth-ascii { height: calc(100% + 240px); }
.depth-overprint, .depth-caption { color: #6a82a4; }
.depth-caption a { color: #314f7c; }
.depth-section::before {
  background-image: linear-gradient(rgb(2 23 253 / 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgb(2 23 253 / 0.02) 1px, transparent 1px);
}

.about-id {
  --id-paper: var(--preview-paper);
  --id-muted: var(--preview-muted);
  --id-edge: #a8bddf;
  color: var(--preview-ink);
}
.about-id-role { color: #2d486f; }
.about-id-contact { border-top-color: #bacbe5; }
.about-id-actions :is(a, button) { color: var(--preview-ink); border-color: #a2b5d5; }
.about-id-actions .about-id-send { background: var(--preview-blue); color: #ffffff; border-color: var(--preview-blue); }
.about-id-actions .about-id-send:hover { color: #ffffff; }
.about-id-actions .about-id-copy:hover { color: var(--preview-blue); border-color: var(--preview-blue); }
.about-id-actions :focus-visible { outline-color: var(--preview-blue); }
.about-id-footer { border-top-color: var(--preview-line); }
.is-dark-home .about-id {
  --id-paper: #151b1a;
  --id-muted: #a3b5a7;
  --id-edge: #6875ac;
  color: #eef0e9;
}
.is-dark-home .about-id-role { color: #d7e0d5; }
.is-dark-home .about-id-contact { border-color: #58665b; }
.is-dark-home .about-id-actions :is(a, button) { color: #eef0e9; border-color: #738279; }
.is-dark-home .about-id-actions .about-id-send { border-color: var(--preview-blue); color: #ffffff; }
.is-dark-home .about-id-footer { border-color: #39453e; }

@media (prefers-reduced-motion: reduce) {
  .nav::before { transition: none; }
}