/* Root theme with two accents */
:root{
  --bg-1:#0f1419;
  --bg-2:#1a2027;
  --bg-3:#0d1117;
  --text:#ffffff;
  --muted:#8892b0;
  --accent:#00ffc8;        /* Primary teal */
  --accent-2:#ffc24b;      /* Secondary amber */
  --accent-3:#ff6496;      /* Pink used sparingly */
  --border: rgba(0,255,200,0.2);
  --radius:8px;
  --shadow-1:0 8px 32px rgba(0,0,0,0.6);
  --shadow-2:0 20px 80px rgba(0,0,0,0.8);
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Helvetica Neue','Arial',sans-serif;
  background:linear-gradient(145deg,var(--bg-1) 0%,var(--bg-2) 50%,var(--bg-3) 100%);
  color:var(--text);
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* Subtle grid and ambient */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(0,255,200,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,200,0.02) 1px,transparent 1px);
  background-size:40px 40px;
  animation:subtleGridMove 40s linear infinite;
}
@keyframes subtleGridMove{0%{transform:translate(0,0)}100%{transform:translate(40px,40px)}}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,255,200,0.03) 0%, transparent 70%);
}

/* Sidebar */
.sidebar{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:1000;opacity:.9;transition:transform .2s ease,opacity .2s ease}
.sidebar:hover{opacity:1;transform:translateY(-50%) translateX(6px)}
.sidebar-btn{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;margin-bottom:16px;
  background:linear-gradient(145deg,#1e2328 0%,#2a3038 100%);
  border:1px solid var(--border);border-radius:6px;color:var(--accent);
  text-decoration:none;font-size:22px;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;
  position:relative;box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.sidebar-btn:hover{
  border-color:rgba(0,255,200,0.5);
  box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 16px rgba(0,255,200,.18), inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(-2px);
}

/* Main */
.main-content{max-width:1400px;margin:0 auto;padding:40px 40px 40px 140px}
.header-banner{
  background:linear-gradient(90deg,#1a2027 0%,#2a3038 50%,#1a2027 100%);
  color:var(--accent);padding:16px 32px;margin-bottom:32px;text-align:center;
  font:600 14px/1 'Homenaje',sans-serif;letter-spacing:4px;text-transform:uppercase;
  border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.header-banner::before{
  content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(0,255,200,.08),transparent);
  animation:bannerSweep 4.5s ease-in-out infinite;
}
@keyframes bannerSweep{0%{left:-100%}50%{left:100%}100%{left:100%}}

.post-container{
  background:linear-gradient(145deg, rgba(26,32,39,.95) 0%, rgba(30,35,40,.98) 100%);
  border:1px solid rgba(0,255,200,.14);
  border-radius:var(--radius);
  padding:48px;margin-bottom:32px;
  box-shadow:var(--shadow-2),0 0 32px rgba(0,255,200,.05);
  position:relative;overflow:hidden;backdrop-filter:blur(8px);
}
.post-container::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:topScan 6s ease-in-out infinite;
}
@keyframes topScan{0%,100%{opacity:.25}50%{opacity:.7}}

.post-title{
  font-size:3rem;font-weight:300;margin-bottom:16px;
  font-family:'Helvetica Neue',sans-serif;letter-spacing:8px;text-transform:uppercase;
  color:var(--accent);
  position:relative;text-align:center;text-shadow:0 0 18px rgba(0,255,200,.22);min-height:1.2em;
}
.post-title::after{
  content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.typewriter-cursor{display:inline-block;background-color:var(--accent);width:3px;animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.post-meta{
  color:var(--accent-2);
  margin:24px 0 24px;font-size:.95em;text-transform:uppercase;letter-spacing:3px;font-weight:400;font-family:'Homenaje',sans-serif;text-align:center
}
.post-description{
  margin-bottom:24px;line-height:1.75;
  color:var(--accent);
  font-size:1.05em;text-align:center;max-width:900px;margin-left:auto;margin-right:auto;letter-spacing:.4px;font-family:'Homenaje',sans-serif
}

.access-granted{opacity:0;transition:opacity .35s ease}
.access-granted.revealed{opacity:1}

/* Category chip */
.post-category{
  display:inline-block;background:linear-gradient(145deg, rgba(255,194,75,0.15) 0%, rgba(255,194,75,0.22) 100%);
  color:var(--accent-2);padding:10px 18px;border:1px solid rgba(255,194,75,.45);
  border-radius:4px;font-size:.8em;margin-right:16px;box-shadow:0 4px 16px rgba(255,194,75,.12), inset 0 1px 0 rgba(255,255,255,.05);
  text-transform:uppercase;letter-spacing:2px;font-weight:500;font-family:'Aldrich',sans-serif;
}

/* Image */
.post-image{
  width:100%;height:auto;border:2px solid rgba(0,255,200,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 24px rgba(0,255,200,.1);
  margin:28px 0;cursor:pointer;transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  filter:contrast(1.06) brightness(1.03);
}
.post-image:hover{
  box-shadow:0 22px 70px rgba(0,0,0,.85),0 0 40px rgba(0,255,200,.18);
  transform:translateY(-3px) scale(1.005);
  border-color:rgba(0,255,200,.34);
}

/* Nav controls */
.nav-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:36px 0;max-width:100%}
.nav-btn{
  background:linear-gradient(145deg, rgba(26,32,39,.9) 0%, rgba(35,42,52,.9) 100%);
  border:1px solid rgba(0,255,200,.18);
  color:var(--accent);padding:14px 24px;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:600;
  font-family:'Orbitron',sans-serif;text-transform:uppercase;letter-spacing:2px;transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease;
  text-decoration:none;display:inline-block;min-width:120px;text-align:center;position:relative;box-shadow:0 8px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);backdrop-filter:blur(6px);
}
.nav-btn:hover{border-color:rgba(0,255,200,.45);box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 16px rgba(0,255,200,.18), inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(-1px);color:#fff}
.nav-btn:active{transform:none}
.nav-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* Category nav uses pink accent lightly */
.category-nav{display:flex;gap:10px;align-items:center}
.category-nav .nav-btn.category-btn{
  background:linear-gradient(145deg, rgba(255,100,150,.14) 0%, rgba(255,100,150,.20) 100%);
  border:1px solid rgba(255,100,150,.42);
  color:var(--accent-3);
  min-width:140px;box-shadow:0 8px 28px rgba(255,100,150,.10), inset 0 1px 0 rgba(255,255,255,.03);
}
.category-nav .nav-btn.category-btn:hover{
  background:linear-gradient(145deg, rgba(255,100,150,.20) 0%, rgba(255,100,150,.26) 100%);
  border-color:rgba(255,100,150,.62);
  box-shadow:0 12px 40px rgba(255,100,150,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
}

/* Modals */
.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(15,20,25,.98);backdrop-filter:blur(20px);overflow-y:auto;overflow-x:hidden}
.modal-content{display:block;margin:0 auto;border:2px solid rgba(0,255,200,.28);box-shadow:0 0 70px rgba(0,255,200,.18),0 20px 70px rgba(0,0,0,.75);max-width:none;height:auto}
.close{
  position:absolute;top:24px;right:36px;color:var(--accent);font-size:44px;font-weight:200;cursor:pointer;z-index:2001;transition:transform .12s ease, color .18s ease, text-shadow .18s ease;
  text-shadow:0 0 16px rgba(0,255,200,.42);background:transparent;border:0;
}
.close:hover{color:#fff;text-shadow:0 0 24px rgba(0,255,200,.7);transform:scale(1.06)}

/* Archive */
.archive-container{
  background:linear-gradient(145deg, rgba(26,32,39,.98) 0%, rgba(30,35,40,.98) 100%);
  border:1px solid rgba(0,255,200,.2);padding:48px;border-radius:var(--radius);margin:48px;max-height:85%;
  overflow-y:auto;box-shadow:0 20px 80px rgba(0,0,0,.9),0 0 50px rgba(0,255,200,.1);backdrop-filter:blur(18px);
}
.archive-title{
  margin-bottom:28px;text-align:center;color:var(--text);text-transform:uppercase;letter-spacing:6px;
  font-family:'Helvetica Neue',sans-serif;font-weight:200;font-size:2rem;text-shadow:0 0 16px rgba(0,255,200,.22);
}
.archive-category-title{
  color:var(--accent);margin-bottom:20px;text-transform:uppercase;font-size:1.05em;letter-spacing:3px;font-weight:400;font-family:'Aldrich',sans-serif;border-bottom:1px solid rgba(0,255,200,.3);padding-bottom:12px;
}
.archive-item{
  background:linear-gradient(145deg, rgba(35,42,52,.6), rgba(45,55,68,.6));
  border:1px solid rgba(0,255,200,.14);padding:20px;border-radius:6px;cursor:pointer;transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 8px 28px rgba(0,0,0,.4);backdrop-filter:blur(8px);
}
.archive-item:hover{
  background:linear-gradient(145deg, rgba(45,55,68,.78), rgba(55,65,80,.78));
  border-color:rgba(0,255,200,.28);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 16px rgba(0,255,200,.12);
  transform:translateY(-2px);
}
.archive-item img{width:100%;height:140px;object-fit:cover;border-radius:6px;border:1px solid rgba(0,255,200,.2);margin-bottom:12px;filter:contrast(1.06) brightness(1.03)}
.archive-item-title{font-size:1em;font-weight:500;color:var(--text);text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}
.archive-item-date{font-size:.8em;color:var(--muted);font-weight:400;font-family:'Homenaje',sans-serif;letter-spacing:1px}

/* Responsive */
@media (max-width: 768px){
  .main-content{padding:30px 30px 30px 30px}
  .sidebar{left:15px}
  .sidebar-btn{width:50px;height:50px}
  .post-title{font-size:2.2rem;letter-spacing:4px}
  .nav-controls{gap:8px}
  .nav-btn{padding:12px 16px;font-size:.82em;min-width:100px}
}

/* HUD panel */
.hud-panel {
  position: absolute;
  left: 100px;
  transform: translateY(-50%) translateX(-20px);
  width: auto;
  min-width: 220px;
  max-width: 300px;
  background: rgba(15,20,25,0.95);
  border: 1px solid rgba(0,255,200,0.5);
  color: #00ffc8;
  font-family: 'Orbitron', sans-serif;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 95% 15%, 95% 85%, 100% 100%, 0 100%);
  box-shadow: 0 0 30px rgba(0,255,200,0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1500;
}

.hud-header {
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(0,255,200,0.3);
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.hud-loader {
  margin-top: 10px;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    #00ffc8,
    #00ffc8 10px,
    transparent 10px,
    transparent 20px
  );
  animation: hudMove 2s linear infinite;
}
@keyframes hudMove {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

.hud-panel.active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}