/* ========================= GLOBAL ========================= */ 

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

body { 


  background: black; 
  color: rgb(150, 150, 150); 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: clamp(1rem, 1.2vw, 1.25rem); 
  overflow: hidden; 


  letter-spacing: 0.08em;
  word-spacing: 0.2em;
  line-height: 1.6;
  font-weight: 300;

} 
  
  /* ========================= TYPOGRAPHY ========================= */ 
  h1 { 
  font-family: 'Times New Roman', Times, serif; 
  font-size: clamp(2.5rem, 5vw, 5rem); 
  text-decoration: line-through; 
  text-align: center; margin-bottom: 2rem; 
}

.circle {
  display: inline-flex;
  width: 60px;
  height: 24px;
  border: 0.8px solid rgb(255, 255, 255);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}


p.normal {
  transform: rotate(calc((var(--r) - 0.5) * 5deg))
             translateX(calc((var(--x) - 0.5) * 10px))
             translateY(calc((var(--y) - 0.5) * 6px));
}

p.reverse {
  transform: rotate(calc((var(--r) - 0.5) * -5deg))
             translateX(calc((var(--x) - 0.5) * 10px))
             translateY(calc((var(--y) - 0.5) * 6px));
}

p {
  opacity: calc(0.4 + (var(--o)));
  filter: blur(calc((var(--b) - 0.5) * 1.5px));
}


/* ========================= LAYOUT ========================= */ 

section { 
  display: flex; 
  flex-direction: row; 
  width: 100%; 
  height: 100vh; 
} 

/* ========================= DVD SPINES ========================= */ 

.card { 
  position: relative; 
  width: 4.9vw; 
  min-width: 60px; 
  height: 100vh; 
  overflow: hidden; 
  cursor: pointer; 
  outline: none; 
  transition: width 2s ease; 

} 

/* expanded card */ 

.card:focus-within { 
  width: 50vw; 
} 

/* ========================= IMAGES ========================= */ 

.card img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: opacity 0.6s ease; 
} 

.card:focus-within img { 
  opacity: 0;
 } 
 
 /* ========================= CONTENT ========================= */ 
 
 .content { 
  position: absolute; 
  inset: 0; 
  display: flex; 
  flex-direction: column; 

  justify-content: left;
  align-items: left;
  text-align: left;
  padding: 5vw; 

  overflow-y: auto; 
  opacity: 0; 
  transition: opacity 0.6s ease; 
  scrollbar-width: none; 

} 

.content::-webkit-scrollbar { 
  display: none; 

} 

.card:focus-within .content {
  
  opacity: 1; 
} 

.content p { 
  max-width: 75ch; 
} 

/* ========================= ENTRIES ========================= */ 

.entry { 
  position: relative; 
  margin: 2rem 0; 

} 

/* ========================= SUMMARY ========================= */ 

summary { 
  
  cursor: pointer; 
  color: white; 
  transition: color 0.3s ease; 

  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: left;
} 

summary::-webkit-details-marker { 
  display: none; 
} 

.entry:hover summary {
  color: #ffe8b3; 
} 

/* ========================= THOUGHT POPUPS ========================= */ 

.thought { 
  position: fixed; 
  width: min(700px, 80vw); 
  padding: 2rem; 
  color: white; 
  font-family: 'Times New Roman', Times, serif;
  justify-content: right;

  font-style: italic; 
  font-size: clamp(1rem, 1.4vw, 1.4rem); 
  line-height: 1; 
  opacity: 0; 

  pointer-events: none; 
  z-index: 9999; 
  transition: opacity 1.5s ease,

  transform 0.5s ease;
  transform: translateY(20px); 
} 

/* show popup on hover */ 
.entry:hover .thought { 
  opacity: 1; 
  transform: translateY(0); 
} 

/* dark overlay */ 
.entry:hover::before { 
  content: ""; 
  position: fixed; 
  inset: 0; 
  background: rgba(52, 52, 52, 0.4); /* keep it slightly dark */
  backdrop-filter: blur(8px);
  
  z-index: 999; 
  pointer-events: none;
  
} 


/* ========================= RANDOM POSITIONS ========================= */ 

.pos1 { top: 15%; left: 10%; } 
.pos2 { top: 50%; left: 20%; } 
.pos3 { top: 30%; left: 50%; } 
.pos4 { top: 60%; left: 55%; } 
.pos5 { top: 80%; left: 10%; }