/* ===========================================================
   THEME · NEON — Barlow Condensed + DM Mono, cyan/pink glow
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,700;0,900;1,700&family=DM+Mono:wght@400;500&display=swap');

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

:root {
  --bg:#080910; --bg2:#0d0e14; --neon:#00ffe0; --neon2:#ff3cac; --neon3:#ffd447;
  --text:#eaeaf5; --muted:#5a5a7a; --border:rgba(255,255,255,.07);
  --glow:0 0 18px rgba(0,255,224,.45); --glow2:0 0 18px rgba(255,60,172,.5);
}

html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text); font-family:'DM Mono',monospace;
  min-height:100vh; overflow-x:hidden; cursor:none;
}

/* Custom cursor */
#cursor {
  display:block; width:14px; height:14px; border:2px solid var(--neon); border-radius:50%;
  position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .18s,height .18s,background .18s,border-color .18s; mix-blend-mode:screen;
}
#cursor.hover { width:42px; height:42px; background:rgba(0,255,224,.12); border-color:var(--neon2); box-shadow:var(--glow2); }

/* Noise overlay */
body::after {
  content:''; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* Header */
header {
  padding:2.4rem 4rem 1.8rem; display:flex; align-items:flex-end; gap:2rem;
  border-bottom:1px solid var(--border); position:relative; flex-wrap:wrap;
}
header::before { content:''; position:absolute; bottom:-1px; left:4rem; width:120px; height:2px; background:var(--neon); box-shadow:var(--glow); }
.header-main { display:flex; align-items:center; gap:1rem; }
.header-icon {
  width:42px; height:42px; border:1px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.header-icon svg { fill:var(--neon); }
.header-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(2.6rem,6vw,4.5rem); line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.header-title span { font-style:italic; color:transparent; -webkit-text-stroke:2px var(--neon2); }

.view-switch { display:flex; gap:.5rem; align-items:center; }
.view-switch .vs-label { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-right:.4rem; }
.view-switch a {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text); text-decoration:none;
  border:1px solid var(--border); padding:.35rem .9rem; border-radius:999px;
  transition:color .2s,border-color .2s,box-shadow .2s,background .2s;
}
.view-switch a:hover { color:var(--neon); border-color:var(--neon); box-shadow:var(--glow); background:rgba(0,255,224,.06); }
.view-switch a.active { color:var(--bg); background:var(--neon); border-color:var(--neon); box-shadow:var(--glow); }

.header-count {
  margin-left:auto; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:2.4rem;
  color:var(--neon3); text-shadow:0 0 20px rgba(255,212,71,.5); line-height:1;
}

main { padding:3rem 4rem 5rem; }

/* Filter bar */
.filter-bar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border:1px solid rgba(0,255,224,.25); background:rgba(0,255,224,.04); border-radius:6px;
  padding:.8rem 1.2rem; margin-bottom:2.2rem; font-size:.78rem; letter-spacing:.06em; color:var(--muted);
}
.filter-bar strong { color:var(--neon); text-shadow:var(--glow); font-weight:500; }
.filter-clear {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--neon); text-decoration:none; border:1px solid var(--border); padding:.3rem .8rem; border-radius:999px;
  transition:box-shadow .2s,border-color .2s,background .2s;
}
.filter-clear:hover { border-color:var(--neon); box-shadow:var(--glow); background:rgba(0,255,224,.06); }

/* Block */
.block { margin-bottom:3.2rem; }
.block-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.block-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.9rem;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}
.block-count {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9rem; color:var(--neon);
  border:1px solid rgba(0,255,224,.3); padding:.05rem .55rem; border-radius:999px; text-shadow:var(--glow);
}
.copy-link {
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--border); padding:.32rem .85rem; border-radius:999px;
  cursor:none; transition:color .18s,border-color .18s,box-shadow .18s,background .18s;
}
.copy-link svg { fill:currentColor; }
.copy-link:hover { color:var(--neon); border-color:var(--neon); box-shadow:var(--glow); }
.copy-link.copied { color:var(--neon2); border-color:var(--neon2); box-shadow:var(--glow2); }

/* Grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2px; }

.card {
  position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--bg2); cursor:none;
  opacity:0; transform:translateY(22px); animation:revealCard .5s ease forwards;
}
.card:nth-child(1){animation-delay:.05s}  .card:nth-child(2){animation-delay:.11s}
.card:nth-child(3){animation-delay:.16s}  .card:nth-child(4){animation-delay:.22s}
.card:nth-child(5){animation-delay:.27s}  .card:nth-child(6){animation-delay:.33s}
.card:nth-child(7){animation-delay:.38s}  .card:nth-child(8){animation-delay:.44s}
.card:nth-child(9){animation-delay:.49s}  .card:nth-child(10){animation-delay:.55s}
.card:nth-child(11){animation-delay:.60s} .card:nth-child(12){animation-delay:.66s}
@keyframes revealCard { to { opacity:1; transform:translateY(0); } }

.thumb { position:absolute; inset:0; }
.thumb-img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.6) saturate(.8); transition:transform .5s cubic-bezier(.16,1,.3,1),filter .4s; }
.card:hover .thumb-img { transform:scale(1.07); filter:brightness(.75) saturate(1.1); }
.thumb-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0d0e1a 0%,#131420 100%); }
.thumb-fallback svg { fill:var(--neon); opacity:.12; }

/* scanlines */
.card::before {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);
}
.card:hover::before { opacity:1; }
/* neon border */
.card::after {
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1.5px solid transparent; transition:border-color .3s,box-shadow .3s;
}
.card:hover::after { border-color:var(--neon); box-shadow:inset 0 0 30px rgba(0,255,224,.08),var(--glow); }

