/* hinagiku.stream — tape-warped daisy broadcast */

:root{
  --umber:#3a2018;        /* deep burnt umber, near-black */
  --tape-leader:#5c2e1f;  /* secondary bg, card backings */
  --terracotta:#a64b2a;   /* primary brand, stems, borders */
  --phosphor:#d97043;     /* highlights, hover, cursor */
  --clay:#e8b88a;         /* type on dark */
  --cream:#f4e4c1;        /* high-emphasis text, petals */
  --olive:#7a8c5e;        /* sole non-warm accent */
  --signal:#c4392f;       /* REC indicator, critical glitch */

  --vt:'VT323',monospace;
  --elite:'Special Elite',monospace;
  --mono:'JetBrains Mono',monospace;
  --hand:'Kalam',cursive;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--umber);
  color:var(--clay);
  font-family:var(--elite);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

img{display:block;max-width:100%;}

/* ---------- dust canvas ---------- */
#dust{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:2;
}

/* ---------- scanline overlays ---------- */
.scanlines{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0px,
    rgba(0,0,0,0.08) 1px,
    transparent 1px,
    transparent 3px
  );
}
.scanline-wide{
  position:fixed;left:0;right:0;
  height:4px;
  background:rgba(0,0,0,0.14);
  pointer-events:none;
  z-index:51;
  animation:drift 90s linear infinite;
}
@keyframes drift{
  0%{top:-4px;}
  100%{top:100%;}
}

/* ---------- page jitter (tape skip) ---------- */
.page-jitter{
  position:relative;z-index:5;
  transition:transform 40ms linear;
  will-change:transform;
}

/* ---------- channel indicator ---------- */
.channel-indicator{
  position:fixed;top:14px;right:18px;
  z-index:60;
  font-family:var(--vt);
  font-size:1.5rem;
  letter-spacing:0.05em;
  color:var(--phosphor);
  text-shadow:0 0 6px rgba(217,112,67,0.5);
  opacity:0.85;
}

/* ================= HERO ================= */
.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.4rem;
  padding:2.2rem 2.4rem 3rem;
  min-height:96vh;
  align-content:start;
}
.hero-frame{grid-column:1 / span 8;}
.upcoming{grid-column:9 / span 4;align-self:start;}

.crt-bezel{
  background:linear-gradient(160deg,#2a160f,#1c0e08);
  border:3px solid var(--terracotta);
  border-radius:26px;
  padding:18px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(217,112,67,0.2);
  position:relative;
  animation:bezel-jitter 7s steps(1) infinite;
}
@keyframes bezel-jitter{
  0%,96%{transform:translateX(0);}
  97%{transform:translateX(-1px);}
  98%{transform:translateX(1px);}
  99%{transform:translateX(0);}
}

.rec-strip{
  display:flex;align-items:center;gap:0.6rem;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--clay);
  padding:0 4px 10px;
}
.rec-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px var(--signal);
  animation:rec-blink 1.06s steps(1) infinite;
}
@keyframes rec-blink{0%,50%{opacity:1;}51%,100%{opacity:0.15;}}
.rec-label{color:var(--signal);letter-spacing:0.18em;}
.tx-meta{margin-left:auto;color:var(--phosphor);}

