/* ASHFALL — hand-transcribed VHS zine. photocopied, dubbed, burned. */

:root{
  --blk:#050505;        /* hitam pekat */
  --dust:#8a877e;       /* abu debu (secondary) */
  --dust2:#5a574f;
  --ember:#FF6A00;      /* ember orange accent */
  --ember-d:#a8420a;    /* burned-down ember */
  --paper:#E5E5E5;      /* putih kusam */
  --char:#2a1206;       /* scorch */
}

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

/* uneven photocopy black: mottled + faint scorch, not dead-flat digital */
html{
  background:
    radial-gradient(ellipse 68% 46% at 18% 12%, #17130f 0%, transparent 58%),
    radial-gradient(ellipse 54% 38% at 82% 66%, #140f0b 0%, transparent 52%),
    radial-gradient(ellipse 40% 30% at 62% 40%, rgba(90,40,10,.10) 0%, transparent 55%),
    radial-gradient(ellipse 90% 56% at 50% 100%, #171310 0%, transparent 50%),
    #050505;
}
body{
  background:transparent;
  color:var(--paper);
  font-family:"Courier Prime",monospace;
  overflow-x:hidden;
}

/* ---------- background stack ---------- */
.bgstack{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* holographic burning skull — corrupt-transmission projection */
.holo{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  width:min(86vw,660px);height:min(86vw,660px);display:flex;align-items:center;justify-content:center;
  mix-blend-mode:screen;opacity:.92;
  animation:holoflick 4.5s steps(1) infinite}
.holoskull{
  font-size:min(72vw,560px);line-height:1;color:var(--ember);
  font-family:"Segoe UI Symbol","Noto Sans Symbols2","DejaVu Sans",sans-serif;
  text-shadow:0 0 24px rgba(255,106,0,.6),0 0 60px rgba(255,106,0,.35),0 0 100px rgba(168,66,10,.3);
  /* horizontal hologram scanlines carved into the glyph */
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 4px);
  mask-image:repeating-linear-gradient(to bottom,#000 0 2px,transparent 2px 4px);
  animation:holoscan 6s linear infinite,holojit 2.7s steps(1) infinite}
@keyframes holoflick{0%,96%{opacity:.92}96.5%{opacity:.15}97%{opacity:.95}97.6%{opacity:.3}98.2%{opacity:.92}99%{opacity:.6}}
@keyframes holoscan{0%{-webkit-mask-position:0 0;mask-position:0 0}100%{-webkit-mask-position:0 40px;mask-position:0 40px}}
@keyframes holojit{0%,90%{transform:translateX(0)}92%{transform:translateX(-3px)}94%{transform:translateX(4px)}96%{transform:translateX(-2px)}98%{transform:translateX(0)}}

/* emitter glow at the base — projection source */
.emitter{position:absolute;bottom:-6vh;left:50%;transform:translateX(-50%);
  width:min(90vw,700px);height:34vh;border-radius:50%;filter:blur(50px);
  background:radial-gradient(ellipse at center,
    rgba(255,106,0,.38) 0%,rgba(168,66,10,.22) 42%,transparent 70%);
  animation:empulse 5s ease-in-out infinite}
@keyframes empulse{0%,100%{opacity:.8}50%{opacity:1}73%{opacity:.65}}

#ash{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
#grain{position:absolute;inset:0;width:100%;height:100%;opacity:.14;mix-blend-mode:screen}
/* second coarse grain layer, different scale -> non-uniform toner speckle */
#grain2{position:absolute;inset:0;width:100%;height:100%;opacity:.09;mix-blend-mode:screen}

/* toner blotches: blown-out clouds, uneven exposure */
.toner{position:absolute;border-radius:50%;filter:blur(46px);mix-blend-mode:screen}
.toner.b1{width:46vw;height:40vw;left:-10vw;top:6vh;background:rgba(88,86,78,.15)}
.toner.b2{width:34vw;height:28vw;right:-8vw;top:50vh;background:rgba(120,60,20,.10)}
.toner.b3{width:54vw;height:22vw;left:22vw;bottom:-6vh;background:rgba(82,80,74,.12)}
.toner.b4{width:22vw;height:22vw;left:60vw;top:20vh;background:rgba(255,106,0,.045);filter:blur(70px)}

/* toner streak: platen drag line */
.streak{position:absolute;top:0;bottom:0;left:31%;width:2px;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.55),transparent);
  box-shadow:80px 0 60px rgba(0,0,0,.32),-40px 0 40px rgba(0,0,0,.22);opacity:.6}

/* static SVG toner speckle over the WHOLE sheet (incl. body/log negative space) */
.speckle{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.35 1'/></filter><rect width='300' height='300' filter='url(%23s)'/></svg>");
  background-size:300px 300px}

.scan{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,
    rgba(0,0,0,.34) 3px,rgba(0,0,0,0) 4px);opacity:.5}
.roll{position:absolute;left:0;right:0;height:26%;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,rgba(255,106,0,.05) 45%,
    rgba(255,255,255,.05) 50%,rgba(0,0,0,.10) 55%,rgba(255,255,255,0) 100%);
  animation:vroll 7s linear infinite}
