/* Fotos, Bewegung und kleine Lebenszeichen auf allen Seiten */

/* ---------- Example photos inside the postcard frames ---------- */
.wash--photo { background: var(--green-wash); }
.wash--photo .photo {
  position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.02);
  transition: transform 0.9s var(--ease-out), filter 0.6s;
  will-change: transform;
}
.wash--photo .wash-label { position: relative; z-index: 1; }
.postcard:hover .wash--photo .photo, .room-stamp:hover .wash--photo .photo { transform: translate3d(0, var(--py, 0px), 0) scale(1.07); }

/* ---------- Postcards lift and straighten on hover ---------- */
.photo-card, .trip-card, .voice, .map-card, .aside-card, .tip-card, .notice-card, .closing, .breakfast-note { will-change: transform; }
.js .settle.is-in.photo-card:hover, .js .settle.is-in.trip-card:hover, .js .settle.is-in.voice:hover,
.js .settle.is-in.map-card:hover, .js .settle.is-in.tip-card:hover, .js .settle.is-in.aside-card:hover,
.js .settle.is-in.notice-card:hover, .js .settle.is-in.breakfast-note:hover {
  transform: rotate(calc(var(--tilt) * 0.25)) translateY(-8px);
  box-shadow: var(--card-shadow-lift);
  transition-duration: 0.45s;
}

/* ---------- Stamps wiggle when touched ---------- */
.stamp:hover { animation: wiggle 0.6s var(--ease-out); }
@keyframes wiggle { 0% { transform: rotate(3deg); } 30% { transform: rotate(-4deg) scale(1.05); } 60% { transform: rotate(5deg); } 100% { transform: rotate(3deg); } }

/* ---------- Text arrives softly ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }


/* ---------- Place-name ribbon ---------- */
.ribbon { overflow: hidden; border-block: 1.5px dashed #c7cfd6; background: #fff; padding-block: 18px; }
/* Slow endless loop; runs only while on screen (main.js), pauses on hover or after a tap */
.ribbon-track { display: flex; width: max-content; gap: 0; animation: ribbon 60s linear infinite; animation-play-state: paused; will-change: transform; }
.ribbon.is-running .ribbon-track { animation-play-state: running; }
.ribbon.is-running:hover .ribbon-track, .ribbon.is-held .ribbon-track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translate3d(-50%, 0, 0); } }
.ribbon-track span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink); white-space: nowrap; }
.ribbon-track .icon { width: 30px; height: 30px; color: var(--red); }
.ribbon-track span:nth-child(3n + 2) .icon { color: var(--green); }
.ribbon-track span:nth-child(3n) .icon { color: var(--blue); }

/* ---------- Icons in lists nod on hover ---------- */
.strengths li:hover .icon, .facts li:hover .icon, .good-to-know li:hover .icon { animation: nod 0.7s var(--ease-out); }
@keyframes nod { 0% { transform: none; } 40% { transform: translateY(-4px) rotate(-8deg) scale(1.12); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wash--photo .photo { transform: none !important; transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .stamp:hover { animation: none; }
  .ribbon-track { animation: none; }
  .js .settle.is-in:hover { transform: rotate(var(--tilt)); }
}