.hero-screen{
  position:relative;
  aspect-ratio:16/9;
  background:radial-gradient(ellipse at center,#3a2018 0%,#1a0d07 80%);
  border-radius:14px;
  overflow:hidden;
  box-shadow:inset 0 0 80px rgba(0,0,0,0.85);
}

.daisy-rgb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.rgb-layer{
  position:absolute;
  width:64%;height:auto;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  animation:slowzoom 22s ease-in-out infinite alternate;
}
.rgb-r{filter:brightness(1.3) sepia(1) hue-rotate(-25deg) saturate(5);animation:slowzoom 22s ease-in-out infinite alternate, rgb-r 8s ease-in-out infinite;}
.rgb-g{filter:brightness(1.1) sepia(1) hue-rotate(35deg) saturate(2);animation:slowzoom 22s ease-in-out infinite alternate, rgb-g 8s ease-in-out infinite;}
.rgb-b{filter:brightness(1.1);animation:slowzoom 22s ease-in-out infinite alternate;}
@keyframes slowzoom{0%{transform:translate(-50%,-50%) scale(1);}100%{transform:translate(-50%,-50%) scale(1.14);}}
@keyframes rgb-r{0%,100%{margin-left:0;}50%{margin-left:-2px;}}
@keyframes rgb-g{0%,100%{margin-left:0;}50%{margin-left:2px;}}

.hero-rollbar{
  position:absolute;left:0;right:0;height:60px;
  background:linear-gradient(to bottom,transparent,rgba(244,228,193,0.06) 45%,rgba(244,228,193,0.1) 50%,rgba(244,228,193,0.06) 55%,transparent);
  animation:rollbar 6.5s linear infinite;
  pointer-events:none;
}
@keyframes rollbar{0%{top:-60px;}100%{top:100%;}}

.hero-caption{
  position:absolute;left:18px;bottom:16px;
  display:flex;flex-direction:column;gap:2px;
  text-shadow:0 2px 6px rgba(0,0,0,0.8);
}
.now-broadcasting{
  font-family:var(--mono);font-size:0.7rem;
  letter-spacing:0.3em;color:var(--phosphor);
}
.hero-title{
  font-family:var(--vt);
  font-size:clamp(2.4rem,5.5vw,4.6rem);
  line-height:0.95;
  letter-spacing:0.05em;
  color:var(--cream);
}
.hero-sub{
  font-family:var(--elite);font-size:0.95rem;
  color:var(--clay);max-width:34ch;margin-top:4px;
}

.bezel-bottom{padding:12px 6px 2px;text-align:center;}
.bezel-text{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.16em;color:var(--terracotta);}

/* ---------- upcoming sidebar ---------- */
.upcoming-head{
  font-family:var(--vt);font-size:1.3rem;letter-spacing:0.08em;
  color:var(--phosphor);margin-bottom:0.8rem;
  border-bottom:1px dashed var(--terracotta);padding-bottom:0.3rem;
}
.upnext{
  display:flex;gap:0.8rem;align-items:center;
  background:var(--tape-leader);
  border:1px solid var(--terracotta);
  border-radius:4px;
  padding:0.6rem;margin-bottom:0.8rem;
  position:relative;
}
.upnext::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(to bottom,var(--olive) 0 5px,transparent 5px 10px);
}
.upnext-thumb{
  width:64px;height:64px;flex:none;
  background:var(--umber);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.upnext-thumb img{width:80%;height:auto;opacity:0.85;}
.upnext-meta{display:flex;flex-direction:column;}
.upnext-time{font-family:var(--mono);font-size:0.72rem;color:var(--phosphor);}
.upnext-name{font-family:var(--elite);font-size:0.92rem;color:var(--clay);}
.archivist-note{
  font-family:var(--hand);font-size:1.05rem;
  color:var(--clay);opacity:0.7;
  transform:rotate(-1.5deg);margin-top:0.6rem;padding-left:0.4rem;
}

/* ================= MANIFESTO ================= */
.manifesto-wrap{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.6rem;
  padding:4rem 2.4rem 4.5rem;
  position:relative;
}
.sprocket-strip{
  grid-column:1;
  position:absolute;left:1.4rem;top:4rem;bottom:4.5rem;width:18px;
  background:
    radial-gradient(circle at 9px 12px, var(--umber) 4px, transparent 5px) 0 0/18px 24px repeat-y,
    var(--tape-leader);
  border-left:1px solid var(--terracotta);
  border-right:1px solid var(--terracotta);
}
.manifesto-block{
  grid-column:2 / span 7;
  background:
    radial-gradient(circle at 4px 4px, rgba(166,75,42,0.18) 1.5px, transparent 2px) 0 0/14px 14px,
    var(--tape-leader);
  border:2px solid var(--terracotta);
  border-radius:2px;
  padding:2rem 2.2rem;
  position:relative;
  clip-path:polygon(0 0,100% 1.2%,99.5% 100%,0.5% 98.5%);
}
.manifesto-label{
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;
  color:var(--phosphor);display:block;margin-bottom:1.2rem;
  opacity:0.8;
}
.manifesto-text{
  font-family:var(--elite);
  font-size:1.15rem;line-height:1.85;
  color:var(--cream);
  white-space:pre-wrap;
  display:inline;
}
.manifesto-cursor{
  display:inline-block;
  font-family:var(--vt);
  color:var(--phosphor);
  font-size:1.1rem;
  vertical-align:baseline;
  animation:blink 530ms steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.manifesto-art{
  grid-column:9 / span 4;
  position:relative;
  min-height:340px;
  align-self:center;
}
.art-daisy{
  position:absolute;width:62%;height:auto;
  filter:sepia(0.7) saturate(2.4) hue-rotate(-12deg);
}
.art-chroma{top:0;left:0;transform:rotate(-7deg);opacity:0.9;animation:chroma-pulse 5.5s ease-in-out infinite;}
.art-tear{top:60px;left:30%;transform:rotate(4deg);clip-path:polygon(0 0,100% 0,100% 38%,0 44%,0 52%,100% 58%,100% 100%,0 100%);opacity:0.85;}
.art-drift{top:120px;left:8%;transform:rotate(-2deg);opacity:0.75;animation:art-rgb-drift 7s ease-in-out infinite;}
@keyframes chroma-pulse{0%,100%{filter:sepia(0.7) saturate(2.4) hue-rotate(-12deg) drop-shadow(2px 0 0 rgba(196,57,47,0.5)) drop-shadow(-2px 0 0 rgba(122,140,94,0.4));}50%{filter:sepia(0.7) saturate(2.4) hue-rotate(-12deg) drop-shadow(-3px 0 0 rgba(196,57,47,0.6)) drop-shadow(3px 0 0 rgba(122,140,94,0.5));}}
@keyframes art-rgb-drift{0%,100%{transform:rotate(-2deg) translateX(0);}50%{transform:rotate(-2deg) translateX(4px);}}
.art-caption{
  position:absolute;bottom:-2.2rem;left:0;right:0;
  font-family:var(--hand);font-size:1.05rem;
  color:var(--clay);opacity:0.7;transform:rotate(1deg);
  text-align:center;
}

/* ================= SCHEDULE / GRID ================= */
.schedule{padding:3rem 2.4rem 4.5rem;}
.schedule-head{
  font-family:var(--vt);font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:0.06em;color:var(--phosphor);
  margin-bottom:2rem;
  text-shadow:0 0 8px rgba(217,112,67,0.25);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:18px;
  grid-auto-flow:dense;
  gap:1.4rem;
}
.slot{
  background:var(--tape-leader);
  border:1px solid var(--terracotta);
  border-radius:3px;
  padding:1.2rem 1.3rem 1.4rem;
  grid-row:span var(--row-span,10);
  display:flex;flex-direction:column;gap:0.7rem;
  position:relative;
  overflow:hidden;
  animation:slot-jitter 9s steps(1) infinite;
}
@keyframes slot-jitter{0%,93%{transform:translateX(0);}94%{transform:translateX(-1px);}95%{transform:translateX(1px);}96%,100%{transform:translateX(0);}}
.slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,0.06) 2px 3px);
}
/* irregular column spans */
.s-a{grid-column:span 5;}
.s-b{grid-column:span 4;}
.s-c{grid-column:span 3;}
.s-d{grid-column:span 3;}
.s-e{grid-column:span 5;}
.s-f{grid-column:span 4;}
.s-g{grid-column:span 3;}
.s-h{grid-column:span 5;}
.s-i{grid-column:span 4;}
.s-j{grid-column:span 5;}
.s-k{grid-column:span 3;}
.s-l{grid-column:span 4;}

