/* The front door: one portrait, one name, one way in.
   The photograph begins as streaks of sound and settles into a face (intro.js). */

:root { --intro-ink: #090B0E; --intro-fg: #F4EFE6; --intro-amber: #F0B36A; color-scheme: dark; }
html, body { background: var(--intro-ink); }
body:has(.intro) { overflow: hidden; color: var(--intro-fg); }

.intro { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: var(--intro-ink); color: var(--intro-fg); isolation: isolate; }
.intro-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 58% 32%;
  animation: intro-photo 1.5s cubic-bezier(.25, .6, .25, 1) both; }
.intro::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 11, 14, 0.86) 0%, rgba(9, 11, 14, 0.5) 30%, rgba(9, 11, 14, 0) 58%),
    linear-gradient(0deg, rgba(9, 11, 14, 0.7) 0%, rgba(9, 11, 14, 0) 34%);
}
.intro-veil { position: absolute; inset: 0; z-index: 5; background: var(--intro-ink); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.intro.is-leaving .intro-veil { opacity: 1; }

.intro-copy {
  position: absolute; z-index: 3; left: max(var(--gutter, 1.5rem), env(safe-area-inset-left, 0px)); right: var(--gutter, 1.5rem);
  bottom: clamp(10rem, 27vh, 15rem);
  animation: intro-in 0.9s ease 0.35s both;
}
.intro-name { margin: 0; display: grid; line-height: 0.88; font-family: var(--font-display); font-weight: 300; letter-spacing: -0.035em;
  font-size: clamp(3.8rem, 11.5vw, 10.5rem); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; }
.intro-name span { display: block; }
.intro-name span + span { padding-left: 0.5em; font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.intro-zh { margin: 1.4rem 0 0; font-family: var(--font-cjk); font-size: clamp(1.1rem, 1.9vw, 1.5rem); letter-spacing: 0.4em; color: var(--intro-amber); }
.intro-bars { list-style: none; display: flex; flex-wrap: wrap; margin: 1.1rem 0 2.1rem; padding: 0; font-size: 0.98rem; letter-spacing: 0.05em; color: rgba(244, 239, 230, 0.86); }
.intro-bars li { padding: 0 1.05rem; }
.intro-bars li:first-child { padding-left: 0; }
.intro-bars li + li { border-left: 1px solid rgba(244, 239, 230, 0.5); }

.intro-line { position: absolute; z-index: 3; left: 0; right: 0; bottom: 2.6rem; height: clamp(110px, 15vh, 160px); color: var(--intro-amber); pointer-events: none; animation: intro-line-in 1.2s ease 0.3s both; }
.intro-line canvas { display: block; width: 100%; height: 100%; }

@keyframes intro-line-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-drip { 0% { transform: translateY(-30px); } 70%, 100% { transform: translateY(90px); } }

@media (max-width: 700px) {
  .intro::after { background: linear-gradient(0deg, rgba(9, 11, 14, 0.94) 0%, rgba(9, 11, 14, 0.7) 34%, rgba(9, 11, 14, 0) 62%), linear-gradient(180deg, rgba(9, 11, 14, 0.35) 0%, rgba(9, 11, 14, 0) 20%); }
  .intro-img { object-position: 58% 30%; }
  .intro-copy { bottom: clamp(9rem, 22vh, 12rem); }
  .intro-line { height: 100px; bottom: 4.6rem; }
  .intro-name { font-size: clamp(3.6rem, 21vw, 6.2rem); }
  .intro-bars { margin-bottom: 1.6rem; font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-img, .intro-copy, .intro-line { animation: none; }
  .intro-veil { transition: none; }
}

/* A quiet row of links along the bottom */
.intro-foot { position: absolute; z-index: 4; left: max(var(--gutter, 1.5rem), env(safe-area-inset-left, 0px)); right: max(var(--gutter, 1.5rem), env(safe-area-inset-right, 0px)); bottom: max(1.1rem, env(safe-area-inset-bottom, 0px)); display: flex; justify-content: flex-end; align-items: baseline; gap: 0.6rem 2rem; flex-wrap: wrap; font-size: 0.86rem; letter-spacing: 0.03em; color: rgba(244, 239, 230, 0.7); animation: intro-in 1s ease 0.9s both; }
.intro-foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.intro-foot a { color: inherit; text-decoration: none; padding-block: 0.3rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 0.2s ease, background-size 0.3s ease; }
.intro-foot a:hover, .intro-foot a:focus-visible { color: var(--intro-amber); background-size: 100% 1px; }
@media (max-width: 700px) { .intro-foot { justify-content: flex-start; font-size: 0.86rem; } .intro-foot ul { gap: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .intro-foot { animation: none; } }