/* Homepage view switcher — intentionally quiet so the DeSci canvas can begin empty. */
.home-page [hidden] { display: none !important; }
.home-toggle {
  position: fixed;
  z-index: 200;
  bottom: 24px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 132px;
  padding: 3px;
  transform: translateX(-50%);
  border: 1px solid #0a0a0a;
  border-radius: 5px;
  background: #0a0a0a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.home-toggle-selection {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 3px;
  background: #fafaf8;
  transition: transform .25s var(--ease);
}
[data-home-view="desci"] .home-toggle { top: 14px; bottom: auto; }
[data-home-view="shop"] .home-toggle-selection { transform: translateX(100%); }
.home-toggle button {
  position: relative;
  z-index: 1;
  min-height: 20px;
  color: #a6a6a3;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  transition: color .2s;
}
.home-toggle button[aria-selected="true"] { color: #0a0a0a; }
.home-toggle button:not([aria-selected="true"]):hover { color: #fff; }
.home-toggle button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
#desci-panel {
  min-height: 100svh;
  overflow: hidden;
  background: #050505;
}
[data-home-view="desci"] {
  background: #050505;
}
[data-home-view="desci"] > .site-header,
[data-home-view="desci"] > .site-footer { display: none; }
[data-home-view="desci"]::after { opacity: 0; }

.desci-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 66px 7vw 48px;
  background: radial-gradient(ellipse at center, #171717 0%, #050505 64%);
}

.desci-hero::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(0, 0, 0, .62);
}

.desci-subject {
  position: relative;
  grid-area: 1 / 1;
  width: min(70vw, 940px);
  isolation: isolate;
}

.desci-subject img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 19px rgba(255, 255, 255, .1));
  animation: desci-subject-drift 9s ease-in-out infinite alternate;
}

.desci-subject::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 35%,
    rgba(137, 231, 214, .12) 42%,
    rgba(220, 255, 246, .92) 49%,
    rgba(137, 231, 214, .16) 56%,
    transparent 64%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 34%;
  background-position: center -42%;
  mix-blend-mode: screen;
  -webkit-mask: url("../assets/desci-fluid-sculpture.png") center / contain no-repeat;
  mask: url("../assets/desci-fluid-sculpture.png") center / contain no-repeat;
  animation: desci-biological-scan 5.6s steps(1, end) infinite;
}

.desci-subject::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(170, 255, 240, .72) 17% 38%, transparent 38% 54%, rgba(170, 255, 240, .55) 54% 82%, transparent 82%),
    repeating-linear-gradient(to bottom, rgba(205, 255, 247, .9) 0 1px, transparent 1px 10px);
  mix-blend-mode: screen;
  -webkit-mask: url("../assets/desci-fluid-sculpture.png") center / contain no-repeat;
  mask: url("../assets/desci-fluid-sculpture.png") center / contain no-repeat;
  animation: desci-scan-glitch 5.6s steps(1, end) infinite;
}

.desci-copy {
  z-index: 4;
  grid-area: 1 / 1;
  width: min(720px, calc(100vw - 48px));
  margin-top: -180px;
  color: #f2f1ee;
  text-align: center;
}

.desci-copy h1 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(35px, 4.2vw, 61px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}

.desci-copy p {
  max-width: 650px;
  margin: 22px auto 0;
  color: rgba(242, 241, 238, .78);
  font-family: var(--font);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.45;
}

.desci-pathways {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 0 auto;
  padding: 128px 24px 132px;
  overflow: hidden;
  background:
    linear-gradient(to bottom,
      #050505 0%,
      rgba(5, 5, 5, .92) 34%,
      rgba(5, 5, 5, .89) 100%),
    url("../assets/desci-pathways-bg.jpg") center / cover no-repeat;
}

.desci-pathways::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5, 5, 5, .94) 0%,
    rgba(5, 5, 5, .45) 20%,
    transparent 38%,
    transparent 62%,
    rgba(5, 5, 5, .45) 80%,
    rgba(5, 5, 5, .94) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 42%, transparent 58%, #000 78%, #000 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 42%, transparent 58%, #000 78%, #000 100%);
}

