* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y mandatory; }
body {
  font-family:'Syne', sans-serif;
  background:#05050a;
  color:#f0eee8;
  overflow-x:hidden;
  cursor:none;
}

/* ── CUSTOM CURSOR ── */
.cursor-dot {
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:#fff; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%); transition:background 0.2s;
  mix-blend-mode:difference;
}
.cursor-ring {
  position:fixed; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.4); pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%); transition:width 0.3s, height 0.3s, border-color 0.3s;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px;
  background:rgba(5,5,10,0.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(168,85,247,0.1);
}
.nav-logo {
  font-family:'DM Mono', monospace; font-size:17px;
  color:#0affb2; text-decoration:none; letter-spacing:0.05em;
}
.nav-back {
  font-family:'DM Mono', monospace; font-size:11px;
  color:rgba(240,238,232,0.45); text-decoration:none;
  letter-spacing:0.12em; text-transform:uppercase;
  transition:color 0.2s;
  display:flex; align-items:center; gap:8px;
}
.nav-back:hover { color:#f0eee8; }
.nav-back::before { content:'←'; }

/* ════════════════════════════════════
   MAGAZINE HERO
   ════════════════════════════════════ */
.mag-hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  position:relative; overflow:hidden;
  padding:120px 48px 80px;
  scroll-snap-align:start;
}
.mag-hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(168,85,247,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,0.03) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.mag-hero-scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(168,85,247,0.012) 2px, rgba(168,85,247,0.012) 3px
  );
}
.mag-hero-glow {
  position:absolute; width:1000px; height:1000px; border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,0.18) 0%, transparent 50%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.mag-hero-glow2 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(10,255,178,0.06) 0%, transparent 60%);
  bottom:10%; left:15%; pointer-events:none;
}
.mag-hero-badge {
  position:relative; z-index:2;
  font-family:'DM Mono', monospace; font-size:10px;
  color:#c084fc; letter-spacing:0.35em; text-transform:uppercase;
  margin-bottom:40px;
  display:flex; align-items:center; gap:16px;
}
.mag-hero-badge::before, .mag-hero-badge::after {
  content:''; width:48px; height:1px; background:rgba(168,85,247,0.5);
}
.mag-hero-title {
  position:relative; z-index:2;
  font-family:'Black Ops One', sans-serif;
  font-size:clamp(80px,12vw,180px);
  line-height:0.82; letter-spacing:-0.03em;
  margin-bottom:36px;
}
.mag-hero-title .neon {
  color:#c084fc;
  text-shadow:
    0 0 30px rgba(168,85,247,0.8),
    0 0 80px rgba(168,85,247,0.4),
    0 0 160px rgba(168,85,247,0.15);
  animation:neonFlicker 4s ease-in-out infinite;
}
@keyframes neonFlicker {
  0%,93%,100% { opacity:1; }
  94% { opacity:0.85; }
  96% { opacity:1; }
  97% { opacity:0.9; }
}
.mag-hero-sub {
  position:relative; z-index:2;
  font-size:16px; color:rgba(255,255,255,0.35);
  max-width:540px; line-height:1.85;
  margin-bottom:48px;
}
.mag-hero-terminal {
  position:relative; z-index:2;
  font-family:'DM Mono', monospace; font-size:12px;
  color:rgba(168,85,247,0.5);
  display:flex; flex-direction:column; gap:4px;
  text-align:left;
  background:rgba(168,85,247,0.04);
  border:1px solid rgba(168,85,247,0.12);
  padding:20px 28px;
  max-width:420px;
}
.mag-hero-terminal .prompt { color:#0affb2; }
.mag-hero-terminal .typing {
  color:rgba(255,255,255,0.5);
  border-right:2px solid #c084fc;
  animation:blink 1s step-end infinite;
  display:inline;
  padding-right:4px;
}
@keyframes blink { 50% { border-color:transparent; } }

/* ════════════════════════════════════
   ISSUE SECTION — SPLIT LAYOUT
   Cover left, info right
   ════════════════════════════════════ */
.issue {
  min-height:100vh;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  position:relative; overflow:hidden;
  padding:80px;
}
.issue-bg {
  position:absolute; inset:0; pointer-events:none;
}
.issue-glow {
  position:absolute; width:1200px; height:1200px; border-radius:50%;
  background:radial-gradient(circle, var(--issue-glow, rgba(168,85,247,0.1)) 0%, transparent 50%);
  top:50%; left:25%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.issue-glow2 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, var(--issue-glow2, rgba(236,72,153,0.06)) 0%, transparent 60%);
  bottom:10%; right:5%; pointer-events:none;
}
.issue-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 3px
  );
}
.issue-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--issue-grid, rgba(168,85,247,0.02)) 1px, transparent 1px),
    linear-gradient(90deg, var(--issue-grid, rgba(168,85,247,0.02)) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}

