/* Native adaptations of the supplied DepthCarousel, Ribbons and SplitText interactions. */
.cursor-ribbons { inset: 0; mix-blend-mode: screen; pointer-events: none; position: fixed; z-index: 30; }

.depth-group,
.depth-single { perspective: 1500px; transform-style: preserve-3d; }

.depth-surface {
  --depth-rotate-x: 0deg;
  --depth-rotate-y: 0deg;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.16, 1, .3, 1), filter .6s ease, box-shadow .6s ease, opacity .55s ease;
  will-change: transform, filter;
}

.gallery .depth-surface { transition: flex .72s cubic-bezier(.22, .75, .22, 1), transform .72s cubic-bezier(.16, 1, .3, 1), filter .6s ease, box-shadow .6s ease, opacity .55s ease; }

.gallery.depth-group.has-depth-focus .card:not(.depth-active) {
  filter: brightness(.46) saturate(.55) blur(1.2px) !important;
  opacity: .7;
  transform: translateZ(-75px) rotateY(-8deg) scale(.94);
}

.gallery.depth-group.has-depth-focus .card.depth-active {
  box-shadow: 0 36px 70px #000b, 0 0 34px #66cfff55;
  filter: brightness(1.06) saturate(1.12) !important;
  transform: translateZ(92px) rotateX(var(--depth-rotate-x)) rotateY(var(--depth-rotate-y)) scale(1.018);
  z-index: 8;
}

.profile-layout.depth-group.has-depth-focus .depth-surface:not(.depth-active) {
  filter: brightness(.48) saturate(.55) blur(1px);
  opacity: .72;
  transform: translateZ(-72px) rotateY(-7deg) scale(.95);
}

.profile-layout.depth-group.has-depth-focus .depth-surface.depth-active,
.depth-single.depth-active {
  box-shadow: 0 34px 75px #000b, 0 0 38px #6dceff48;
  filter: brightness(1.06) saturate(1.08);
  transform: translateZ(88px) rotateX(var(--depth-rotate-x)) rotateY(var(--depth-rotate-y)) scale(1.012);
  z-index: 4;
}

.bio-contacts {
  border-top: 1px solid #b0dcff55;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(18px, 2vh, 30px);
  padding-top: clamp(16px, 1.8vh, 25px);
  position: relative;
  z-index: 1;
}

.bio-contacts a { color: #fff; display: grid; font-family: var(--display); gap: 5px; min-width: 0; text-decoration: none; }
.bio-contacts span { color: #9dddff; font-size: clamp(10px, .8vw, 14px); letter-spacing: .12em; }
.bio-contacts strong { font-size: clamp(12px, 1.05vw, 18px); letter-spacing: .025em; overflow-wrap: anywhere; }
.bio-contacts a:hover strong { color: #aee9ff; text-shadow: 0 0 14px #7a5cff; }

.contact-stage {
  align-content: center;
  align-items: center;
  display: grid !important;
  gap: clamp(28px, 4vh, 64px);
  justify-items: center;
  min-height: min(62vh, 680px);
  text-align: center;
}

.contact-detail {
  align-items: center !important;
  display: grid !important;
  gap: clamp(10px, 1.3vw, 22px) !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  margin: 0 !important;
  text-align: center;
}

.contact-detail > span {
  color: #8fdcff !important;
  display: block;
  font-family: "Bahnschrift", "Arial Black", "Microsoft YaHei UI", sans-serif !important;
  font-size: clamp(16px, 1.35vw, 25px) !important;
  font-weight: 800;
  letter-spacing: .22em !important;
  line-height: 1.1;
}

.contact-detail > a {
  color: #fff !important;
  display: block;
  font-family: "Bahnschrift", "Arial Black", "Microsoft YaHei UI", sans-serif !important;
  font-size: clamp(32px, 4.7vw, 84px) !important;
  font-style: normal !important;
  font-weight: 800;
  letter-spacing: .045em !important;
  line-height: 1;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.contact-detail > a:hover { color: #b8efff !important; text-shadow: 0 0 22px #6ccfff, 0 0 34px #865eff; }

.split-letter { display: inline-block; opacity: 0; transform: translateY(34px) rotateX(-72deg); transform-origin: 50% 100%; }
.contact-screen.active .split-letter { animation: split-text-in .72s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--letter-index) * 28ms + 120ms); }

@keyframes split-text-in { to { opacity: 1; transform: translateY(0) rotateX(0); } }

@media (max-width: 700px) {
  body { overflow: auto; }
  .site-shell { min-height: 100svh; overflow: visible; }
  .screen { min-height: 100svh; padding: 112px 18px 154px; }
  .page-title { left: 88px; top: 28px; }
  .profile-layout { gap: 24px; grid-template-columns: 1fr; margin-top: 30px; }
  .portrait, .bio { min-height: auto; }
  .asset-portrait img { height: min(75svh, 600px); min-height: 0; object-position: center center !important; }
  .bio { padding: 28px 24px; }
  .bio-contacts { grid-template-columns: 1fr; }
  .gallery-screen.active { justify-content: flex-start; }
  .gallery-heading { margin: 44px 0 22px; }
  .gallery { flex: 0 0 auto !important; flex-direction: column; gap: 12px; min-height: 0 !important; }
  .gallery .card,
  .gallery.expanded .card:not(.expanded),
  .gallery .card.expanded { flex: 0 0 auto !important; height: clamp(156px, 48vw, 250px); min-height: 0; width: 100%; }
  .gallery .card b,
  .gallery .card small { opacity: 1; transform: none; }
  .gallery .card b { writing-mode: horizontal-tb; }
  .gallery.depth-group.has-depth-focus .card,
  .profile-layout.depth-group.has-depth-focus .depth-surface,
  .depth-single.depth-active { filter: none !important; opacity: 1; transform: none !important; }
  .contact-stage { gap: 36px; min-height: min(62svh, 560px); width: min(92vw, 650px); }
  .contact-detail > a { font-size: clamp(27px, 8.6vw, 52px) !important; }
  .contact-detail > span { font-size: clamp(14px, 4vw, 20px) !important; }
  .project-pager { bottom: 108px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ribbons { display: none; }
  .depth-surface { transition: none; }
  .split-letter { animation: none !important; opacity: 1; transform: none; }
}