/* ================================================================
   albiek.com — "Binnenkort online" pixel poster
   Vanilla CSS. No build step. Dark-only by design.
   ================================================================ */

:root{
  --ink:      #0d0a1c;
  --ink-2:    #090714;
  --paper:    #F7EFE1;
  --paper-2:  #FFF3E4;
  --muted:    #CFC4B2;
  --muted-2:  #A99E8D;
  --gold:     #F2C14E;
  --red:      #E8402A;
  --red-deep: #B7241A;
  --jade:     #3FB89A;

  --pad-x: clamp(18px, 5vw, 84px);
  --pad-y: clamp(20px, 3.4vw, 52px);
  --mq-h: 40px;

  --f-pix: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
  --f-mono: 'Silkscreen', ui-monospace, 'Courier New', monospace;
  --f-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-zh);
  font-synthesis-weight:none;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

@media (pointer:fine){
  body{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect x='8' y='0' width='1' height='5' fill='%23F2C14E'/%3E%3Crect x='8' y='12' width='1' height='5' fill='%23F2C14E'/%3E%3Crect x='0' y='8' width='5' height='1' fill='%23F2C14E'/%3E%3Crect x='12' y='8' width='5' height='1' fill='%23F2C14E'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23E8402A'/%3E%3C/svg%3E") 8 8, crosshair; }
  a,button{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect x='6' y='0' width='5' height='17' fill='%23E8402A'/%3E%3Crect x='0' y='6' width='17' height='5' fill='%23E8402A'/%3E%3Crect x='7' y='1' width='3' height='15' fill='%23F2C14E'/%3E%3Crect x='1' y='7' width='15' height='3' fill='%23F2C14E'/%3E%3C/svg%3E") 8 8, pointer; }
}

::selection{ background:var(--red); color:var(--paper-2); }

/* ---------- utilities ---------- */

.vh{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:14px 22px; min-height:48px;
  display:inline-flex; align-items:center;
  background:var(--gold); color:var(--ink);
  font-family:var(--f-mono); font-size:14px; letter-spacing:.18em;
  text-decoration:none; border:3px solid var(--ink);
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* ---------- canvas + CRT overlays ---------- */

#scene{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.fx{ position:fixed; inset:0; z-index:1; pointer-events:none; }

.fx-grid{
  background:
    repeating-linear-gradient(0deg, rgba(247,239,225,.030) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(247,239,225,.030) 0 1px, transparent 1px 4px);
}
.fx-scan{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 2px, transparent 2px 6px);
  mix-blend-mode:multiply;
}
.fx-vignette{
  background:radial-gradient(120% 88% at 50% 42%, transparent 34%, rgba(6,4,14,.80) 100%);
}
.fx-frame{  inset:14px; border:2px solid rgba(242,193,78,.30); }
.fx-frame2{ inset:21px; border:2px solid rgba(232,64,42,.20); }

/* rolling CRT glitch, toggled by JS */
body.rolling #scene{ transform:translateY(-6px); filter:contrast(1.35) saturate(1.4); }
body.rolling .fx-scan{ opacity:.4; }

/* ---------- vertical Chinese rails ---------- */

.rail{
  position:fixed; top:50%; z-index:2;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--f-zh);
  font-size:14px; letter-spacing:.5em;
  color:var(--muted-2);
  pointer-events:none;
}
.rail-l{ left:34px; }
.rail-r{ right:34px; }
@media (max-width:1180px){ .rail{ display:none; } }

/* ---------- shell ---------- */

.shell{
  position:relative; z-index:3;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:var(--pad-y) var(--pad-x) calc(var(--mq-h) + var(--pad-y));
}

/* ---------- header ---------- */

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:14px; }

.seal{
  width:40px; height:40px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--red); border:2px solid var(--gold);
  color:var(--paper-2); font-weight:900; font-size:16px;
  animation:sealpulse 2.8s steps(12,end) infinite;
}
.brand-txt{ display:flex; flex-direction:column; gap:6px; }
.brand-name{
  font-family:var(--f-pix); font-size:11px; letter-spacing:.14em; color:var(--paper);
}
.brand-sub{ font-size:12px; letter-spacing:.26em; color:var(--muted); }

.status{
  margin:0; display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.16em; color:var(--muted);
}
.status .led{
  width:8px; height:8px; flex:none; background:var(--jade);
  box-shadow:0 0 0 0 rgba(63,184,154,.55), 0 0 10px rgba(63,184,154,.45);
  animation:onlineglow 2.2s ease-in-out infinite;
}

/* ---------- stage ---------- */

.stage{
  position:relative;
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(20px, 3vw, 34px);
  padding:clamp(28px,5vw,52px) 0 clamp(12px,2vw,24px);
  text-align:center;
}
/* scrim: guarantees text contrast over any canvas frame */
.stage::before{
  content:""; position:absolute; z-index:-1;
  inset:-6vh -6vw;
  background:radial-gradient(58% 52% at 50% 50%, rgba(6,4,14,.86) 0%, rgba(6,4,14,.62) 55%, transparent 100%);
  pointer-events:none;
}