/* torn / staple variants */
.s-b{clip-path:polygon(0 0,100% 3%,100% 100%,0 97%);}
.s-e::before{content:"";position:absolute;top:8px;left:50%;width:14px;height:3px;background:var(--umber);transform:translateX(-50%) rotate(-12deg);box-shadow:14px 0 0 var(--umber);}
.s-h{clip-path:polygon(0 2%,100% 0,99% 100%,0.5% 98%);}
.s-j::before{content:"";position:absolute;top:8px;left:14px;width:12px;height:3px;background:var(--umber);transform:rotate(8deg);}

.slot-img{
  background:var(--umber);
  border-radius:2px;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex:none;
}
.slot-img img{width:70%;height:auto;opacity:0.88;filter:sepia(0.5) saturate(1.6) hue-rotate(-10deg);}
.s-a .slot-img img{animation:none;}
.slot-time{
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.06em;
  color:var(--phosphor);
}
.gen{color:var(--olive);}
.slot-title{
  font-family:var(--vt);font-size:1.6rem;letter-spacing:0.04em;
  color:var(--cream);line-height:1.05;
  position:relative;
  transition:text-shadow 400ms ease-out;
  cursor:default;
}
.slot-title:hover{
  text-shadow:-2px 0 0 rgba(196,57,47,0.85), 2px 0 0 rgba(122,140,94,0.8);
}
.slot-cap{
  font-family:var(--elite);font-size:0.96rem;line-height:1.7;
  color:var(--clay);
}
.slot-cap.tw-pending{visibility:hidden;}

