:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #f8fafc;
  --acc: #3b82f6;
  --glass: rgba(15, 23, 42, 0.6);
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 2rem;
  margin: 0;
  line-height: 1.5;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
}

.header p {
  color: #94a3b8;
  font-size: 1.2rem;
}

.gallery-layout {
  display: grid;
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto;
}

.slider-wrapper h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #cbd5e1;
  font-weight: 400;
}

.slider-container {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.slide {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  color: #fff;
}

.slide .text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.slide .text p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.8;
}

/* 1. Snap X */
.snap-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.snap-x::-webkit-scrollbar { display: none; }
.snap-x .slide { scroll-snap-align: center; }

/* 2. Fade */
.fade .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  visibility: hidden;
}
.fade .slide.active { opacity: 1; visibility: visible; }

/* 3. Accordion */
.accordion { display: flex; }
.accordion .slide { flex: 1; transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; }
.accordion .slide:hover { flex: 4; }
.accordion .slide .text { opacity: 0; transition: 0.3s; transform: translateY(20px); }
.accordion .slide:hover .text { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }

/* 4. Snap Y */
.snap-y {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.snap-y::-webkit-scrollbar { display: none; }
.snap-y .slide { scroll-snap-align: start; }

/* 5. Split */
.split { display: flex; background: #000; }
.split-text {
  flex: 1.5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: #0f172a;
}
.split-text-item {
  position: absolute;
  opacity: 0;
  transition: all 0.6s ease;
  transform: translateY(20px);
  text-align: left;
  left: 3rem;
  right: 3rem;
}
.split-text-item.active { opacity: 1; transform: translateY(0); z-index: 2; }
.split-text-item h3 { font-size: 2.5rem; color: var(--acc); margin-bottom: 0.5rem; margin-top:0; }
.split-text-item p { font-size: 1.2rem; color: #cbd5e1; }
.split-images { flex: 1; position: relative; overflow: hidden; }
.split-images img {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}
.split-images img.active { opacity: 1; z-index: 2; }

/* 6. Continuous Marquee */
.marquee .slide { width: 50vw; max-width: 500px; }
.marquee-wrapper {
  display: flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
  height: 100%;
}
.marquee-wrapper:hover { animation-play-state: paused; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 7. Thumbs */
.thumbs { display: flex; flex-direction: column; }
.thumbs-main { flex: 1; position: relative; }
.thumbs-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s;
}
.thumbs-main img.active { opacity: 1; }
.thumbs-row { display: flex; height: 100px; background: #000; }
.thumbs-row img {
  flex: 1;
  object-fit: cover;
  opacity: 0.4;
  cursor: pointer;
  transition: 0.3s;
  padding: 2px;
}
.thumbs-row img:hover, .thumbs-row img.active { opacity: 1; }

/* 8. Cards */
.cards {
  overflow: visible;
  background: transparent;
  box-shadow: none;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cards .slide {
  position: absolute;
  width: 80%;
  height: 90%;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  cursor: pointer;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cards .slide.c-1 { z-index: 3; transform: translateY(0) scale(1); }
.cards .slide.c-2 { z-index: 2; transform: translateY(-20px) scale(0.9); opacity: 0.8; }
.cards .slide.c-3 { z-index: 1; transform: translateY(-40px) scale(0.8); opacity: 0.4; }

/* 9. Reveal */
.reveal .slide {
  position: absolute;
  inset: 0;
  transition: 0.5s;
  overflow: hidden;
}
.reveal .slide img {
  filter: grayscale(100%) brightness(0.4);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;
  transform: scale(1.1);
}
.reveal:hover .slide img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1);
}
.reveal .text {
  transform: translateY(100%);
  transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent);
}
.reveal:hover .text { transform: translateY(0); }
.reveal-desc {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  opacity: 1;
  transition: 0.4s;
  font-size: 1.5rem;
  font-weight: 300;
  pointer-events: none;
}
.reveal:hover .reveal-desc { opacity: 0; transform: translateY(-100%); }

/* 10. Ken Burns */
.ken-burns .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1s ease;
}
.ken-burns .slide.active { opacity: 1; }
.ken-burns .slide img {
  transform: scale(1);
  transform-origin: center;
}
.ken-burns .slide.active img { animation: kenburns 8s ease-out forwards; }
@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}