.eyebrow{
  margin:0; display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
  animation:rise .7s steps(8,end) both;
}
.eyebrow .rule{ width:clamp(24px,5vw,46px); height:2px; background:var(--red); }
.eyebrow-txt{ display:flex; flex-direction:column; gap:7px; }
.eyebrow .nl{
  font-family:var(--f-mono); font-size:clamp(12px,1.4vw,15px);
  letter-spacing:.32em; color:var(--gold); text-transform:uppercase;
}
.eyebrow .zh{ font-size:13px; letter-spacing:.42em; color:var(--muted); }

/* --- the big word --- */

.title{
  position:relative;
  margin:0; font-weight:400;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,1.8vw,20px);
  animation:rise .8s steps(8,end) .12s both;
}
.title-main{
  display:block;
  font-family:var(--f-pix);
  font-size:clamp(20px, 7.1vw, 78px);
  line-height:1.06;
  letter-spacing:.02em;
  color:var(--gold);
  text-shadow:.07em .07em 0 var(--red), .14em .14em 0 rgba(6,4,14,.62);
  white-space:nowrap;
}
.title-main .g{ display:inline-block; }
.title-main .g.on{ animation:pop .34s steps(4,end) both; }
.title-main .cur{
  display:inline-block; width:.72em; height:.86em;
  vertical-align:-.06em; background:var(--red);
  animation:blink .9s steps(1,end) infinite;
}
.title-sub{
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(12px,2vw,22px); flex-wrap:wrap;
}
.title-sub .nl{
  font-family:var(--f-mono); font-size:clamp(15px,2.5vw,30px);
  letter-spacing:.34em; color:var(--paper);
}
.title-sub .zh{
  font-family:var(--f-zh); font-weight:900;
  font-size:clamp(28px,4.6vw,54px); letter-spacing:.1em;
  color:var(--gold); text-shadow:3px 3px 0 var(--red);
}

.stamp{
  position:absolute; right:-88px; top:2px;
  width:56px; padding:11px 0 13px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--red); border:2px solid var(--gold);
  color:var(--paper-2); font-weight:900; font-size:15px; line-height:1;
  font-style:normal;
}
.stamp i{ font-style:normal; }
@media (max-width:1240px){ .stamp{ display:none; } }

/* --- name --- */

.name{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:rise .8s steps(8,end) .24s both;
}
.name-en{
  font-family:var(--f-pix); font-size:clamp(11px,1.55vw,19px);
  letter-spacing:.2em; color:var(--paper);
  text-shadow:3px 3px 0 rgba(232,64,42,.9);
  word-spacing:.3em;
}
.name-zh{ display:flex; align-items:center; gap:12px; font-size:15px; letter-spacing:.34em; color:var(--muted); }
.name-zh .dot{ width:8px; height:8px; flex:none; background:var(--gold); }

.intro{
  margin:0; max-width:60ch;
  font-size:clamp(14px,1.35vw,16px); line-height:2;
  letter-spacing:.06em; color:var(--muted);
  text-wrap:pretty;
  animation:rise .8s steps(8,end) .34s both;
}
.intro .zh{ display:block; margin-top:10px; font-size:14px; letter-spacing:.2em; color:var(--muted-2); }

/* --- countdown --- */

.count{ animation:rise .8s steps(8,end) .44s both; }
.count-list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.cell{
  min-width:clamp(72px,19vw,106px);
  padding:15px 12px 12px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:rgba(9,7,20,.88);
  border:2px solid rgba(242,193,78,.46);
}
.cell-s{ border-color:rgba(232,64,42,.8); }
.cell .num{
  font-family:var(--f-pix); font-size:clamp(19px,2.5vw,27px);
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.cell-s .num{ color:var(--red); }
.cell .num.tick{ animation:scramble .18s steps(2,end) 1; }
.cell .lab{ display:flex; align-items:baseline; gap:7px; }
.cell .lab .nl{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--muted); }
.cell .lab .zh{ font-size:13px; color:var(--muted-2); }

/* --- CTA --- */

.cta-wrap{ margin:0; animation:rise .8s steps(8,end) .54s both; }

.cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:14px;
  min-height:52px; padding:15px 26px;
  background:var(--gold); color:var(--ink);
  border:2px solid var(--gold);
  box-shadow:5px 5px 0 rgba(6,4,14,.7);
  text-decoration:none;
  font-family:var(--f-mono); font-size:15px; letter-spacing:.2em;
  transition:transform .06s steps(2,end), box-shadow .06s steps(2,end);
}
.cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--red-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s steps(6,end);
}
.cta > *{ position:relative; z-index:1; }
.cta .cta-ico{ display:flex; color:currentColor; }
.cta .cta-txt{ display:flex; align-items:baseline; gap:10px; }
.cta .cta-txt .zh{ font-family:var(--f-zh); font-weight:700; font-size:15px; letter-spacing:.14em; }

