/* --- GLOBAL SETTINGS --- */
:root {
  --primary-color: #f4e4d8; /* Porcelain skin tone */
  --accent-color: #8a3324; /* Dried blood / Brick red */
  --dark-bg: #1a1512; /* Dark soot */
  --text-color: #2e2622;
  --font-header: 'Cinzel Decorative', cursive; /* Gothic/Victorian look */
  --font-body: 'Special Elite', monospace; /* Typewriter look */
}

body {
  background-color: var(--dark-bg);
  /* Replace this URL with your large image */
  background-image: url('https://i.pinimg.com/736x/aa/4d/44/aa4d44eff1877e9bf4ff7dab9c087019.jpg'); 
  
  /* THIS IS THE MAGIC PART: */
  background-size: cover;       /* Forces the image to cover the whole screen */
  background-repeat: no-repeat; /* Stops it from repeating/tiling */
  background-position: center;  /* Centers the image so the main part is visible */
  background-attachment: fixed; /* Keeps the background still while you scroll */
  
  color: var(--text-color);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  cursor: crosshair;
}

/* --- ATMOSPHERE LAYERS --- */
/* This creates a vignette (dark corners) */
.vignette {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  box-shadow: inset 0 0 150px rgba(0,0,0,0.9);
  pointer-events: none;
  z-index: 0;
}

/* This creates a spooky fog animation */
.fog-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png') repeat-x;
  background-size: 200% auto;
  opacity: 0.3;
  animation: fogMove 60s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes fogMove {
  0% { background-position: 0 0; }
  100% { background-position: -200% 0; }
}

/* --- FLOATING DECORATIONS --- */
.draggable-decor {
  position: absolute;
  z-index: 10; /* Above the background, below the text */
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.7));
}

#cage {
  top: -50px;
  left: 5%;
  width: 150px;
  animation: swing 4s ease-in-out infinite alternate;
}

#gear-cluster {
  top: 10%;
  right: -50px;
  width: 300px;
  opacity: 0.8;
}

/* Decoration Animations */
.spin-slow {
  animation: spin 20s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes swing { 
  0% { transform: rotate(3deg); } 
  100% { transform: rotate(-3deg); } 
}

/* TEAR DROPS ANIMATION (Moonstones) */
.tear-drop {
  position: fixed;
  background: radial-gradient(circle at 30% 30%, #fff, #aecbe3);
  border-radius: 50%;
  box-shadow: 0 0 10px #fff;
  opacity: 0.6;
  pointer-events: none;
  z-index: 5;
  animation: floatUp 10s linear infinite;
}

.t1 { width: 10px; height: 10px; bottom: -20px; left: 20%; animation-delay: 0s; }
.t2 { width: 15px; height: 15px; bottom: -20px; left: 70%; animation-delay: 3s; }
.t3 { width: 8px; height: 8px; bottom: -20px; left: 50%; animation-delay: 6s; }

@keyframes floatUp {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

/* --- MAIN LAYOUT --- */
.main-stage {
  position: relative;
  z-index: 20;
  max-width: 900px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: 200px 1fr; /* Sidebar is 200px, content fills the rest */
  gap: 20px;
  align-items: start;
}

/* HEADER STYLES */
header {
  grid-column: 1 / -1; /* Spans across the whole top */
  text-align: center;
  margin-bottom: 40px;
}

h1 {
  font-family: var(--font-header);
  font-size: 4em;
  color: var(--primary-color);
  text-shadow: 0 0 10px #fff, 4px 4px 0px #000;
  margin: 0;
}

.shaking-text:hover {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.subtitle {
  font-family: var(--font-body);
  color: #aecbe3; /* Icy blue */
  font-size: 1.2em;
  letter-spacing: 2px;
}

/* NAVIGATION (Scattered tags) */
.scattered-nav {
  position: absolute; /* Take it out of the grid flow */
  width: 100%;
  height: 100px;
  top: 120px;
  pointer-events: none; /* Let clicks pass through empty spaces */
}

.nav-item {
  position: absolute;
  pointer-events: auto;
  font-family: var(--font-header);
  font-size: 1.5em;
  text-decoration: none;
  color: var(--accent-color);
  background: var(--primary-color);
  padding: 5px 15px;
  border: 1px dashed #000;
  transform: rotate(-5deg);
  transition: 0.3s;
  box-shadow: 3px 3px 0 #000;
}

.nav-item:hover {
  transform: scale(1.1) rotate(0deg);
  background: #fff;
  z-index: 50;
}

/* Positioning the links manually to look "scattered" */
.item-1 { left: 10%; top: 0; }
.item-2 { right: 20%; top: 20px; transform: rotate(5deg); }
.item-3 { left: 30%; top: 60px; transform: rotate(2deg); }
.item-4 { right: 5%; top: 80px; transform: rotate(-10deg); }

/* MAIN CONTENT AREA */
#content-display {
  grid-column: 2; /* Sits on the right */
  background-color: rgba(244, 228, 216, 0.9); /* See-through paper color */
  padding: 30px;
  /* Complex border styling to look like a frame */
  border: 15px solid transparent;
  border-image: url('https://i.imgur.com/v2J1w5o.png') 30 stretch; /* Generic frame placeholder */
  /* Fallback border if image fails */
  outline: 2px solid #5e4b35; 
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  min-height: 500px;
}

.scroll-box {
  height: 100%;
  overflow-y: auto;
  font-family: var(--font-body);
  line-height: 1.6;
}

h2 {
  font-family: var(--font-header);
  border-bottom: 2px solid var(--accent-color);
  color: var(--accent-color);
}

.fancy-line {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  margin: 20px 0;
}

/* SIDEBAR (Paper Note) */
.paper-note {
  grid-column: 1; /* Sits on the left */
  background: #fff;
  padding: 15px;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  font-family: var(--font-body);
  text-align: center;
  position: sticky;
  top: 50px;
}

.paper-note:before {
  /* Adds a "tape" look */
  content: "";
  position: absolute;
  top: -15px;
  left: 30%;
  width: 40%;
  height: 30px;
  background: rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}

/* FOOTER */
footer {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 50px;
  color: #555;
  font-family: var(--font-body);
  font-size: 0.8em;
  padding-bottom: 20px;
}

/* SCROLLBAR STYLING (Webkit only) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1512; }
::-webkit-scrollbar-thumb { background: #8a3324; border: 1px solid #f4e4d8; }

/* --- ADD THIS TO THE VERY BOTTOM --- */
.scatter-item {
  position: absolute; 
  z-index: 50;        
  pointer-events: none; 
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.7)); 
}

.scatter-link {
  position: absolute;
  z-index: 60; /* Higher than scatter-item so you can always click it */
  transition: transform 0.2s ease;
}

.scatter-link:hover {
  transform: scale(1.1) rotate(5deg);
  cursor: pointer;
}