@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap");

:root{
  --bg: #000000;
  --accent: #ff6a00; /* bright orange */
  --muted: #ff8f3b;
  --glass: rgba(255,255,255,0.03);
  --card-bg: rgba(20,20,20,0.6);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* base radial gradient (stars moved to a separate layer for animation) */
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at top left, #0a0a0a 0%, #000000 60%);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  color: #fff;
  font-family: 'Roboto Mono', monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  overflow-x:hidden;
}

/* Animated starfield layer (subtle, slow movement) */
@keyframes stars-scroll{
  from{background-position: 0 0}
  to{background-position: 0 1000px}
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: url('stars.png');
  background-repeat: repeat;
  background-size: auto;
  opacity:0.9;
  z-index:1; /* below scanlines (z-index:2) and above base gradient */
  animation: stars-scroll 180s linear infinite;
}

/* subtle VHS noise using CSS gradients */
body::before{
  content:"";
  pointer-events:none;
  position:fixed;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:100% 2px;
  mix-blend-mode:overlay;
  opacity:0.65;
  z-index:2;
}

/* flicker animation */
@keyframes flicker{
  0%{opacity:1}
  3%{opacity:.92}
  6%{opacity:.98}
  10%{opacity:.9}
  100%{opacity:1}
}

.container{width:94%;max-width:980px;margin:0 auto;padding:1rem;z-index:3;position:relative}

/* Header */
header{
  text-align:center;
  padding:2.0rem 1rem 0;
  background:linear-gradient(180deg, rgba(255,106,0,0.05), transparent);
  position:relative;
  z-index:4;
}

.header-inner{display:flex;align-items:center;gap:1rem;justify-content:center}
.site-title{font-family:'Orbitron',sans-serif;font-weight:700;color:var(--accent);font-size:2.1rem;letter-spacing:1px;text-transform:uppercase;text-shadow:0 0 12px rgba(255,106,0,0.14),0 0 28px rgba(255,106,0,0.06)}
.subtitle{color:var(--muted);margin-top:0.4rem;font-size:0.95rem}

/* helper: visually hide content but keep it accessible to screen readers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* VHS scanline bar removed */

/* Headline glow */
h2.section-title{font-family:'Orbitron',sans-serif;color:var(--accent);font-size:1.6rem;text-align:center;margin:1.8rem 0 1rem;text-shadow:0 0 8px rgba(255,106,0,0.12);}

/* Timeline grid with center spine and merged rows */
.timeline-grid{position:relative;display:grid;grid-auto-rows:minmax(120px,auto);gap:1.2rem}
.timeline-grid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,106,0,0.12),rgba(255,106,0,0.06));z-index:0;display:none}
.timeline-grid .row{display:grid;gap:2rem;align-items:start;position:relative}
.timeline-grid .cell{min-height:120px}
.timeline-grid .item-content{position:relative;z-index:2;background:rgba(255,255,255,0.03);border:1px solid rgba(255,106,0,0.06);padding:0.9rem 1rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.6);}
.timeline-grid .cell.right .item-content{text-align:right}
.timeline-grid .cell.left .item-content{text-align:left}

/* Connector dot placed at the center line for every item */
.timeline-item::before{content:"";position:absolute;top:18px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(255,106,0,0.12);z-index:1;transform:translateX(-50%)}

/* Desktop: use a 3-column grid so the spine sits between left and right */
@media(min-width:721px){
  /* give both outer columns a sensible minimum so they don't collapse
    and keep the centre spine at a fixed width */
  .timeline-grid .row{grid-template-columns: minmax(320px, 1fr) 80px minmax(320px, 1fr)}
  .timeline-grid::before{display:block}

  /* place left and right cells into the outer columns so items align either side of the spine */
  .timeline-grid .row > .cell.left{grid-column:1}
  .timeline-grid .row > .cell.right{grid-column:3}

  /* merged rows span full width and center their content */
  .timeline-grid .row.merged-row{grid-template-columns:1fr}
  .timeline-grid .row.merged-row .cell.merged .item-content{max-width:820px;margin:0 auto;text-align:center}
}

/* Mobile fallback: stack columns and hide the spine/dots */
@media (max-width:720px){
  .timeline-grid .row{grid-template-columns:1fr}
  .timeline-grid::before{display:none}
  .timeline-item::before{display:none}
  .timeline-grid .cell.right .item-content{text-align:right;padding-right:1rem}
}

/* Card styles */
.card{background:var(--card-bg);border-radius:10px;padding:1.4rem;margin-top:1.4rem;border:1px solid rgba(255,106,0,0.06);box-shadow:0 6px 20px rgba(0,0,0,0.6);backdrop-filter: blur(4px);}
.card p{color: #fff8e7;opacity:0.95}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.photo-grid img{width:100%;height:auto;border-radius:8px;object-fit:cover;display:block;border:1px solid rgba(255,106,0,0.06);box-shadow:0 10px 30px rgba(255,106,0,0.03)}
@media(min-width:700px){.photo-grid{grid-template-columns:1fr 1fr}}

/* SVG tweaks to match theme */
svg{background:transparent}
svg .box{fill:rgba(0,0,0,0.5);stroke:rgba(255,106,0,0.2)}
svg .label, svg .title, svg .sub{fill:var(--muted)}
svg .circle-bg{stroke:rgba(255,106,0,0.12)}

/* Footer */
footer{padding:1.6rem;text-align:center;margin-top:2.6rem;border-top:1px solid rgba(255,106,0,0.06);color:#ffd9bf;position:relative;z-index:4}
footer a{color:var(--accent);text-decoration:none;font-weight:700}

.social-links{margin-top:0.45rem}
.social-links a{color:var(--muted);text-decoration:none;border-bottom:1px dashed rgba(255,106,0,0.12);padding-bottom:2px}

/* social icon */
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;background:transparent;border:1px solid rgba(255,106,0,0.04);transition:box-shadow 260ms cubic-bezier(.2,.9,.2,1), transform 200ms cubic-bezier(.2,.9,.2,1);will-change:transform,box-shadow}
.social-icon svg{width:22px;height:22px;display:block;transition:filter 260ms cubic-bezier(.2,.9,.2,1)}
.social-icon:focus{outline:none;box-shadow:0 0 0 3px rgba(255,106,0,0.08)}
.social-icon:hover{box-shadow:0 12px 28px rgba(255,106,0,0.24);transform:translateY(-1px)}
/* doubled: stronger but still controlled SVG glow */
.social-icon:hover svg circle, .social-icon:hover svg rect{filter:drop-shadow(0 6px 16px rgba(255,106,0,0.28))}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .social-icon{transition:none;transform:none}
  .social-icon svg{transition:none;filter:none}
}

/* small UI details */
a{color:var(--accent)}

/* VHS edge chromatic aberration */
@keyframes chroma{
  0%{transform:translateX(0)}
  50%{transform:translateX(-0.6px)}
  100%{transform:translateX(0)}
}
.title-img{max-width:280px;width:100%;height:auto;display:block}
.cn-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:15px}
.title-img.cn{max-width:150px}
.cn-subtitle{color:var(--muted);font-family:'Roboto Mono',monospace;font-size:0.9rem;opacity:0.95}
/* Chinese name styling used in timeline cards */
.cn-name{color:var(--muted);font-size:0.95rem;margin:0.15rem 0 0 0;opacity:0.95}

/* subtle scanline overlay for cards */
.card::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);background-size:100% 3px;opacity:0.6}

/* small responsive tweaks */
@media(max-width:480px){.site-title{font-size:1.4rem}}

/* accessibility: prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

@media (prefers-reduced-motion: reduce){
  body::after{animation:none}
}