.cta:hover, .cta:focus-visible{ color:var(--paper-2); border-color:var(--red-deep); }
.cta:hover::before, .cta:focus-visible::before{ transform:scaleX(1); }
.cta:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 rgba(6,4,14,.7); }

.noscript{
  margin:0; max-width:52ch; font-size:14px; line-height:1.9;
  color:var(--muted); border:2px solid rgba(242,193,78,.46);
  padding:14px 18px; background:rgba(9,7,20,.88);
}

/* ---------- footer ---------- */

.foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.2em; color:var(--muted-2);
}
.foot p{ margin:0; }
.foot-r{ font-family:var(--f-mono); letter-spacing:.14em; display:flex; gap:8px; flex-wrap:wrap; }
.foot-r time{ color:var(--muted); }

/* ---------- marquee ---------- */

.marquee{
  position:fixed; left:0; right:0; bottom:0; z-index:4;
  height:var(--mq-h);
  background:var(--red-deep); border-top:2px solid var(--gold);
  display:flex; align-items:center; overflow:hidden;
}
.marquee-track{
  display:flex; width:200%;
  animation:mq 30s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track, .marquee-track.paused{ animation-play-state:paused; }
.marquee-run{
  display:flex; align-items:center; gap:34px;
  width:50%; padding-right:34px;
  white-space:nowrap;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.2em;
  color:var(--paper-2);
}
.marquee-run b{ color:var(--gold); font-weight:400; }
.marquee-run [lang="zh-Hans"]{ font-family:var(--f-zh); font-weight:700; letter-spacing:.16em; }

/* ---------- boot screen ---------- */

.boot{
  position:fixed; inset:0; z-index:9;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  pointer-events:none;
  animation:bootout 1.9s steps(6,end) forwards;
}
.boot.done{ display:none; }
.boot-seal{
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--red); border:2px solid var(--gold);
  color:var(--paper-2); font-weight:900; font-size:19px;
}
.boot-txt{ margin:0; font-family:var(--f-mono); font-size:13px; letter-spacing:.28em; color:var(--muted); }
.boot-bar{ width:220px; height:14px; border:2px solid rgba(247,239,225,.4); padding:2px; }
.boot-bar i{ display:block; height:100%; background:var(--gold); animation:bootbar 1.25s steps(16,end) forwards; }

/* ---------- pointer sparkle trail ---------- */

.spark{
  position:fixed; z-index:5; width:3px; height:3px;
  pointer-events:none; background:var(--gold);
  animation:sparkout .5s steps(4,end) forwards;
}

/* ---------- keyframes ---------- */

@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes bootout{ 0%,58%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }
@keyframes bootbar{ from{ width:0%; } to{ width:100%; } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes onlineglow{ 0%,100%{ opacity:.78; box-shadow:0 0 0 0 rgba(63,184,154,.44), 0 0 7px rgba(63,184,154,.38); } 50%{ opacity:1; box-shadow:0 0 0 5px rgba(63,184,154,0), 0 0 16px rgba(63,184,154,.72); } }
@keyframes sealpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,64,42,.55); } 50%{ box-shadow:0 0 0 6px rgba(232,64,42,0); } }
@keyframes pop{ 0%{ opacity:0; transform:translateY(-6px) scale(1.4); } 60%{ opacity:1; transform:translateY(2px) scale(.9); } 100%{ opacity:1; transform:none; } }
@keyframes scramble{ 0%{ transform:translate(-2px,1px); } 50%{ transform:translate(2px,-1px); filter:invert(1); } 100%{ transform:none; } }
@keyframes sparkout{ 0%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-10px) scale(.4); } }

/* ---------- narrow screens ---------- */

@media (max-width:700px){
  .topbar{ justify-content:center; }
  .status{ font-size:12px; }
  .foot{ justify-content:center; text-align:center; }
  .title-main{ letter-spacing:0; }
  .marquee-run{ font-size:12px; gap:24px; }
}

@media (max-height:620px) and (min-width:701px){
  .stage{ gap:16px; padding:20px 0 12px; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .boot{ display:none; }
  .marquee-track{ animation:none; width:auto; }
  .marquee-run:nth-child(2){ display:none; }
  .spark{ display:none; }
  body.rolling #scene{ transform:none; filter:none; }
}

/* ---------- Windows high contrast ---------- */

@media (forced-colors: active){
  #scene, .fx, .rail{ display:none; }
  .cta, .cell, .noscript{ border:2px solid ButtonText; }
  .cta{ forced-color-adjust:none; background:ButtonFace; color:ButtonText; }
}