/* dead air */
.slot.deadair{
  background:transparent;
  border:1px dashed rgba(166,75,42,0.45);
  display:flex;align-items:center;justify-content:center;
  animation:none;
}
.slot.deadair::after{display:none;}
.deadair-label{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.3em;
  color:var(--terracotta);opacity:0.55;text-transform:uppercase;
}

/* ================= FOOTER / SIGN-OFF ================= */
.signoff{
  padding:3.5rem 2.4rem 4rem;
  border-top:1px solid var(--terracotta);
  text-align:center;
}
.test-pattern{
  display:flex;
  height:120px;
  border:2px solid var(--terracotta);
  border-radius:3px;
  overflow:hidden;
  position:relative;
  margin-bottom:2.5rem;
}
.bar{flex:1;height:100%;}
.b1{background:var(--cream);}
.b2{background:var(--clay);}
.b3{background:var(--phosphor);}
.b4{background:var(--terracotta);}
.b5{background:var(--a64b2a,#a64b2a);background:#8a3d22;}
.b6{background:var(--tape-leader);}
.b7{background:var(--olive);}
.pattern-id{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(58,32,24,0.8);
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.18em;
  color:var(--cream);padding:0.4rem;
}

.signoff-daisy-wrap{display:flex;justify-content:center;margin-bottom:1.5rem;}
.footer-daisy{width:160px;height:auto;}
.fpetal{
  fill:var(--cream);
  stroke:var(--terracotta);stroke-width:1.5;
  transform-box:fill-box;
  transform-origin:center bottom;
}
.fpetal.falling{
  transition:transform 6s ease-in, opacity 6s linear;
  opacity:0;
}

.signoff-line{
  font-family:var(--vt);font-size:clamp(1.3rem,3vw,2rem);
  letter-spacing:0.05em;color:var(--phosphor);
  margin-bottom:1rem;
}
.signoff-foot{
  font-family:var(--elite);font-size:0.95rem;
  color:var(--clay);opacity:0.7;max-width:52ch;margin:0 auto;
}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .hero,.manifesto-wrap{grid-template-columns:1fr;}
  .hero-frame,.upcoming,.manifesto-block,.manifesto-art{grid-column:1;}
  .sprocket-strip{display:none;}
  .manifesto-block{clip-path:none;}
  .manifesto-art{min-height:280px;margin-top:2rem;}
  .grid{grid-template-columns:repeat(6,1fr);}
  .s-a,.s-e,.s-h,.s-j{grid-column:span 6;}
  .s-b,.s-f,.s-i,.s-l{grid-column:span 3;}
  .s-c,.s-d,.s-g,.s-k{grid-column:span 3;}
}
@media (max-width:560px){
  .hero,.manifesto-wrap,.schedule,.signoff{padding-left:1rem;padding-right:1rem;}
  .grid{grid-template-columns:1fr;}
  .grid .slot{grid-column:span 1 !important;}
  .channel-indicator{font-size:1.1rem;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;}
  .scanline-wide{display:none;}
}