@keyframes vroll{0%{top:-30%}100%{top:110%}}
.vig{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 36%,rgba(0,0,0,.66) 100%)}

/* ---------- zine pages ---------- */
.zine{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:0 22px}
.pg{position:relative;min-height:96vh;padding:8vh 30px 10vh;
  display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px dashed rgba(138,135,126,.2)}

/* pages taped at genuinely different angles + offsets */
#p0{transform:rotate(-.9deg)}
#p1{transform:rotate(.7deg) translateX(-10px)}
#p2{transform:rotate(-.5deg) translateX(8px)}
#p3{transform:rotate(.8deg)}

/* ---------- chrome ---------- */
.corner{position:absolute;top:18px;font-family:"Special Elite",monospace;
  font-size:.62rem;letter-spacing:.12em;color:var(--dust);
  text-transform:uppercase;line-height:1.2;filter:url(#toner)}
.corner.tl{left:22px}
.corner.tr{right:22px;text-align:right}

.staple{position:absolute;width:15px;height:5px;background:var(--dust);
  box-shadow:0 1px 0 rgba(0,0,0,.6);opacity:.6}
.staple.s1{top:2vh;left:43%;transform:rotate(-11deg)}
.staple.s2{top:2.4vh;left:53%;transform:rotate(9deg)}

/* two distinct tape strips */
.tape{position:absolute;background:rgba(200,195,180,.12);
  border-left:1px dashed rgba(229,229,229,.18);
  border-right:1px dashed rgba(229,229,229,.18);backdrop-filter:blur(.5px)}
.tape.t1{width:118px;height:34px;top:58%;right:-28px;transform:rotate(37deg)}
.tape.t2{width:88px;height:46px;top:11%;left:-30px;transform:rotate(-48deg);
  background:rgba(170,150,130,.10)}

/* ---------- cover masthead ---------- */
.issue{font-family:"Special Elite",monospace;font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dust);margin-bottom:18px;filter:url(#toner)}

.cover{overflow:hidden}
.mast{
  font-family:"UnifrakturCook","Pirata One",serif;font-weight:700;
  font-size:clamp(4.5rem,20vw,13rem);line-height:.82;letter-spacing:-.02em;
  color:var(--paper);position:relative;
  filter:url(#toner);
  text-shadow:2px 0 0 rgba(255,106,0,.45),-3px 2px 0 rgba(0,0,0,.6),1px -1px 0 rgba(229,229,229,.12);
  margin-left:-.04em}
.mast::after{content:attr(data-txt);position:absolute;left:4px;top:3px;
  color:var(--ember);opacity:.26;filter:url(#d2);z-index:-1;mix-blend-mode:screen}

.skull{display:inline-block;font-size:clamp(2.6rem,8vw,5rem);color:var(--ember);
  filter:url(#rough);text-shadow:0 0 6px rgba(255,106,0,.4),2px 2px 0 rgba(0,0,0,.7);
  margin:8px 0 2px;line-height:1;opacity:.92;
  animation:flick 5.5s steps(1) infinite}
@keyframes flick{0%,97%{opacity:.92}97.5%{opacity:.12}98%{opacity:.92}99%{opacity:.3}99.4%{opacity:.92}}

.sub{font-family:"Special Elite",monospace;font-size:.9rem;line-height:1.7;
  color:var(--paper);max-width:46ch;margin-top:8px;filter:url(#d1)}

.barcode{position:relative;display:flex;gap:2px;align-items:flex-end;height:40px;
  margin-top:28px;width:180px}
.barcode span{background:var(--paper);width:3px;height:100%}
.barcode span:nth-child(2n){width:2px;height:80%}
.barcode span:nth-child(3n){width:5px;height:100%}
.barcode span:nth-child(5n){width:1px;height:62%}
.barcode span:nth-child(7n){height:90%}
.barcode em{position:absolute;bottom:-16px;left:0;font-family:"Special Elite";
  font-style:normal;font-size:.6rem;letter-spacing:.24em;color:var(--dust)}

/* ---------- still-frame card ---------- */
.card{position:relative;width:min(340px,80vw);margin:34px 0 0;padding:0;
  border:1px solid rgba(138,135,126,.34);background:#080706;
  overflow:hidden;outline:none;cursor:pointer;transform:rotate(-1.1deg);
  transition:border-color .45s ease, box-shadow .45s ease, transform .45s ease}

/* --- background layers inside the card --- */
.card-bg{position:absolute;inset:0;z-index:0;overflow:hidden}

/* smoke: two drifting soft plumes */
.smoke{position:absolute;inset:-30%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 60%, rgba(150,140,130,.16) 0%, transparent 60%),
    radial-gradient(ellipse 34% 26% at 70% 35%, rgba(255,106,0,.10) 0%, transparent 62%),
    radial-gradient(ellipse 50% 24% at 50% 85%, rgba(120,112,104,.13) 0%, transparent 58%);
  filter:blur(14px);animation:smk 19s ease-in-out infinite alternate}
@keyframes smk{
  0%{transform:translate(-4%,2%) scale(1.02)}
  50%{transform:translate(3%,-3%) scale(1.09)}
  100%{transform:translate(-2%,4%) scale(1.04)}}

/* light pulse: slow warm breath from below */
.pulse{position:absolute;left:50%;bottom:-24%;transform:translateX(-50%);
  width:130%;height:70%;border-radius:50%;filter:blur(26px);
  background:radial-gradient(ellipse at center,rgba(255,106,0,.22) 0%,rgba(168,66,10,.10) 45%,transparent 72%);
  animation:cpul 6.5s ease-in-out infinite}
@keyframes cpul{0%,100%{opacity:.55}47%{opacity:1}72%{opacity:.42}}

.card-ash{position:absolute;inset:0;width:100%;height:100%;opacity:.75}

/* grain inside the card */
.card-grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='cg'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='29'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.3 1'/></filter><rect width='200' height='200' filter='url(%23cg)'/></svg>");
  background-size:200px 200px;animation:cgr .5s steps(2) infinite}
@keyframes cgr{0%{transform:translate(0,0)}50%{transform:translate(-1.5%,1%)}100%{transform:translate(1%,-1%)}}

/* --- the "image": glyph still, breathing zoom --- */
.card-img{position:relative;z-index:1;height:190px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  filter:blur(1.1px) brightness(.86) contrast(1.06);
  transition:filter .45s ease}
.card-skull{font-size:130px;line-height:1;color:var(--ember);
  font-family:"Segoe UI Symbol","Noto Sans Symbols2","DejaVu Sans",sans-serif;
  text-shadow:0 0 18px rgba(255,106,0,.5),0 0 44px rgba(168,66,10,.3);
  animation:breathe 9s ease-in-out infinite}
/* zoom 1% + breathing */
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.01)}}
/* scanlines: sibling ON TOP of the image so the image blur doesn't soften them */
.card-scan{position:absolute;left:0;right:0;top:0;height:190px;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 1px,rgba(0,0,0,.6) 1px 2px)}
/* head-switching noise band at the bottom edge — the paused-VHS tell */
.card-scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;z-index:4;
  background:repeating-linear-gradient(90deg,
    rgba(229,229,229,.5) 0 2px,rgba(0,0,0,.6) 2px 3px,rgba(255,106,0,.35) 3px 5px,
    rgba(229,229,229,.3) 5px 7px,rgba(0,0,0,.5) 7px 9px);
  filter:blur(.4px);opacity:.55;animation:hsw 1.7s steps(3) infinite}
@keyframes hsw{0%{background-position:0 0;opacity:.5}
  50%{background-position:-14px 0;opacity:.62}
  100%{background-position:9px 0;opacity:.48}}

/* --- caption: chunky VHS OSD bar --- */
.card-cap{position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.9);
  font-family:"Courier Prime",monospace;font-weight:700;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);background:#050403;
  text-shadow:1px 0 0 rgba(255,106,0,.28),0 1px 0 rgba(0,0,0,.8)}
