/* Shared motion layer: Lenis smooth scroll + reading-progress line + journey-page polish. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.kprogress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 450; pointer-events: none; }
.kprogress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }

/* Journey pages (Kralow Mansion, 7132 Hotel): slower hero settle, softer reveals, photo unveil */
@keyframes kburns { from { scale: 1.14; } to { scale: 1; } }
.khero-img { animation: kburns 3.2s var(--ease) both; will-change: transform; }
.khero-content { will-change: transform, opacity; }
.khero-content p, .khero-content h1 { text-shadow: 0 2px 22px rgba(0,0,0,0.5); }
.kscene .reveal { transform: translateY(44px); transition: opacity 1.3s var(--ease), transform 1.4s var(--ease); }
.kscene .reveal.in-view { transform: translateY(0); }
.kimg-col.reveal, .kimg-col.reveal.in-view { transform: none; }
.kimg-col img {
  clip-path: inset(14% 0 0 0); scale: 1.12;
  transition: clip-path 1.6s var(--ease), scale 1.9s var(--ease);
}
.kimg-col.in-view img { clip-path: inset(0 0 0 0); scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .khero-img { animation: none; }
  .kimg-col img { clip-path: none; scale: 1; transition: none; }
}

/* Angle switcher: prev/next arrows beside the thumbnails, swipe-friendly scenes */
.kswipe { touch-action: pan-y; }
.kangle-switcher { align-items: center; }
.kangle-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-size: 0.95rem; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.kangle-arrow:hover { border-color: var(--accent); background: rgba(255,255,255,0.05); }

/* Phones show one scenario image at a time (display toggled) — fade each new one in */
@keyframes kfadein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  .kscenario .kscenario-media img.kvisible,
  .kscenario .kscenario-media video.kvisible { animation: kfadein .7s ease both; }
}