/* ============================================
   HERO — video background
   ============================================ */
.gallery-hero {
  position: relative;
  /* Full 100vh (not calc(100vh - nav height)) — shrinking this to fit
     below the sticky nav made object-fit:cover crop more aggressively
     off the bottom of the video. Full height needs a small scroll to see
     the very bottom of the hero, traded off here for the full frame. */
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-dark);
}

.gallery-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the crop to the top of the frame — object-fit:cover's default
     center anchor crops evenly from top and bottom, but this shot's sky
     and the top of the pagoda read as the "cut off" part since there's
     more expendable footage (ground/steps) at the bottom to sacrifice
     instead. */
  object-position: center top;
}

.gallery-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 33, 29, 0.45) 0%,
    rgba(22, 33, 29, 0.25) 45%,
    rgba(22, 33, 29, 0.65) 100%
  );
}

.gallery-hero-title {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  font-family: var(--font-avenir);
  font-weight: 900;
  color: #ffffff;
  /* Matches the blog hero headline's scale (blog.css's --blog-heading-fs) —
     gallery.css doesn't load blog.css, so the clamp is inlined here rather
     than referenced, since that custom property is scoped to .blog-hero-heading. */
  font-size: clamp(2.5rem, 8.5vw, 7rem);
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
  opacity: 0;
  padding: 0 1.5rem;
  transform: translateY(calc(-50% + 24px));
  animation: gallery-hero-title-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes gallery-hero-title-in {
  to {
    opacity: 0.8;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-hero-title {
    animation: none;
    opacity: 0.8;
    transform: translateY(-50%);
  }
}

/* ============================================
   COVERFLOW GALLERY
   ============================================ */
.coverflow {
  position: relative;
  background: var(--color-cream);
  margin: 0;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  overflow: hidden;
}

.coverflow-vanta {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.coverflow-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stage: holds the coverflow cards, perspective for the 3D fan effect */
.coverflow-stage {
  position: relative;
  width: 100%;
  height: clamp(280px, 42vw, 350px);
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(250px, 30vw, 450px);
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(22, 33, 29, 0.25);
  cursor: pointer;
  will-change: transform, opacity, filter;
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.coverflow-card.is-active {
  cursor: default;
  box-shadow: 0 40px 80px rgba(22, 33, 29, 0.35);
}

/* Darken/soften the non-active cards so the center image and its
   caption stay the clear focal point, matching the reference mockup. */
.coverflow-card:not(.is-active) {
  filter: brightness(0.85) saturate(0.9);
}

.coverflow-card.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.coverflow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(22, 33, 29, 0.2);
  background: rgba(244, 239, 232, 0.7);
  color: var(--color-dark);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.coverflow-arrow:hover {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: #ffffff;
}

.coverflow-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.coverflow-arrow-prev {
  left: clamp(0px, 2vw, 2.5rem);
}

.coverflow-arrow-next {
  right: clamp(0px, 2vw, 2.5rem);
}

/* Caption overlaid on the active card; text swaps with a slide+fade
   whenever the selection changes. */
.coverflow-caption {
  position: relative;
  z-index: 25;
  margin-top: 0.75rem;
  text-align: center;
  max-width: 560px;
  min-height: 9.5rem;
}

/* Vanta's line art animates in the same cream tone as the caption text —
   when a line happens to pass behind a letter the two colors match and the
   text washes out. A soft dark scrim behind the whole caption block (not
   just a text-shadow, since the lines are thin and move continuously)
   keeps contrast consistent regardless of what the animation is doing. */
.coverflow-caption::before {
  content: "";
  position: absolute;
  inset: -1.5rem -2rem;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(22, 33, 29, 0.55) 0%,
    rgba(22, 33, 29, 0.4) 45%,
    rgba(22, 33, 29, 0.15) 75%,
    rgba(22, 33, 29, 0) 100%
  );
  border-radius: 32px;
  pointer-events: none;
}

.coverflow-eyebrow,
.coverflow-title {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.coverflow-caption.is-in .coverflow-eyebrow,
.coverflow-caption.is-in .coverflow-title {
  opacity: 1;
  transform: translateY(0);
}

.coverflow-caption.is-in .coverflow-eyebrow { transition-delay: 0s; }
.coverflow-caption.is-in .coverflow-title { transition-delay: 0.06s; }

.coverflow-eyebrow {
  font-family: var(--font-avenir);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-rust);
  font-weight: 600;
}

.coverflow-title {
  font-family: var(--font-leitura);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #f4efe8;
  letter-spacing: 0.02em;
}

.coverflow-view-btn {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-avenir);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f4efe8;
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--color-rust);
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease;
}

.coverflow-view-btn:hover {
  background: var(--color-rust);
  color: #ffffff;
}

.coverflow-dots {
  position: relative;
  z-index: 25;
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.coverflow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(22, 33, 29, 0.2);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.coverflow-dot.is-active {
  background: var(--color-rust);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .coverflow-card {
    transition: opacity 0.3s ease;
  }
  .coverflow-eyebrow,
  .coverflow-title {
    transition: opacity 0.3s ease;
    transform: none;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
  .coverflow-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }
}