/* ── COVER (LEFT) ── */
.issue-cover-side {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding-right:48px;
}
.issue-cover {
  width:420px; height:580px;
  border:1px solid var(--issue-accent, rgba(168,85,247,0.3));
  background:rgba(0,0,0,0.6);
  position:relative; overflow:hidden;
  transition:all 0.5s cubic-bezier(0.23,1,0.32,1);
  flex-shrink:0;
}
.issue-cover:hover {
  transform:perspective(1000px) rotateY(-6deg) rotateX(3deg) translateY(-12px) scale(1.02);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.9),
    0 0 80px -15px var(--issue-glow, rgba(168,85,247,0.35)),
    0 0 0 1px var(--issue-accent, rgba(168,85,247,0.5)),
    20px 20px 60px -10px var(--issue-glow, rgba(168,85,247,0.15));
  border-color:var(--issue-accent, rgba(168,85,247,0.7));
}

/* Cover internals */
.cover-noise {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 1px,
    rgba(255,255,255,0.01) 1px, rgba(255,255,255,0.01) 2px
  );
  z-index:3;
}
.cover-scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 4px,
    rgba(168,85,247,0.015) 4px, rgba(168,85,247,0.015) 5px
  );
  mix-blend-mode:screen;
}
.cover-vignette {
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.cover-glow-orb {
  position:absolute; width:300%; height:300%;
  top:-100%; left:-100%;
  background:conic-gradient(from 220deg, transparent 30%, var(--issue-glow, rgba(168,85,247,0.06)) 40%, transparent 50%, rgba(10,255,178,0.03) 60%, transparent 70%);
  animation:orbSpin 20s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes orbSpin { to { transform:rotate(360deg); } }
.cover-glitch-bar {
  position:absolute; left:0; right:0; height:2px;
  background:var(--issue-accent, #c084fc);
  opacity:0; z-index:6; pointer-events:none;
  animation:glitchBar 6s ease-in-out infinite;
}
@keyframes glitchBar {
  0%,89%,100% { opacity:0; top:20%; }
  90% { opacity:0.6; top:20%; }
  91% { opacity:0; top:20%; }
  93% { opacity:0.4; top:55%; }
  94% { opacity:0; top:55%; }
  96% { opacity:0.7; top:78%; }
  97% { opacity:0; top:78%; }
}

/* Cover layout elements */
.cover-inner {
  position:absolute; inset:0; z-index:7;
  display:flex; flex-direction:column;
  padding:40px 36px;
}
.cover-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:auto;
}
.cover-brand {
  font-family:'DM Mono', monospace; font-size:9px;
  color:var(--issue-accent, rgba(168,85,247,0.6));
  letter-spacing:0.35em; text-transform:uppercase;
}
.cover-issue-num {
  font-family:'DM Mono', monospace; font-size:9px;
  color:rgba(255,255,255,0.2); letter-spacing:0.2em;
}
.cover-center {
  display:flex; flex-direction:column;
  align-items:flex-start;
  margin-bottom:auto;
  padding-top:40px;
}
.cover-big-num {
  font-family:'Black Ops One', sans-serif;
  font-size:160px; line-height:0.75;
  color:var(--issue-accent, rgba(168,85,247,0.08));
  margin-bottom:20px;
  text-shadow:0 0 60px var(--issue-glow, rgba(168,85,247,0.15));
}
.cover-title-main {
  font-family:'Black Ops One', sans-serif;
  font-size:52px; line-height:0.9;
  color:#fff;
  text-shadow:
    0 0 30px var(--issue-glow, rgba(168,85,247,0.4)),
    0 0 80px var(--issue-glow, rgba(168,85,247,0.15));
  margin-bottom:16px;
}
.cover-title-accent {
  color:var(--issue-accent, #c084fc);
}
.cover-subtitle {
  font-family:'DM Mono', monospace; font-size:10px;
  color:rgba(255,255,255,0.3); letter-spacing:0.15em;
  line-height:1.7; max-width:280px;
}
.cover-bottom {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px;
}
.cover-date {
  font-family:'DM Mono', monospace; font-size:10px;
  color:rgba(255,255,255,0.2); letter-spacing:0.2em;
  text-transform:uppercase;
}
.cover-topics {
  display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end;
  max-width:200px;
}
.cover-topic-pill {
  font-family:'DM Mono', monospace; font-size:7px;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:2px 8px;
  border:1px solid var(--issue-accent, rgba(168,85,247,0.2));
  color:var(--issue-accent, rgba(168,85,247,0.5));
}
/* Decorative corner brackets on cover */
.cover-corner {
  position:absolute; z-index:8; pointer-events:none;
  width:20px; height:20px;
  border-color:var(--issue-accent, rgba(168,85,247,0.3));
  border-style:solid; border-width:0;
}
.cover-corner.tl { top:16px; left:16px; border-top-width:1px; border-left-width:1px; }
.cover-corner.tr { top:16px; right:16px; border-top-width:1px; border-right-width:1px; }
.cover-corner.bl { bottom:16px; left:16px; border-bottom-width:1px; border-left-width:1px; }
.cover-corner.br { bottom:16px; right:16px; border-bottom-width:1px; border-right-width:1px; }

/* Cover hover states */
.issue-cover:hover .cover-big-num {
  text-shadow:0 0 80px var(--issue-glow, rgba(168,85,247,0.35));
}
.issue-cover:hover .cover-title-main {
  text-shadow:
    0 0 40px var(--issue-glow, rgba(168,85,247,0.6)),
    0 0 100px var(--issue-glow, rgba(168,85,247,0.25));
}
.issue-cover:hover .cover-corner { border-color:var(--issue-accent, rgba(168,85,247,0.6)); }

/* ── INFO (RIGHT) ── */
.issue-info {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  padding-left:24px;
}
.issue-number {
  font-family:'DM Mono', monospace; font-size:11px;
  color:var(--issue-accent, #c084fc);
  letter-spacing:0.35em; text-transform:uppercase;
  margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
.issue-number::before {
  content:''; width:32px; height:1px;
  background:var(--issue-accent, #c084fc); opacity:0.5;
}
.issue-title {
  font-family:'Black Ops One', sans-serif;
  font-size:clamp(56px,6vw,100px);
  line-height:0.88; letter-spacing:-0.01em;
  margin-bottom:8px; color:#fff;
  text-shadow:
    0 0 50px var(--issue-glow, rgba(168,85,247,0.4)),
    0 0 100px var(--issue-glow, rgba(168,85,247,0.15));
}
.issue-title .accent {
  color:var(--issue-accent, #c084fc);
}
.issue-date {
  font-family:'DM Mono', monospace; font-size:12px;
  color:rgba(255,255,255,0.25); letter-spacing:0.2em;
  text-transform:uppercase; margin-bottom:32px;
}
.issue-desc {
  font-size:15px; color:rgba(255,255,255,0.4);
  line-height:1.9; margin-bottom:36px;
  max-width:480px;
}
.issue-topics {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:40px;
}
.issue-topic {
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:0.15em; text-transform:uppercase;
  padding:6px 16px;
  border:1px solid var(--issue-accent, rgba(168,85,247,0.25));
  color:var(--issue-accent, #c084fc);
  background:color-mix(in srgb, var(--issue-accent, #a855f7) 6%, transparent);
  transition:all 0.2s;
}
.issue-topic:hover {
  background:color-mix(in srgb, var(--issue-accent, #a855f7) 15%, transparent);
  border-color:var(--issue-accent, rgba(168,85,247,0.5));
  transform:translateY(-2px);
}
.issue-status {
  font-family:'DM Mono', monospace; font-size:12px;
  letter-spacing:0.2em; text-transform:uppercase;
  padding:14px 36px;
  border:1px solid var(--issue-accent, rgba(168,85,247,0.35));
  color:var(--issue-accent, #c084fc);
  background:color-mix(in srgb, var(--issue-accent, #a855f7) 8%, transparent);
  transition:all 0.3s cubic-bezier(0.23,1,0.32,1);
  display:inline-flex; align-self:flex-start;
}
.issue-status:hover {
  background:color-mix(in srgb, var(--issue-accent, #a855f7) 20%, transparent);
  transform:translateY(-4px);
  box-shadow:
    0 12px 32px -6px var(--issue-glow, rgba(168,85,247,0.4)),
    0 0 0 1px var(--issue-accent, rgba(168,85,247,0.4));
}

/* Terminal-style teaser */
.issue-terminal {
  margin-top:36px;
  font-family:'DM Mono', monospace; font-size:11px;
  color:rgba(255,255,255,0.2);
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.06);
  padding:16px 20px;
  max-width:400px;
  line-height:1.8;
}
.issue-terminal .cmd { color:#0affb2; }
.issue-terminal .out { color:rgba(255,255,255,0.3); }
.issue-terminal .hl { color:var(--issue-accent, #c084fc); }

/* ── SCROLL INDICATOR ── */
.scroll-hint {
  position:fixed; bottom:32px; left:50%;
  transform:translateX(-50%);
  font-family:'DM Mono', monospace; font-size:9px;
  color:rgba(255,255,255,0.15); letter-spacing:0.2em;
  text-transform:uppercase;
  z-index:100;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:hintPulse 2s ease-in-out infinite;
}
.scroll-hint-arrow {
  width:1px; height:24px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
}
@keyframes hintPulse {
  0%,100% { opacity:0.4; } 50% { opacity:1; }
}

/* ── FOOTER ── */
.mag-footer {
  padding:48px 80px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:space-between;
  background:#000;
}
.mag-footer-brand {
  font-family:'DM Mono', monospace; font-size:14px; color:#a855f7;
}
.mag-footer-copy {
  font-family:'DM Mono', monospace; font-size:10px;
  color:rgba(255,255,255,0.2); letter-spacing:0.1em;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.15s; }
.reveal-delay-2 { transition-delay:0.3s; }
.reveal-delay-3 { transition-delay:0.45s; }
.reveal-delay-4 { transition-delay:0.6s; }
.reveal-delay-5 { transition-delay:0.75s; }

::-webkit-scrollbar { height:4px; width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  nav { padding:16px 24px; }
  .mag-hero { padding:100px 24px 60px; }
  .issue {
    grid-template-columns:1fr;
    padding:100px 24px 80px;
    gap:48px;
  }
  .issue-cover-side { padding-right:0; justify-content:center; }
  .issue-cover { width:320px; height:440px; }
  .cover-big-num { font-size:100px; }
  .cover-title-main { font-size:36px; }
  .issue-info { padding-left:0; align-items:center; text-align:center; }
  .issue-topics { justify-content:center; }
  .issue-status { align-self:center; }
  .issue-terminal { text-align:left; }
  .mag-footer { padding:32px 24px; flex-direction:column; gap:16px; text-align:center; }
}
@media(max-width:600px) {
  .issue-cover { width:260px; height:360px; }
  .cover-big-num { font-size:72px; }
  .cover-title-main { font-size:28px; }
  .cover-inner { padding:24px 20px; }
}