.desci-pathways::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 5, 5, .96) 0%, transparent 34%),
    linear-gradient(to top, rgba(5, 5, 5, .96) 0%, transparent 34%),
    linear-gradient(to right, rgba(5, 5, 5, .88) 0%, transparent 18%, transparent 82%, rgba(5, 5, 5, .88) 100%);
}

.desci-pathway {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid rgba(242, 241, 238, .14);
  border-radius: 8px;
  width: min(1080px, 100%);
  margin: 0 auto;
  background: rgba(5, 5, 5, .38);
}

.desci-pathway-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(242, 241, 238, .13);
  border-radius: 5px;
  color: #dfe7d4;
}

.desci-pathway-mark svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.desci-pathway:nth-child(2) .desci-pathway-mark svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
}

.desci-pathway h2 {
  margin: 0;
  color: #eef6e6;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.025em;
}

.desci-pathway p {
  margin: 4px 0 0;
  color: rgba(242, 241, 238, .46);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.35;
}

.desci-pathway-action {
  width: 104px;
  padding: 8px 10px;
  border: 1px solid #dfe7d4;
  border-radius: 999px;
  color: #eef6e6;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.desci-pathway a.desci-pathway-action:hover { background: rgba(223, 231, 212, .1); }

@keyframes desci-subject-drift {
  from { transform: translate3d(-.8%, -.45%, 0) rotate(-.35deg); }
  to { transform: translate3d(.8%, .45%, 0) rotate(.35deg); }
}

@keyframes desci-biological-scan {
  0%, 14% { background-position: center -42%; transform: translateX(0); }
  15% { background-position: center -12%; transform: translateX(-2.5%); }
  17% { background-position: center -8%; transform: translateX(1.8%); }
  19%, 35% { background-position: center 14%; transform: translateX(0); }
  36% { background-position: center 28%; transform: translateX(3%); }
  38%, 61% { background-position: center 50%; transform: translateX(0); }
  62% { background-position: center 74%; transform: translateX(-2%); }
  64%, 85% { background-position: center 98%; transform: translateX(0); }
  86% { background-position: center 116%; transform: translateX(2.2%); }
  100% { background-position: center 142%; transform: translateX(0); }
}

@keyframes desci-scan-glitch {
  0%, 13%, 22%, 47%, 72%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0); }
  14% { opacity: .48; transform: translateX(-2.2%); clip-path: inset(34% 0 51% 0); }
  16% { opacity: .9; transform: translateX(1.4%); clip-path: inset(43% 0 42% 0); }
  18% { opacity: .2; transform: translateX(-.8%); clip-path: inset(51% 0 33% 0); }
  48% { opacity: .64; transform: translateX(2.6%); clip-path: inset(25% 0 61% 0); }
  50% { opacity: .34; transform: translateX(-1.5%); clip-path: inset(66% 0 21% 0); }
  73% { opacity: .8; transform: translateX(-2%); clip-path: inset(56% 0 30% 0); }
  75% { opacity: .23; transform: translateX(1.1%); clip-path: inset(15% 0 73% 0); }
}

@media (max-width: 720px) {
  .home-toggle { bottom: 16px; width: 128px; }
  [data-home-view="desci"] .home-toggle { top: 12px; bottom: auto; }
  .desci-hero { padding: 58px 6vw 36px; }
  .desci-subject { width: min(100%, 680px); }
  .desci-copy { margin-top: -72px; }
  .desci-copy p { margin-top: 16px; }
  .desci-pathways { gap: 10px; padding: 96px 16px 84px; background-size: 100% 100%, cover; }
  .desci-pathway { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .desci-pathway-mark { width: 32px; height: 32px; font-size: 15px; }
  .desci-pathway h2 { font-size: 14px; }
  .desci-pathway p { font-size: 10px; }
  .desci-pathway-action {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 31px;
    margin-top: 1px;
    padding: 7px 10px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-toggle-selection { transition: none; }
  .desci-subject img,
  .desci-subject::before,
  .desci-subject::after { animation: none; }
}