body {
  background-color: #1B1C1E;
  color: #FAF7F2;
  font-family: 'Inter', sans-serif;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* Background Layers */

.bg-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}

.bg-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(45px) brightness(0.85);
  opacity: 0;
  transition: opacity 3s ease;
}

.bg-layer.active {
  opacity: 0.8;
}

/* Soothing Sunrise to Beach Progression */

.bg-layer[data-index="0"] { 
  background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470');
}

.bg-layer[data-index="1"] { 
  background-image: url('https://images.unsplash.com/photo-1493666438817-866a91353ca9'); /* warm interior sunlight */
}

.bg-layer[data-index="2"] { 
  background-image: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee'); /* gentle afternoon sky */
}

.bg-layer[data-index="3"] { 
  background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e'); /* soft golden clouds */
}

.bg-layer[data-index="4"] { 
  background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e'); /* calm ocean */
}

.bg-layer[data-index="5"] { 
  background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e'); /* bright beach horizon */
}

/* Vignette */

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 70%, rgba(0,0,0,0.25) 100%);
  z-index: -2;
  transition: opacity 2s ease;
}
/* Ambient Grain */

.grain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.05;
  animation: grainMove 40s linear infinite;
  z-index: -1;
}

@keyframes grainMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(-10%,10%); }
}

/* Panels */

.panel {
  height: 100vh;
  scroll-snap-align: start;
  opacity: 0.3;
  transform: translateY(60px);
  transition: opacity 1.8s ease, transform 1.8s ease;
}

.panel.active {
  opacity: 1;
  transform: translateY(0);
}

/* Typography */

.display-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.6rem;
}

.poetic {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  line-height: 2.8rem;
}

.lead-text {
  color: #E6C27A;
}

.vault-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  line-height: 3rem;
}

/* Button */

.btn-vault {
  background: transparent;
  border: 1px solid #D6A85F;
  color: #F6F2EA;
  padding: 1rem 3rem;
  letter-spacing: 2px;
  transition: all 0.5s ease;
}

.btn-vault:hover {
  background: #D6A85F;
  color: #101112;
}

/* Navigation */

.nav-dots {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.4s ease;
}

.dot.active {
  height: 22px;
  background: #D6A85F;
  border-radius: 12px;
}