.card-still{color:var(--paper);opacity:.92;letter-spacing:.2em}
.card-still::before{content:"";display:inline-block;width:0;height:0}
.card-tc{color:var(--ember);opacity:.9;text-shadow:0 0 6px rgba(255,106,0,.4)}

/* --- hover: border glow, blur turun, brightness +5% --- */
.card:hover,.card:focus-visible{
  border-color:rgba(255,106,0,.75);
  box-shadow:0 0 0 1px rgba(255,106,0,.25),0 0 22px rgba(255,106,0,.28),inset 0 0 30px rgba(255,106,0,.07);
  transform:rotate(-1.1deg) translateY(-2px)}
.card:hover .card-img,.card:focus-visible .card-img{
  filter:blur(0) brightness(1.05) contrast(1.1)}
.card:hover .card-tc,.card:focus-visible .card-tc{opacity:1}

/* ---------- scrawls ---------- */
.scrawl{font-family:"Special Elite",monospace;color:var(--ember);font-size:1.02rem;
  line-height:1.3;position:absolute;transform:rotate(-6deg);
  text-shadow:1px 1px 0 rgba(0,0,0,.6);filter:url(#marker);opacity:.9}
.scrawl.a1{bottom:8vh;right:5%;text-align:right;transform:rotate(5deg)}
.scrawl.a2{bottom:6vh;left:7%}

/* ---------- headers ---------- */
.hdr{font-family:"Pirata One",serif;font-size:clamp(2.6rem,8vw,5rem);
  color:var(--paper);letter-spacing:.02em;margin-bottom:26px;position:relative;
  filter:url(#toner);text-shadow:2px 2px 0 rgba(0,0,0,.6),-2px 0 0 rgba(255,106,0,.34)}
.hdr.big{font-size:clamp(3rem,11vw,7rem)}
.hdr::after{content:attr(data-txt);position:absolute;left:3px;top:2px;
  color:var(--ember);opacity:.22;z-index:-1;mix-blend-mode:screen}

/* ---------- body type ---------- */
/* asymmetric columns w/ independent offsets — breaks the tidy grid */
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start}
.trans .col{transform:translateY(6px)}
.col.off{transform:rotate(1.8deg) translateY(30px)}
.colo .cols{grid-template-columns:1.3fr 1fr;gap:52px}
.colo .col:last-child{transform:translateY(22px) rotate(-.8deg)}
.ty{font-size:.98rem;line-height:1.85;margin-bottom:16px;max-width:52ch}
.ty.small{font-size:.82rem;line-height:1.6}
.ty.ghost{color:var(--dust);text-shadow:2px 0 0 rgba(255,106,0,.25)}

/* physical marker redaction: scribbled block, not a clean CSS rect */
.ty.redact .rd{position:relative;color:transparent;user-select:none}
.ty.redact .rd::before{content:"";position:absolute;left:-3px;right:-3px;top:-1px;bottom:-1px;
  background:var(--char);filter:url(#marker);
  border-radius:2px 5px 3px 6px;transform:rotate(-.5deg);
  box-shadow:inset 0 0 6px rgba(0,0,0,.6)}
.dead{color:#4a453e;text-decoration:line-through;font-family:"Courier Prime"}

.ascii{font-family:"Courier Prime";font-size:.78rem;line-height:1.2;color:var(--ember-d);
  white-space:pre;margin:14px 0;opacity:.8;text-shadow:1px 0 0 rgba(0,0,0,.5);
  transform:rotate(-1.2deg) skewX(-2deg);filter:url(#d1)}
/* log column drifts off-baseline like a misfed page */
.col.off .ty.small{transform:rotate(.6deg);filter:url(#d1)}

/* ---------- how-to-dub: staggered, NOT an even 3-col grid ---------- */
.stack{position:relative;margin-bottom:36px;min-height:360px}
.cell{border:1px solid rgba(138,135,126,.28);padding:20px 18px;
  background:rgba(18,14,10,.32);position:absolute;max-width:340px}
.cell.c1{top:0;left:0;transform:rotate(-1.6deg);width:56%}
.cell.c2{top:104px;right:0;transform:rotate(2.8deg);width:48%;
  border-color:rgba(255,106,0,.4);z-index:2}
.cell.c3{top:228px;left:10%;transform:rotate(-.8deg);width:60%}
.num{font-family:"Pirata One";font-size:2.4rem;color:var(--ember);
  display:block;margin-bottom:8px;filter:url(#toner)}
.hand{font-family:"Special Elite";font-size:1.12rem;line-height:1.45;
  color:var(--paper);transform:rotate(-1.6deg)}

.quote{font-family:"Special Elite";font-size:1.12rem;line-height:1.7;color:var(--paper);
  max-width:56ch;margin:60px auto 0;text-align:center;
  border-top:1px dashed rgba(138,135,126,.28);border-bottom:1px dashed rgba(138,135,126,.28);
  padding:22px 0;filter:url(#d1)}

/* ---------- links / footer ---------- */
.lnk{color:var(--ember);text-decoration:none;border-bottom:1px solid var(--ember)}
.lnk:hover{background:var(--ember);color:var(--blk)}
.mono{font-family:"Courier Prime";color:var(--dust);letter-spacing:.05em}
.foot{margin-top:50px;font-family:"Special Elite";font-size:.7rem;letter-spacing:.2em;
  color:var(--dust);text-transform:uppercase;text-align:center;filter:url(#toner)}

/* ---------- sound toggle: rubber-stamped label, not a web button ---------- */
.snd{position:fixed;bottom:18px;right:16px;z-index:5;background:transparent;
  border:2px solid var(--ember-d);color:var(--ember-d);font-family:"Special Elite";
  font-size:.6rem;letter-spacing:.16em;padding:6px 11px;cursor:pointer;text-transform:uppercase;
  transform:rotate(-4deg);border-radius:2px 3px 2px 4px;opacity:.72;filter:url(#marker)}
.snd:hover{color:var(--ember);border-color:var(--ember);opacity:.95}
.snd.on{color:var(--ember);border-color:var(--ember);opacity:1}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .cols,.colo .cols{grid-template-columns:1fr;gap:22px}
  .col.off,.trans .col,.colo .col:last-child{transform:rotate(.6deg)}
  .stack{min-height:auto}
  .cell{position:relative;width:100% !important;max-width:100%;margin-bottom:16px;
    top:auto !important;left:auto !important;right:auto !important}
  .cell.c1{transform:rotate(-.8deg)}
  .cell.c2{transform:rotate(1deg)}
  .cell.c3{transform:rotate(-.5deg)}
  .quote{margin-top:24px}
  .tape,.staple{display:none}
  .card{width:100%;margin-top:26px}
  .card-img{height:150px}
  .card-skull{font-size:104px}
  .scrawl.a1{bottom:4vh;right:4%}
  .scrawl.a2{position:relative;bottom:auto;left:auto;margin-top:20px;display:inline-block}
  .pg{padding:7vh 6px 8vh}
}
@media(prefers-reduced-motion:reduce){.roll,.skull{animation:none}}