/* Synthwave '84 palette */
:root {
  --bg:       #241b2f;
  --cyan:     #36f9f6;
  --pink:     #ff7edb;
  --yellow:   #fede5d;
  --red:      #fe4450;
  --white:    #ffffff;
  --dim:      #9580a1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--cyan);
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* --- Logo --- */

header {
  text-align: center;
  padding: 2rem 0 1.5rem;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hanzi {
  position: relative;
  display: inline-block;
  font-size: 6rem;
  color: var(--red);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* chromatic aberration layers — fade in after landing animation finishes (1.1s) */
.hanzi::before,
.hanzi::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: 0.05em;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: 1.2s;
}

.hanzi::before {
  color: var(--cyan);
  animation-name: glitch-before;
}

.hanzi::after {
  color: var(--pink);
  animation-name: glitch-after;
}

@keyframes glitch-before {
  0%, 8%   { opacity: 0;    transform: translate(-3px, 0); }
  10%      { opacity: 0.5;  transform: translate(-3px, 0); }
  65%      { opacity: 0.5;  transform: translate(-3px, 0); }
  66%      { opacity: 0.2;  transform: translate(-9px,  2px); }
  68%      { opacity: 0.6;  transform: translate(-1px, -1px); }
  70%      { opacity: 0.5;  transform: translate(-3px, 0); }
  88%      { opacity: 0.5;  transform: translate(-3px, 0); }
  89%      { opacity: 0.2;  transform: translate(-6px, 0); }
  91%      { opacity: 0.5;  transform: translate(-3px, 0); }
  100%     { opacity: 0.5;  transform: translate(-3px, 0); }
}

@keyframes glitch-after {
  0%, 8%   { opacity: 0;    transform: translate(3px, 0); }
  10%      { opacity: 0.5;  transform: translate(3px, 0); }
  65%      { opacity: 0.5;  transform: translate(3px, 0); }
  66%      { opacity: 0.2;  transform: translate(9px, -2px); }
  68%      { opacity: 0.6;  transform: translate(1px,  1px); }
  70%      { opacity: 0.5;  transform: translate(3px, 0); }
  88%      { opacity: 0.5;  transform: translate(3px, 0); }
  89%      { opacity: 0.2;  transform: translate(6px, 0); }
  91%      { opacity: 0.5;  transform: translate(3px, 0); }
  100%     { opacity: 0.5;  transform: translate(3px, 0); }
}

@keyframes land {
  0% {
    transform: scale(4);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.hanzi .char {
  display: inline-block;
  animation: land 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.hanzi .c1 { animation-delay: 0.0s; }
.hanzi .c2 { animation-delay: 0.15s; }
.hanzi .c3 { animation-delay: 0.3s; }
.hanzi .c4 { animation-delay: 0.45s; }
.hanzi .c5 { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  body,
  .hanzi .char,
  .hanzi::before,
  .hanzi::after,
  hr,
  .tagline,
  .link-list li,
  .footer-text,
  .footer-text::after {
    animation: none;
    clip-path: none;
  }
  .hanzi::before { opacity: 0.5; transform: translate(-3px, 0); }
  .hanzi::after  { opacity: 0.5; transform: translate( 3px, 0); }
}

.logo-en {
  font-size: 1.25rem;
  color: var(--pink);
  letter-spacing: 0.7em;
  text-transform: uppercase;
}

/* --- CRT flicker --- */

@keyframes crt-flicker {
  0%, 100%  { opacity: 1;    }
  8%        { opacity: 0.97; }
  8.5%      { opacity: 1;    }
  29%       { opacity: 1;    }
  29.4%     { opacity: 0.95; }
  29.8%     { opacity: 1;    }
  52%       { opacity: 1;    }
  52.2%     { opacity: 0.98; }
  52.6%     { opacity: 0.94; }
  53%       { opacity: 1;    }
  78%       { opacity: 1;    }
  78.3%     { opacity: 0.96; }
  78.7%     { opacity: 1;    }
}

body {
  animation: crt-flicker 9s infinite;
}

/* --- Scanlines --- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
}

/* --- Dividers --- */

.divider {
  border: none;
  border-top: 1px solid var(--dim);
  margin: 1.5rem 0;
}

/* --- Body text --- */

.tagline {
  color: var(--yellow);
  font-size: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* --- Nav category labels --- */

.nav-category {
  color: var(--dim);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  text-align: center;
}

/* --- Nav links --- */

nav {
  text-align: center;
}

.link-list {
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.link-list li::before {
  content: "> ";
  color: var(--dim);
}

.link-list a {
  color: var(--cyan);
  text-decoration: none;
}

.link-list a:hover {
  color: var(--yellow);
  text-decoration: underline;
}

.link-list a.external {
  color: var(--pink);
}

.link-list a.external:hover {
  color: var(--yellow);
}

.ext-marker {
  color: var(--dim);
  font-size: 0.8em;
}

/* --- Footer --- */

footer {
  text-align: center;
}

.footer-text {
  color: var(--dim);
  font-size: 0.8rem;
}

/* --- Terminal typewriter effect --- */
/*
  Timeline (seconds):
  1.3  first <hr> draws          (0.30s, 30 steps)
  1.7  tagline types             (1.30s, 65 steps)
  3.1  nav category types        (0.30s, 15 steps)
  3.5  nav link 1 types          (0.50s, 24 steps)
  4.1  nav link 2 types          (0.50s, 25 steps)
  4.7  second <hr> draws         (0.30s, 30 steps)
  5.1  footer text types         (1.05s, 52 steps)
  6.2  cursor blinks on footer
*/

@keyframes type-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}

@keyframes cursor-blink {
  0%, 100% { border-color: transparent; }
  50%      { border-color: var(--cyan); }
}

hr:nth-of-type(1) {
  animation: type-reveal 0.30s steps(30) 1.3s both;
}

.tagline {
  animation: type-reveal 1.30s steps(65) 1.7s both;
}

.nav-category {
  animation: type-reveal 0.30s steps(15) 3.1s both;
}

.link-list li:nth-child(1) {
  animation: type-reveal 0.50s steps(24) 3.5s both;
}

.link-list li:nth-child(2) {
  animation: type-reveal 0.50s steps(25) 4.1s both;
}

hr:nth-of-type(2) {
  animation: type-reveal 0.30s steps(30) 4.7s both;
}

.footer-text {
  animation: type-reveal 1.05s steps(52) 5.1s both;
}

/* blinking cursor appears after footer finishes typing */
.footer-text::after {
  content: "";
  display: inline-block;
  width: 0;
  border-right: 2px solid transparent;
  animation: cursor-blink 0.7s step-end 6.2s infinite;
  vertical-align: baseline;
  margin-left: 2px;
}

/* --- Subpage elements --- */

.page-title {
  color: var(--pink);
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-top: 1rem;
}

/* small logo — links back to home on subpages */
a.logo-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

a.logo-sm .hanzi {
  font-size: 2.5rem;
}

a.logo-sm .hanzi::before,
a.logo-sm .hanzi::after {
  font-size: 2.5rem;
}

a.logo-sm .logo-en {
  font-size: 0.6rem;
  letter-spacing: 0.35em;
}

/* --- Intro two-column layout --- */

.intro-columns {
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.intro-image {
  float: left;
  width: 220px;
  margin: 0 1.5rem 1rem 0;
  border: 1px solid var(--dim);
}

/* --- Blog entries --- */

.page-intro {
  color: var(--cyan);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.page-intro p + p,
.intro-columns p + p {
  margin-top: 1rem;
}

a:visited {
  color: var(--cyan);
}

.page-intro a,
.entry-body a {
  color: var(--pink);
}

.page-intro a:visited,
.entry-body a:visited {
  color: var(--cyan);
}

.page-intro a:hover,
.entry-body a:hover {
  color: var(--yellow);
}

.entry {
  margin: 1.5rem 0;
}

.entry-title {
  color: var(--yellow);
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.entry-date {
  color: var(--dim);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.entry-body {
  color: var(--cyan);
  line-height: 1.8;
}

.entry-body p + p {
  margin-top: 1rem;
}

.entry-body ul {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}

.entry-body li {
  margin-bottom: 0.25rem;
}

.entry-body li::before {
  content: "► ";
  color: var(--cyan);
  font-size: 0.7em;
  vertical-align: middle;
}

.entry-divider {
  border-top: 1px dashed var(--dim);
  opacity: 0.4;
  margin: 2rem 0;
}