/* news.css — owned by the news lane. The HOT TOPIC videotron: LED frame (zones/news.js), the screen (src/news.js). */

/* light from the screen pooling on the ground under the billboard */
.news-spill {
  pointer-events: none;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255, 170, 110, .20), rgba(196, 92, 150, .10) 45%, transparent 72%),
    radial-gradient(30% 30% at 50% 50%, rgba(255, 207, 110, .14), transparent 70%);
  mix-blend-mode: screen;
}
.news-frame { pointer-events: none; }

/* ---------- the screen ---------- */
.news {
  --np: 4px;
  overflow: hidden; background: #0b0e0d; isolation: isolate;
  font-family: var(--f-body); color: var(--paper);
  box-shadow: 0 0 0 1px #050605, 0 0 calc(var(--np) * 8) rgba(240, 138, 36, .28), 0 0 calc(var(--np) * 26) rgba(176, 70, 140, .22);
}
.news > * { position: absolute; }
.nw-set { inset: 0; z-index: 0; }
.nw-back { position: absolute; left: 0; top: 0; }

/* the studio video wall: the story's screenshot */
.nw-wall { z-index: 1; display: grid; place-items: center; overflow: hidden; background: #070605; text-decoration: none; }
.nw-shot { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(1.08) contrast(1.04); }
.nw-noshot { font: 600 calc(var(--np) * 3) / 1 var(--f-pixel); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.nw-wall-scan { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 18%, transparent 80%, rgba(0, 0, 0, .35)), linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 12%, transparent 88%, rgba(0, 0, 0, .3)); }
.news.cut .nw-wall { animation: nwCut .45s steps(5) both; }
@keyframes nwCut { 0% { filter: brightness(2.4) saturate(0); clip-path: inset(48% 0 48% 0); } 40% { filter: brightness(1.6); clip-path: inset(10% 0 10% 0); } 100% { filter: none; clip-path: inset(0); } }

.nw-drone { z-index: 2; animation: nwHover 2.6s ease-in-out infinite; }
@keyframes nwHover { 50% { transform: translateY(calc(var(--np) * -1.5)); } }
.nw-anchor { z-index: 2; }
.nw-kenji > canvas { position: absolute; left: 0; top: 0; }
.nw-k-shut { opacity: 0; animation: nwTalk 1.7s steps(1) infinite; }
@keyframes nwTalk { 0% { opacity: 0; } 14% { opacity: 1; } 24% { opacity: 0; } 38% { opacity: 1; } 46% { opacity: 0; } 70% { opacity: 1; } 84% { opacity: 0; } }
.nw-desk { z-index: 3; }
.nw-plate { z-index: 3; padding: calc(var(--np) * .5) calc(var(--np) * 1); background: #14100c; box-shadow: inset 0 0 0 1px #3a2c1f, 0 calc(var(--np) * .5) 0 #0b0d12; }

/* LED dots + seams over the whole set (the broadcast graphics sit on top, sharper) */
.nw-led { inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(3, 5, 4, .3) 72%, rgba(3, 5, 4, .5) 100%) 0 0 / var(--np) var(--np); }

