/* VOCARTE — warstwa animacji przejść (tylko wersja --motion).
   Działa wyłącznie gdy <html class="motion">, czyli gdy użytkownik nie wyłączył ruchu w systemie.
   Tło pozostaje statyczne — animowane są tylko wejścia treści i przejścia między stronami. */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); }

/* ---------- Przejścia między podstronami (View Transitions API) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-soft) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) .08s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Pojawianie się treści przy przewijaniu ---------- */
html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Zdjęcia: delikatne „odsłonięcie” i zejście skali */
html.motion [data-reveal="img"] { transform: none; overflow: hidden; border-radius: var(--radius); }
html.motion .person__photo[data-reveal="img"] { overflow: visible; border-radius: 0; }
html.motion [data-reveal="img"] img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.motion [data-reveal="img"].is-in img { transform: none; }

/* Zdjęcie postaci w hero podstron */
html.motion .room-hero__photo[data-reveal] { transform: translateY(40px); transition-duration: 1.4s; }
html.motion .room-hero__photo[data-reveal].is-in { transform: none; }

/* ---------- Nagłówek H1: słowa wyłaniają się spod linii ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em; margin: 0 -.06em -.12em; }
.w__i { display: inline-block; }
html.motion .is-split .w__i {
  transform: translateY(110%);
  animation: word-rise 1.1s var(--ease-out) both;
  animation-delay: calc(var(--base, 0ms) + var(--i) * 75ms);
}
@keyframes word-rise { to { transform: none; } }

/* ---------- Logo w hero strony głównej: kreślenie i wypełnienie ---------- */
html.motion .home-hero__logo path {
  stroke: currentColor;
  stroke-width: .7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  animation: logo-draw 1.6s var(--ease-soft) .1s forwards, logo-fill .9s var(--ease-soft) 1.1s forwards;
}
html.motion .home-hero__logo path:nth-child(2) { animation-delay: .25s, 1.2s; }
html.motion .home-hero__logo path:nth-child(3) { animation-delay: .4s, 1.3s; }
html.motion .home-hero__logo path:nth-child(4) { animation-delay: .55s, 1.4s; }
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { to { fill-opacity: 1; stroke-width: 0; } }

/* ---------- Mikrointerakcje ---------- */
.site-nav a:not(.btn) { position: relative; border-bottom: 0 !important; }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--rose); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.btn { transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.link-arrow::after { display: inline-block; transition: transform .4s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

.room-card { transition: border-color .4s, transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--room-accent) 45%, transparent); }
.room-card__photo img { transition: transform .8s var(--ease-out); transform-origin: bottom center; }
.room-card:hover .room-card__photo img { transform: scale(1.04); }
.room-card__go::after { display: inline-block; transition: transform .4s var(--ease-out); }
.room-card:hover .room-card__go::after { transform: translateX(5px); }

.tier, .value, .paths > div, .event { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.tier:hover, .value:hover, .event:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(26, 13, 46, .45); }

/* FAQ: płynne rozwijanie (przeglądarki z ::details-content) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq summary::after { transition: transform .4s var(--ease-out); }
.faq details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); }

/* Menu mobilne */
html.motion .mobile-menu:not([hidden]) { animation: menu-in .4s var(--ease-soft) both; }
html.motion .mobile-menu:not([hidden]) .rooms a,
html.motion .mobile-menu:not([hidden]) .rest,
html.motion .mobile-menu:not([hidden]) .actions { animation: item-in .7s var(--ease-out) both; }
html.motion .mobile-menu .rooms a:nth-child(1) { animation-delay: .05s; }
html.motion .mobile-menu .rooms a:nth-child(2) { animation-delay: .1s; }
html.motion .mobile-menu .rooms a:nth-child(3) { animation-delay: .15s; }
html.motion .mobile-menu .rooms a:nth-child(4) { animation-delay: .2s; }
html.motion .mobile-menu .rest { animation-delay: .28s; }
html.motion .mobile-menu .actions { animation-delay: .34s; }
@keyframes menu-in { from { opacity: 0; } }
@keyframes item-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn:hover, .room-card:hover, .tier:hover, .value:hover, .event:hover { transform: none; }
}