/* pmt.report — Classified Occult Dossier */
/* Colors: #d4af37 gold, #8b6914 dark gold, #ff6b2b neon orange, #6b1a1a blood red */
/* Backgrounds: #050505, #0a0a0a, #111111, #1a1a1a */
/* Fonts: Josefin Sans (display), Space Mono (body) */

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

:root{
  --gold:#d4af37;
  --dark-gold:#8b6914;
  --neon:#ff6b2b;
  --blood:#6b1a1a;
  --bg-deep:#050505;
  --bg:#0a0a0a;
  --bg-card:#111111;
  --bg-surface:#1a1a1a;
  --parchment:#e8e0d4;
  --gold-light:#f0d080;
}

html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--dark-gold) var(--bg-deep);
}

body{
  background:var(--bg-deep);
  color:#c0a060;
  font-family:'Space Mono',monospace;
  font-size:14px;
  line-height:1.6;
  overflow-x:hidden;
  min-height:300vh;
}

/* Gold Dust Canvas */
.gold-dust{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
}

/* Neon Grid Background */
.neon-grid{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,107,43,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,107,43,0.03) 1px,transparent 1px);
  background-size:80px 80px;
  animation:gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse{
  0%,100%{opacity:0.3}
  50%{opacity:0.7}
}

/* ===== VAULT DOOR ===== */
.vault-door{
  position:relative;
  z-index:10;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at center,#111111 0%,#050505 70%);
  overflow:hidden;
}

.vault-ring{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.vault-ring-outer{
  width:min(80vw,500px);
  height:min(80vw,500px);
  animation:rotateClockwise 30s linear infinite;
}

.vault-ring-inner{
  width:min(55vw,350px);
  height:min(55vw,350px);
  animation:rotateCounter 20s linear infinite;
}

.ring-svg{
  width:100%;
  height:100%;
}

@keyframes rotateClockwise{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes rotateCounter{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}

.vault-monogram{
  position:relative;
  z-index:2;
  display:flex;
  gap:0.15em;
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:clamp(3rem,10vw,8rem);
  letter-spacing:0.3em;
  color:var(--gold-light);
  text-shadow:0 0 40px rgba(212,175,55,0.4),0 0 80px rgba(212,175,55,0.2);
  user-select:none;
}

.vault-subtitle{
  position:relative;
  z-index:2;
  margin-top:1rem;
  font-family:'Josefin Sans',sans-serif;
  font-weight:400;
  font-size:clamp(0.6rem,1.5vw,1rem);
  letter-spacing:0.5em;
  color:var(--dark-gold);
  text-transform:uppercase;
}

.vault-instruction{
  position:relative;
  z-index:2;
  margin-top:3rem;
  font-family:'Space Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.3em;
  color:var(--neon);
  animation:blink 2s ease-in-out infinite;
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0.2}
}

.redaction-stamp{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:clamp(4rem,12vw,10rem);
  letter-spacing:0.2em;
  color:transparent;
  -webkit-text-stroke:2px var(--blood);
  opacity:0;
  pointer-events:none;
  z-index:20;
  transition:opacity 0.8s ease;
}

.redaction-stamp.visible{
  opacity:0.15;
}

/* ===== ARCHIVE GRID ===== */
.archive-grid{
  position:relative;
  z-index:5;
  min-height:100vh;
  padding:4rem 2rem 6rem;
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1s ease,transform 1s ease;
}

.archive-grid.revealed{
  opacity:1;
  transform:translateY(0);
}

.archive-header{
  display:flex;
  align-items:center;
  gap:2rem;
  margin-bottom:4rem;
  padding:0 1rem;
}

.header-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--dark-gold),transparent);
}

.archive-title{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:clamp(0.7rem,1.5vw,1rem);
  letter-spacing:0.3em;
  color:var(--gold);
  white-space:nowrap;
  text-transform:uppercase;
}

/* Card Grid */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:2rem;
  max-width:1400px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.elastic-threads{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
}

/* Theory Cards */
.theory-card{
  position:relative;
  background:var(--bg-card);
  border:1px solid rgba(212,175,55,0.15);
  padding:2rem;
  cursor:pointer;
  transition:transform 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease;
  overflow:hidden;
}

.theory-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;
  transition:opacity 0.4s ease;
}

.theory-card:hover{
  transform:translateY(-4px);
  border-color:rgba(212,175,55,0.4);
  box-shadow:0 8px 40px rgba(212,175,55,0.1),0 0 1px var(--gold);
}

.theory-card:hover::before{
  opacity:1;
}

.card-stamp{
  position:absolute;
  top:1rem;right:1rem;
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:0.55rem;
  letter-spacing:0.2em;
  color:var(--blood);
  border:1px solid var(--blood);
  padding:0.15em 0.5em;
  transform:rotate(3deg);
  opacity:0.6;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
}

.card-id{
  font-family:'Space Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.15em;
  color:var(--neon);
}

.card-clearance{
  font-size:0.6rem;
  color:var(--dark-gold);
  letter-spacing:0.1em;
}

.card-sigil{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:1rem 0 1.5rem;
  height:100px;
}

.sigil-svg{
  width:100px;
  height:100px;
  transition:transform 0.6s ease;
}

.theory-card:hover .sigil-svg{
  transform:rotate(15deg) scale(1.05);
}

.card-title{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:0.15em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:0.75rem;
}

.card-excerpt{
  font-family:'Space Mono',monospace;
  font-size:0.75rem;
  line-height:1.7;
  color:rgba(192,160,96,0.6);
  margin-bottom:1.5rem;
}

.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1rem;
  border-top:1px solid rgba(212,175,55,0.1);
}

.card-date{
  font-family:'Space Mono',monospace;
  font-size:0.65rem;
  color:var(--dark-gold);
}

.card-status{
  font-family:'Space Mono',monospace;
  font-size:0.65rem;
  color:var(--neon);
  letter-spacing:0.1em;
}

/* Card reveal animation */
.theory-card{
  opacity:0;
  transform:translateY(30px);
}

.theory-card.visible{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.6s ease,transform 0.6s ease;
}

/* ===== FOOTER ===== */
.archive-footer{
  position:relative;
  z-index:5;
  text-align:center;
  padding:6rem 2rem 4rem;
  border-top:1px solid rgba(212,175,55,0.1);
}

.footer-sigil{
  display:flex;
  justify-content:center;
  margin-bottom:2rem;
}

.footer-sigil-svg{
  width:120px;
  height:120px;
  animation:rotateClockwise 40s linear infinite;
}

.footer-text{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.4em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:1rem;
}

.footer-sub{
  font-family:'Space Mono',monospace;
  font-size:0.65rem;
  color:rgba(192,160,96,0.4);
  max-width:500px;
  margin:0 auto 2rem;
  line-height:1.8;
}

.footer-line{
  width:60px;
  height:1px;
  background:var(--dark-gold);
  margin:0 auto 1.5rem;
}

.footer-copy{
  font-family:'Space Mono',monospace;
  font-size:0.6rem;
  color:rgba(192,160,96,0.3);
  letter-spacing:0.15em;
}

/* Accent uses: parchment #e8e0d4 for card hover text */
.theory-card:hover .card-excerpt{
  color:var(--parchment);
}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .card-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .archive-header{
    flex-direction:column;
    gap:0.5rem;
  }
  .header-line{
    width:60px;
  }
  .vault-monogram{
    font-size:3rem;
  }
}