/* ---------- broadcast graphics ---------- */
.nw-bug { z-index: 5; display: grid; justify-items: start; gap: calc(var(--np) * .5); }
.nw-hot { display: flex; align-items: center; gap: calc(var(--np) * 1); padding: calc(var(--np) * 1) calc(var(--np) * 1.75) calc(var(--np) * 1) calc(var(--np) * 1.25);
  background: linear-gradient(#ffb04a, #f08a24 55%, #d9701a); box-shadow: 0 0 calc(var(--np) * 3) rgba(240, 138, 36, .55), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.nw-hot-txt { display: block; }
.nw-flame { width: calc(var(--np) * 2.5); height: calc(var(--np) * 3); background: #19110a;
  clip-path: polygon(50% 0, 62% 22%, 80% 18%, 100% 55%, 88% 92%, 62% 100%, 38% 100%, 12% 92%, 0 60%, 18% 30%, 32% 42%); }
.nw-live-row { display: flex; align-items: stretch; font: 700 calc(var(--np) * 2.6) / 1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.nw-live-row > span { padding: calc(var(--np) * .8) calc(var(--np) * 1.2); }
.nw-live { display: flex; align-items: center; gap: calc(var(--np) * .8); background: #d8342b; color: #fff; }
.nw-saved-date { display: none; }
@media (max-width: 760px) { .nw-saved-date { display: inline; } }
.nw-live i { width: calc(var(--np) * 1.2); height: calc(var(--np) * 1.2); background: #fff; border-radius: 50%; animation: nwBlink 1.2s steps(1) infinite; }
@keyframes nwBlink { 50% { opacity: .15; } }
.nw-clock { background: rgba(8, 10, 9, .86); color: var(--paper); }
.nw-kicker { background: rgba(16, 42, 29, .86); color: var(--mint); font-family: var(--f-pixel); font-weight: 600; letter-spacing: .04em; text-transform: none; }

/* lower-third: the story's builder (after the set's KENJI NEO · CO-ANCHOR / HOST, BUILT AT KD strap) */
.nw-lt { z-index: 5; display: flex; align-items: center; gap: calc(var(--np) * 2); padding: 0 calc(var(--np) * 2) 0 calc(var(--np) * 1.5); text-decoration: none; color: inherit;
  background: linear-gradient(90deg, rgba(10, 12, 14, .96), rgba(16, 19, 24, .93) 70%, rgba(16, 19, 24, .78));
  border-top: 2px solid rgba(240, 138, 36, .9); box-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 calc(var(--np) * 1) calc(var(--np) * 3) rgba(0, 0, 0, .5); }
.nw-av { flex: none; width: var(--av); height: var(--av); padding: 2px; background: #f08a24; box-shadow: 0 0 0 2px #0b0d12, 0 0 calc(var(--np) * 2) rgba(240, 138, 36, .45); }
.nw-av canvas { display: block; width: 100%; height: 100%; }
.nw-lt-text { min-width: 0; display: grid; gap: calc(var(--np) * .6); }
.nw-lt-top { display: flex; align-items: baseline; gap: calc(var(--np) * 1.5); min-width: 0; }
.nw-name { font: 700 calc(var(--np) * 3.4) / 1 var(--f-pixel); color: #f08a24; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 calc(var(--np) * 1.5) rgba(240, 138, 36, .45); }
.nw-role { font: 500 calc(var(--np) * 2.3) / 1 var(--f-mono); color: #8f969c; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.nw-title { font: 600 calc(var(--np) * 4) / 1.05 var(--f-pixel); color: var(--paper); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-desc { font: 400 calc(var(--np) * 2.75) / 1.3 var(--f-body); color: #b9c1bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-lt:hover .nw-title, .nw-lt:focus-visible .nw-title { color: var(--green); }
.news.cut .nw-lt-text { animation: nwWipe .5s steps(6) both; }
@keyframes nwWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* votes + tags box over the desk front */
.nw-data { z-index: 6; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: calc(var(--np) * 2); row-gap: calc(var(--np) * 1.2);
  padding: calc(var(--np) * 1) calc(var(--np) * 2); background: rgba(10, 13, 11, .9); border-top: 2px solid var(--green); }
.nw-votes { display: flex; align-items: baseline; gap: calc(var(--np) * 1); color: var(--green); }
.nw-up { align-self: center; width: calc(var(--np) * 2.5); height: calc(var(--np) * 2); background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.nw-votes-n { font: 700 calc(var(--np) * 5) / 1 var(--f-mono); text-shadow: 0 0 calc(var(--np) * 2) rgba(123, 227, 107, .45); }
.nw-votes small { font: 600 calc(var(--np) * 2.3) / 1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--mint); }
.nw-dots { justify-self: end; align-self: center; display: flex; gap: calc(var(--np) * .8); padding: calc(var(--np) * .8); margin: 0; background: none; border: 0; cursor: pointer; }
.nw-dots i { width: calc(var(--np) * 1.4); height: calc(var(--np) * 1.4); background: rgba(247, 248, 242, .25); }
.nw-dots i.on { background: var(--green); box-shadow: 0 0 calc(var(--np) * 1.5) rgba(123, 227, 107, .7); }
.nw-dots { position: relative; }
.nw-dots::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.nw-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: calc(var(--np) * 1); overflow: hidden; max-height: calc(var(--np) * 4.4); }
.nw-tag { font: 500 calc(var(--np) * 2.4) / 1 var(--f-mono); color: #c9d2cb; padding: calc(var(--np) * .6) calc(var(--np) * 1); border: 1px solid #3a4a3f; background: rgba(33, 78, 54, .35); white-space: nowrap; }

/* BARU MASUK · JUST JOINED crawl */
.nw-crawl { z-index: 5; display: flex; align-items: stretch; background: #070908; border-top: 2px solid var(--mint); }
.nw-crawl-label { flex: none; display: flex; align-items: center; padding: 0 calc(var(--np) * 2); background: var(--mint); color: var(--ink); font: 700 calc(var(--np) * 2.8) / 1 var(--f-pixel); letter-spacing: .04em; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--np) * 1.5) 100%, 0 100%); padding-right: calc(var(--np) * 3); }
.nw-crawl-win { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.nw-crawl-track { display: flex; white-space: nowrap; animation: nwCrawl var(--dur, 20s) linear infinite; }
.nw-crawl-copy { display: flex; flex: none; }
.nw-crawl-item { display: inline-flex; align-items: center; gap: calc(var(--np) * 1.2); padding: 0 calc(var(--np) * 3) 0 calc(var(--np) * 2); font: 600 calc(var(--np) * 3) / 1 var(--f-mono); color: var(--paper); }
.nw-crawl-item i { width: calc(var(--np) * 1.4); height: calc(var(--np) * 1.4); background: var(--green); transform: rotate(45deg); }
@keyframes nwCrawl { to { transform: translateX(-50%); } }

/* glass: scanlines, a slow refresh band, edge vignette, glare */
.nw-glass { inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .07) 0 14%, transparent 26%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 calc(var(--np) * 6) rgba(0, 0, 0, .55); }
.nw-glass::after { content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 16%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .045), transparent); animation: nwRoll 7s linear infinite; }
@keyframes nwRoll { to { transform: translateY(800%); } }

/* ---------- phones: portrait set ---------- */
.news.tall .nw-lt { align-items: center; }
.news.tall .nw-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news.tall .nw-data { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; padding-block: 0; align-items: center; }
.news.tall .nw-tags { grid-column: auto; max-height: calc(var(--np) * 3.6); }
.news.tall .nw-kicker { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nw-crawl-track { animation: none; }
  .nw-glass::after { display: none; }
}