/* Mameri — Pirineus slab presentation. The source photograph is always
   rendered with contain, so all four edges remain visible and rectangular. */
.pirineus-experience {
  position: relative;
  height: auto;
  background: var(--off-white);
}

.pirineus-sticky {
  position: relative;
  min-height: 660px;
  padding: clamp(64px, 8vw, 108px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pirineus-type {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.pirineus-type span {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(3.2rem, 13vw, 13rem);
  letter-spacing: -0.04em;
  color: var(--midnight);
  opacity: 0.055;
  white-space: nowrap;
  line-height: 1;
}

.pirineus-stage-3d {
  position: relative;
  z-index: 2;
  width: min(82vw, 1240px);
  aspect-ratio: 2400 / 1565;
  max-height: 62svh;
}
.pirineus-fallback-img {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
  transform-origin: center;
  filter: drop-shadow(0 28px 34px rgba(20, 16, 8, 0.18));
}
.pirineus-fallback-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pirineus-copy {
  position: relative;
  z-index: 3;
  width: min(88vw, 600px);
  margin: 26px auto 0;
  text-align: center;
}
.pirineus-headline {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.pirineus-text {
  font-size: clamp(0.9rem, 1.2vw, 1.02rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-light);
  max-width: 480px;
  margin: 0 auto 18px;
}
.pirineus-link { color: var(--midnight); }

@media (max-width: 768px) {
  .pirineus-sticky { min-height: 560px; }
  .pirineus-stage-3d { width: 94vw; max-height: 50svh; }
  .pirineus-type span { font-size: clamp(2.6rem, 16vw, 5rem); }
  .pirineus-text { line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .pirineus-fallback-img { transform: none !important; }
}

/* Restored 3D mode — original Claude choreography. */
.pirineus-experience { overflow: visible; }
.pirineus-sticky { overflow: hidden; }
.pirineus-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
.pirineus-fallback-img {
  box-shadow: 0 30px 70px -30px rgba(20,16,8,.28);
  transition: opacity .5s ease;
}
.pirineus-experience.is-3d .pirineus-fallback-img {
  opacity: 0;
  pointer-events: none;
}
.pirineus-type { opacity: 1; }
.pirineus-type span { opacity: .06; }

/* Loading affordance — three small dots, shown only if the 3D swap
   is genuinely taking a moment (about-motion.js delays it 700ms so
   it never flashes on a fast connection). */
.pirineus-loading {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 4;
  display: flex;
  gap: 7px;
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.pirineus-loading.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.pirineus-loading span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: pirineus-loading-pulse 1.1s ease-in-out infinite;
}
.pirineus-loading span:nth-child(2) { animation-delay: .15s; }
.pirineus-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes pirineus-loading-pulse {
  0%, 100% { opacity: .25; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pirineus-loading { display: none; }
}

html.is-3d-ready .pirineus-experience { height: 300svh; }
html.is-3d-ready .pirineus-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  padding: 0 0 clamp(150px,24svh,240px);
  flex-direction: column;
}
html.is-3d-ready .pirineus-type { bottom: clamp(150px,24svh,240px); }
html.is-3d-ready .pirineus-stage-3d {
  width: min(74vw,1500px);
  max-height: 62svh;
}
html.is-3d-ready .pirineus-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px,6svh,64px);
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
html.is-3d-ready .pirineus-experience.copy-in .pirineus-copy {
  opacity: 1;
  transform: none;
}

@media (max-width:1024px) {
  html.is-3d-ready .pirineus-experience { height: 270svh; }
  html.is-3d-ready .pirineus-stage-3d { width: min(84vw,900px); }
}
@media (max-width:768px) {
   html.is-3d-ready .pirineus-experience { height: 240svh; }
  html.is-3d-ready .pirineus-sticky { min-height: 480px; }
  html.is-3d-ready .pirineus-stage-3d { width: 92vw; max-height: 52svh; }
}
@media (prefers-reduced-motion:reduce) {
  .pirineus-canvas { display:none; }
}