/* judge.quest - Punk Courtroom Zine Aesthetic */
/* Colors: #1a1a1a #242429 #ff2d6a #00e5ff #e6ff00 #f0ece4 #8a8690 #ff4444 */

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

html{scroll-behavior:smooth}

body{
  background:#1a1a1a;
  color:#f0ece4;
  font-family:'Caveat',cursive;
  font-size:clamp(16px,2.5vw,22px);
  line-height:1.7;
  overflow-x:hidden;
}

/* Neon glow classes */
.neon-magenta{color:#ff2d6a;text-shadow:0 0 10px #ff2d6a80,0 0 30px #ff2d6a40}
.neon-cyan{color:#00e5ff;text-shadow:0 0 10px #00e5ff80,0 0 30px #00e5ff40}
.neon-yellow{color:#e6ff00;text-shadow:0 0 10px #e6ff0080,0 0 30px #e6ff0040}

/* Slide reveal animation */
.slide-reveal{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.slide-reveal.visible{
  clip-path:inset(0 0 0 0);
}

/* ===== ACT 1: THE DOCKET ===== */
.docket{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#1a1a1a;
}

.docket-stamps{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.docket-stamp{
  position:absolute;
  opacity:0.12;
}

.docket-stamp svg{
  width:100%;
  height:100%;
}

.docket-starburst{
  position:absolute;
  width:min(90vw,800px);
  height:min(90vw,800px);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  opacity:0.7;
}

.docket-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:40px clamp(16px,4vw,80px);
}

.docket-title{
  font-family:'Bungee Shade','Bungee',Impact,sans-serif;
  font-size:clamp(40px,10vw,120px);
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:1.1;
  margin-bottom:32px;
}

.docket-subtitle{
  font-family:'Caveat',cursive;
  font-size:clamp(18px,3vw,28px);
  font-weight:400;
  color:#f0ece4;
  max-width:600px;
  margin:0 auto 24px;
  line-height:1.6;
}

.docket-case-number{
  font-family:'VT323',monospace;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:#e6ff00;
  display:block;
  margin-top:16px;
}

.docket-curve{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:auto;
  z-index:1;
}

.flowing-curve path{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  transition:stroke-dashoffset 2s ease-out;
}
.flowing-curve.visible path{
  stroke-dashoffset:0;
}

/* ===== ACT 2: THE EVIDENCE WALL ===== */
.evidence-wall-section{
  padding:80px clamp(16px,4vw,80px) 60px;
  position:relative;
}

.section-heading{
  font-family:'Bungee Shade','Bungee',Impact,sans-serif;
  font-size:clamp(24px,5vw,64px);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:48px;
  padding-left:20px;
}

.evidence-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.evidence-card{
  background:#242429;
  padding:28px 24px 32px;
  position:relative;
  overflow:hidden;
}

.evidence-card:nth-child(4n+1){margin-top:16px}
.evidence-card:nth-child(4n+2){margin-top:-8px}
.evidence-card:nth-child(4n+3){margin-top:24px}
.evidence-card:nth-child(4n+4){margin-top:0px}

/* Hand-drawn SVG borders via border-image */
.evidence-card:nth-child(4n+1){
  border:2px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect x='2' y='2' width='96' height='96' rx='0' fill='none' stroke='%23ff2d6a' stroke-width='2' d='M2,3 Q25,1 50,3 Q75,5 98,2 Q100,25 98,50 Q96,75 98,98 Q75,96 50,98 Q25,100 2,98 Q0,75 2,50 Q4,25 2,3'/%3E%3C/svg%3E") 10 stretch;
}
.evidence-card:nth-child(4n+2){
  border:2px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M3,2 Q50,0 97,3 Q100,50 97,97 Q50,100 3,97 Q0,50 3,2' fill='none' stroke='%2300e5ff' stroke-width='2'/%3E%3C/svg%3E") 10 stretch;
}
.evidence-card:nth-child(4n+3){
  border:2px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M2,4 Q30,0 50,2 Q70,4 98,1 Q100,30 98,50 Q96,70 99,98 Q70,96 50,99 Q30,97 2,98 Q0,70 3,50 Q1,30 2,4' fill='none' stroke='%23e6ff00' stroke-width='2'/%3E%3C/svg%3E") 10 stretch;
}
.evidence-card:nth-child(4n+4){
  border:2px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M4,2 Q50,1 96,4 Q99,50 96,96 Q50,99 4,96 Q1,50 4,2' fill='none' stroke='%23ff4444' stroke-width='2'/%3E%3C/svg%3E") 10 stretch;
}

/* Cross-hatching texture on alternating cards */
.evidence-card:nth-child(odd){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0,16 L16,0 M-2,2 L2,-2 M14,18 L18,14' stroke='%238a869010' stroke-width='0.5'/%3E%3C/svg%3E");
  background-color:#242429;
}

.exhibit-label{
  font-family:'VT323',monospace;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:#e6ff00;
  display:block;
  margin-bottom:12px;
}

.card-content h3{
  font-family:'Bungee Shade','Bungee',Impact,sans-serif;
  font-size:clamp(16px,2vw,22px);
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#f0ece4;
  margin-bottom:10px;
  line-height:1.3;
}

.card-content p{
  font-family:'Caveat',cursive;
  color:#f0ece4;
  font-weight:400;
  line-height:1.7;
}

.card-icon{
  position:absolute;
  bottom:12px;
  right:12px;
  width:40px;
  height:40px;
  opacity:0.6;
}

.card-hand{
  width:24px;
  height:24px;
}

/* Stamp overlays */
.stamp-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  font-family:'Bungee Shade','Bungee',Impact,sans-serif;
  font-size:clamp(24px,4vw,42px);
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.15;
  pointer-events:none;
  white-space:nowrap;
  border:3px solid currentColor;
  padding:4px 16px;
  border-radius:4px;
}

.stamp-sustained{
  color:#ff2d6a;
  transform:translate(-50%,-50%) rotate(-8deg);
}

.stamp-overruled{
  color:#ff4444;
  transform:translate(-50%,-50%) rotate(5deg);
}

.stamp-redacted{
  color:#8a8690;
  transform:translate(-50%,-50%) rotate(-15deg);
  text-decoration:line-through;
}

/* ===== ACT 3: THE VERDICT SCROLL ===== */
.verdict-scroll{
  width:100vw;
  height:200px;
  overflow:hidden;
  position:relative;
  background:#1a1a1a;
  border-top:1px solid #ff2d6a30;
  border-bottom:1px solid #ff2d6a30;
}

.verdict-scroll-inner{
  display:flex;
  animation:marquee 30s linear infinite;
  width:max-content;
  height:100%;
  align-items:center;
}

.verdict-icons{
  width:2000px;
  height:120px;
  flex-shrink:0;
}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ===== ACT 4: THE CLOSING ARGUMENT ===== */
.closing-argument{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#1a1a1a;
}

.closing-curves{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

.pulse-curve{
  opacity:0.3;
  animation:pulse-opacity 4s ease-in-out infinite alternate;
}
.pulse-curve:nth-child(2){animation-delay:1.3s}
.pulse-curve:nth-child(3){animation-delay:2.6s}

@keyframes pulse-opacity{
  from{opacity:0.3}
  to{opacity:0.6}
}

.closing-content{
  position:relative;
  z-index:2;
  padding:60px clamp(16px,6vw,120px);
  max-width:900px;
}

.closing-content h2{
  font-family:'Bungee Shade','Bungee',Impact,sans-serif;
  font-size:clamp(32px,8vw,96px);
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:1.1;
  margin-bottom:40px;
}

.closing-text{
  font-family:'Caveat',cursive;
  font-size:clamp(22px,4vw,40px);
  font-weight:700;
  color:#f0ece4;
  line-height:1.5;
  margin-bottom:8px;
}

.closing-stamp{
  font-family:'Bungee Shade','Bungee',Impact,sans-serif;
  font-size:clamp(28px,6vw,72px);
  text-transform:uppercase;
  letter-spacing:0.08em;
  display:inline-block;
  margin-top:48px;
  border:4px solid #ff2d6a;
  padding:8px 32px;
  border-radius:4px;
  transform:rotate(-3deg);
}

.closing-gavel{
  position:absolute;
  bottom:40px;
  right:60px;
  width:120px;
  height:120px;
  z-index:2;
}

/* Responsive */
@media(max-width:600px){
  .evidence-wall{
    grid-template-columns:1fr;
  }
  .evidence-card:nth-child(n){
    margin-top:0;
  }
  .closing-gavel{
    width:80px;
    height:80px;
    bottom:20px;
    right:20px;
  }
}