.experiencias { padding: 5rem 0; background: var(--noir-950); color: var(--gold-100); position: relative; overflow: clip; }
.experiencias__intro { max-width: 920px; margin: 0 max(1.25rem, calc((100vw - 1180px) / 2)) 3rem; }

.experiencias__track { position: relative; }
.experiencias__sticky { position: static; padding: 0 max(1.25rem, calc((100vw - 1180px) / 2)); }
.experiencias__rail { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.experiencias__gallery-progress { display: none; }

.experience {
  position: relative;
  min-height: clamp(320px, 55vw, 460px);
  overflow: clip;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(196, 155, 90, .25);
  transition: border-color 260ms ease;
}
.experience__media { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.experience__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 10, 8, .32) 0%, transparent 38%); }
.experience img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) saturate(.85) brightness(.85) sepia(.12);
  transform: scale(1);
  animation: experience-drift 24s ease-in-out infinite alternate;
}
.experience:nth-child(2n) img { animation-delay: -8s; }
.experience:nth-child(3n) img { animation-delay: -16s; }

/* Vidro fosco: um cartao de vidro pequeno flutua sobre a foto, sem cobrir a imagem */
.experience__copy {
  position: absolute;
  z-index: 1;
  left: 1rem; right: 1rem; bottom: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: calc(var(--radius-lg) - 14px);
  background: rgba(18, 48, 43, .32);
  backdrop-filter: blur(10px) saturate(1.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  border: 1px solid rgba(238, 226, 201, .2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: border-color 260ms ease;
}
.experience.is-active .experience__copy { border-color: rgba(238, 226, 201, .4); }
.experience__place { margin: 0 0 .75rem; color: var(--gold-400); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.experience h3 { max-width: 24ch; margin: 0 0 .85rem; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.14; color: var(--gold-100); }
.experience__copy > p:last-child { max-width: 55ch; margin: 0; line-height: 1.7; color: rgba(243, 234, 217, .86); }
.experience.is-active { border-color: rgba(196, 155, 90, .55); }
.experience.is-active img { filter: grayscale(.15) saturate(1) brightness(.95) sepia(.08); }
.experiencias__credit { margin: 2rem max(1.25rem, calc((100vw - 1180px) / 2)) 0; color: rgba(243, 234, 217, .6); font-size: .72rem; }

@keyframes experience-drift {
  from { transform: scale(1) translate3d(0,0,0); }
  to { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}

@media (min-width: 700px) {
  .experiencias__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

@media (min-width: 1100px) {
  .experiencias { padding-block: 7rem; }
}

/* Galeria com scroll horizontal fixo — so ativa em telas largas, com JS ligando .is-gallery apos checar motion/viewport */
@media (min-width: 900px) {
  .experiencias__track.is-gallery { height: 340vh; }
  .experiencias__sticky.is-gallery { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .experiencias__rail.is-gallery { display: flex; flex-wrap: nowrap; gap: 2.5rem; width: max-content; will-change: transform; }
  .experiencias__rail.is-gallery .experience { width: min(62vw, 760px); flex: none; min-height: min(64vh, 560px); }
  .experiencias__sticky.is-gallery .experiencias__gallery-progress { display: block; position: relative; margin-top: 2rem; height: 2px; background: rgba(243, 234, 217, .18); border-radius: 99px; overflow: hidden; }
  .experiencias__sticky.is-gallery .experiencias__gallery-progress-fill { position: absolute; inset: 0; width: 100%; background: var(--gold-400); transform: scaleX(0); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
  .experience, .experience img { transition: none; animation: none; }
}