.thumb-overlay {
  position:absolute; inset:0; z-index:4;
  background:linear-gradient(to top,rgba(8,9,16,.97) 0%,rgba(8,9,16,.4) 45%,transparent 100%);
  transition:background .3s;
}
.card:hover .thumb-overlay { background:linear-gradient(to top,rgba(8,9,16,.98) 0%,rgba(8,9,16,.55) 50%,rgba(0,255,224,.04) 100%); }

.play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7); z-index:5;
  display:flex; align-items:center; gap:.5rem;
  background:rgba(0,255,224,.1); border:1px solid var(--neon); border-radius:999px;
  padding:.5rem 1.1rem .5rem .8rem; opacity:0; backdrop-filter:blur(6px); box-shadow:var(--glow); white-space:nowrap;
  transition:opacity .25s,transform .25s;
}
.play svg { fill:var(--neon); flex-shrink:0; width:14px; height:14px; }
.play-label {
  display:inline; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--neon);
}
.card:hover .play { opacity:1; transform:translate(-50%,-50%) scale(1); }

.card-body { position:absolute; left:0; right:0; bottom:0; z-index:5; padding:1.2rem 1.1rem 1rem; }
.card-index {
  display:block; font-size:.6rem; letter-spacing:.2em; color:var(--neon); text-shadow:var(--glow);
  margin-bottom:.3rem; opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s;
}
.card:hover .card-index { opacity:1; transform:translateY(0); }
.card-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s;
}
.card:hover .card-title { color:var(--neon); text-shadow:var(--glow); }

/* Modal */
#modal {
  display:none; position:fixed; inset:0; z-index:600; background:rgba(4,5,10,.88);
  backdrop-filter:blur(16px) saturate(.5); align-items:center; justify-content:center;
  padding:2rem; animation:fadeIn .2s; cursor:none;
}
#modal.open { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-box { width:min(96vw,1020px); animation:popIn .35s cubic-bezier(.16,1,.3,1); }
@keyframes popIn { from{transform:scale(.9) translateY(24px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

.modal-head { display:flex; align-items:center; gap:1rem; margin-bottom:.6rem; }
.modal-tag {
  display:inline-block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon); text-shadow:var(--glow); background:rgba(0,255,224,.07);
  border:1px solid rgba(0,255,224,.25); padding:.22rem .7rem; border-radius:4px; flex-shrink:0;
}
.modal-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.6rem;
  text-transform:uppercase; letter-spacing:.04em; color:#fff; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.close-btn {
  width:38px; height:38px; background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:6px; cursor:none; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:1rem; transition:background .18s,border-color .18s,color .18s; flex-shrink:0;
}
.close-btn:hover { background:rgba(255,60,172,.15); border-color:var(--neon2); color:var(--neon2); box-shadow:var(--glow2); }

.video-wrap {
  position:relative; aspect-ratio:16/9; background:#000; border:1px solid rgba(0,255,224,.2);
  box-shadow:0 0 60px rgba(0,255,224,.08),0 0 0 1px rgba(255,255,255,.04);
}
.video-wrap video { width:100%; height:100%; display:block; }
.video-wrap::before, .video-wrap::after {
  content:''; position:absolute; width:22px; height:22px; border-color:var(--neon); border-style:solid;
  box-shadow:var(--glow); z-index:2; pointer-events:none;
}
.video-wrap::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.video-wrap::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

.modal-foot { margin-top:.65rem; display:flex; align-items:center; justify-content:space-between; }
.esc-hint { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.speed-control { display:flex; align-items:center; gap:.4rem; }
.speed-label { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-right:.15rem; }
.speed-btn {
  font-family:'DM Mono',monospace; font-size:.68rem; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:4px;
  padding:.18rem .5rem; cursor:none; transition:color .18s,border-color .18s,background .18s,box-shadow .18s;
}
.speed-btn:hover { color:var(--neon); border-color:var(--neon); }
.speed-btn.active { color:var(--bg); background:var(--neon); border-color:var(--neon); box-shadow:var(--glow); }
kbd { border:1px solid var(--muted); border-radius:4px; padding:.1rem .45rem; font-family:inherit; font-size:.62rem; color:var(--muted); }

/* Empty */
.empty { text-align:center; padding:7rem 2rem; }
.empty-icon { display:none; }
.empty h2 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:4rem; text-transform:uppercase; color:var(--neon); text-shadow:var(--glow); margin-bottom:.5rem; }
.empty p { color:var(--muted); font-size:.85rem; }

/* Toast */
#toast {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--neon); color:var(--bg); font-size:.85rem; padding:.55rem 1.2rem; border-radius:999px;
  opacity:0; pointer-events:none; box-shadow:var(--glow); transition:opacity .25s,transform .25s; z-index:1200;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:640px){
  body { cursor:auto; }
  #cursor { display:none; }
  header { padding:2rem 1.5rem 1.5rem; }
  .header-title { font-size:3rem; }
  main { padding:2rem 1rem 4rem; }
  .grid { gap:1px; }
}