:root {
  --navy: #0d1117;
  --cream: #fdf6ec;
  --terracotta: #e07b39;
  --rose: #d4a5a5;
  --dark: #080810;
}

body {
  background-color: var(--navy);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Custom Cat Cursor */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23fdf6ec" stroke="%230d1117" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7 .58 9.38C21.8 14.27 22 15.92 22 17c0 2.2-2.2 4-5 4H7c-2.8 0-5-1.8-5-4 0-1.08.2-2.73 1-4.62 1-2.38-.82-8.8.58-9.38 1.39-.58 4.65.26 6.42 2.26C10.65 5.09 11.33 5 12 5z"></path></svg>') 16 16, auto;
}

/* Ensure interactive elements use a pointer cursor that fits the theme */
a, button, input[type="submit"], input[type="reset"], .cursor-pointer {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23e07b39" stroke="%230d1117" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7 .58 9.38C21.8 14.27 22 15.92 22 17c0 2.2-2.2 4-5 4H7c-2.8 0-5-1.8-5-4 0-1.08.2-2.73 1-4.62 1-2.38-.82-8.8.58-9.38 1.39-.58 4.65.26 6.42 2.26C10.65 5.09 11.33 5 12 5z"></path></svg>') 16 16, pointer;
}

/* Lenis recommended CSS */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* First-letter Drop Cap for Intro */
.drop-cap::first-letter {
  font-size: 5rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  padding-right: 1rem;
  padding-top: 0.5rem;
  color: var(--terracotta);
  font-family: 'Playfair Display', serif;
}

/* Marquee Animation */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}
.marquee-content {
  display: flex;
  flex-shrink: 0;
  animation: marquee 35s infinite linear;
}
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Panel Stack */
.panel-stack-container {
  position: relative;
  /* Add height dynamically or let items stack */
}
.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  will-change: transform;
}

/* Masonry Layout */
.masonry-grid {
  column-count: 3;
  column-gap: 2rem;
}
@media (max-width: 1024px) {
  .masonry-grid {
    column-count: 2;
  }
}
@media (max-width: 768px) {
  .masonry-grid {
    column-count: 1;
  }
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Image default overrides */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Horizontal Filmstrip */
.filmstrip-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}
.filmstrip-slide {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
}

/* Utility to hide horizontal scrollbar if needed */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Performance Optimizations */
.timeline-entry {
  will-change: transform, opacity;
  transform: translateZ(0); /* Hardware acceleration */
}

.panel-img {
  will-change: transform;
}

.panel-text {
  will-change: transform;
}

.clip-path-curtain {
  clip-path: inset(50% 0);
  will-change: clip-path;
  transform: translateZ(0);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}