/* Final motion layer: short, visible interaction feedback without transform collisions. */
:root {
  --motion-smooth: cubic-bezier(.16, 1, .3, 1);
  --motion-soft: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 260ms;
  --motion-medium: 520ms;
  --motion-slow: 780ms;
}

.motion-ready .reveal {
  opacity: 0 !important;
  translate: 0 24px !important;
  filter: blur(3px) !important;
  transition:
    opacity 680ms ease,
    translate 820ms var(--motion-smooth),
    filter 620ms ease !important;
  transition-delay: calc(var(--delay, 0) * 90ms) !important;
}

.motion-ready .reveal.in-view {
  opacity: 1 !important;
  translate: 0 0 !important;
  filter: blur(0) !important;
}

.site-header,
.site-header .brand,
.site-header nav,
.site-header .nav-hover-indicator,
.button,
.text-link::after {
  transition-duration: 520ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

.site-header .brand {
  transform-origin: left center;
}

@media (hover: hover) and (pointer: fine) {
  .site-header .brand:hover {
    transform: scale(1.055);
  }

  .button:not(:disabled):hover {
    box-shadow: 0 12px 28px rgba(23, 32, 28, .15);
  }
}

/* Homepage */
body[data-page="home"] .hero-content.reveal {
  transition-duration: 760ms, 900ms, 680ms !important;
}

body[data-page="home"] .home-command .service-card,
body[data-page="home"] .home-command .process li {
  transform-origin: center;
  transition:
    background-color 520ms var(--motion-smooth),
    border-color 360ms ease,
    /* Polomer musi byt v zozname aj tu. Tento subor sa nacita ako posledny
       a prepisuje cely prechod, takze bez neho by rohy naskocili skokom. */
    border-radius 620ms var(--motion-smooth),
    box-shadow 620ms var(--motion-smooth),
    transform 620ms var(--motion-smooth) !important;
}

body[data-page="home"] .home-command .service-card::before,
body[data-page="home"] .home-command .process li::before,
body[data-page="home"] .home-command .service-card h3::after {
  transition-duration: 560ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

body[data-page="home"] .home-command .service-card h3,
body[data-page="home"] .home-command .service-card p,
body[data-page="home"] .home-command .service-card .service-bottom,
body[data-page="home"] .home-command .process li h3,
body[data-page="home"] .home-command .process li p {
  transition: transform 560ms var(--motion-smooth), color 320ms ease !important;
}

body[data-page="home"] .home-command .service-bottom a,
body[data-page="home"] .home-command .service-cart,
body[data-page="home"] .home-command .faq-icon,
body[data-page="home"] .home-command .faq-answer,
body[data-page="home"] .home-command .faq-answer p,
body[data-page="home"] .home-command .contact-field > span,
body[data-page="home"] .home-command .contact-submit,
body[data-page="home"] .site-footer .footer-actions a,
body[data-page="home"] .site-footer .footer-actions svg,
body[data-page="home"] .site-footer .footer-actions img {
  transition-duration: 520ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .home-command .service-card:hover,
  body[data-page="home"] .home-command .process li:hover {
    transform: translate3d(0, -5px, 0) scale(1.008);
  }

  body[data-page="home"] .home-command .service-card:hover h3::after {
    opacity: 1;
    transform: scaleX(1);
  }

  body[data-page="home"] .home-command .service-bottom a:hover .service-cart-hover,
  body[data-page="home"] .home-command .service-bottom a:focus-visible .service-cart-hover {
    animation: service-cart-gentle-shake 720ms var(--motion-smooth) both !important;
  }
}

body[data-page="home"] .home-command .faq-item summary {
  transition: color 320ms ease, padding-inline 520ms var(--motion-smooth) !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .home-command .faq-item summary:hover {
    padding-inline: 8px;
  }
}

/* About */
body[data-page="about"] .about-hero-copy,
body[data-page="about"] .about-story-heading,
body[data-page="about"] .about-story-copy,
body[data-page="about"] .about-value-card,
body[data-page="about"] .about-closing,
body[data-page="about"] .about-closing > * {
  transition-duration: 720ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

body[data-page="about"] .about-value-card {
  transform-origin: center bottom;
  transition:
    transform 640ms var(--motion-smooth),
    background-color 520ms var(--motion-smooth),
    box-shadow 620ms var(--motion-smooth) !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="about"] .about-value-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.012);
    box-shadow: 0 24px 46px rgba(23, 32, 28, .09);
  }
}

body[data-page="about"] .about-story-token,
body[data-page="about"] .site-footer [data-footer-reveal] {
  will-change: transform, opacity, filter;
}

/* Booking */
body[data-page="booking"] .booking-title-reveal .booking-title-character {
  visibility: visible !important;
  opacity: 0 !important;
  filter: blur(4px) !important;
  transform: translate3d(0, .38em, 0) scale(.97) !important;
  transition:
    opacity 400ms var(--motion-soft),
    transform 520ms var(--motion-smooth),
    filter 360ms ease !important;
}

body[data-page="booking"] .booking-title-reveal .booking-title-character.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body[data-page="booking"].booking-entry-pending.booking-entry-active .booking-progress li {
  animation: booking-progress-arrive 620ms var(--motion-smooth) var(--booking-progress-delay, 760ms) both !important;
}

body[data-page="booking"].booking-entry-pending.booking-entry-active .booking-step[data-step="1"].active .booking-service {
  animation: booking-service-arrive 700ms var(--motion-smooth) var(--booking-service-delay, 520ms) both !important;
}

body[data-page="booking"] .booking-service {
  transition:
    transform 620ms var(--motion-smooth),
    background-color 420ms var(--motion-soft),
    border-color 360ms ease,
    box-shadow 620ms var(--motion-smooth) !important;
}

body[data-page="booking"] .booking-service::before,
body[data-page="booking"] .booking-service::after,
body[data-page="booking"] .booking-service > span,
body[data-page="booking"] .booking-service > small,
body[data-page="booking"] .booking-service > b {
  transition-duration: 620ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

body[data-page="booking"] .booking-service-deck-page {
  transition:
    opacity 540ms var(--motion-soft),
    transform 760ms var(--motion-smooth),
    filter 620ms ease !important;
}

body[data-page="booking"] .booking-back-button,
body[data-page="booking"] .booking-next-button,
body[data-page="booking"] .booking-back-label,
body[data-page="booking"] .booking-next-label,
body[data-page="booking"] .booking-back-label-character,
body[data-page="booking"] .booking-next-label-character,
body[data-page="booking"] .booking-back-icon,
body[data-page="booking"] .booking-next-icon,
body[data-page="booking"] .booking-back-icon-image,
body[data-page="booking"] .booking-next-icon-image {
  transition-duration: 420ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

body[data-page="booking"] .booking-back-button.is-returning {
  animation: booking-back-press 400ms var(--motion-smooth) both !important;
}

body[data-page="booking"] .booking-next-button.is-advancing {
  animation: booking-next-press 420ms var(--motion-smooth) both !important;
}

body[data-page="booking"] .booking-back-button.is-icon-confirming .booking-back-icon {
  animation: booking-back-confirm 480ms var(--motion-smooth) both !important;
}

body[data-page="booking"] .booking-next-button.is-icon-confirming .booking-next-icon {
  animation: booking-next-confirm 520ms var(--motion-smooth) both !important;
}

body[data-page="booking"] .booking-select-menu,
body[data-page="booking"] .booking-select-option,
body[data-page="booking"] .booking-select-chevron,
body[data-page="booking"] .calendar-nav-button,
body[data-page="booking"] .calendar-nav-icon,
body[data-page="booking"] .calendar-nav-icon-image,
body[data-page="booking"] .calendar-day,
body[data-page="booking"] .slot,
body[data-page="booking"] .booking-contact-field > span {
  transition-duration: 480ms !important;
  transition-timing-function: var(--motion-smooth) !important;
}

body[data-page="booking"] .booking-select-option {
  opacity: 0 !important;
  transform: translate3d(-8px, 5px, 0) !important;
}

body[data-page="booking"] .booking-select.is-open .booking-select-option {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: var(--select-option-open-delay) !important;
}

body[data-page="booking"] .booking-select.is-closing .booking-select-option {
  opacity: 0 !important;
  transform: translate3d(7px, -3px, 0) !important;
  transition-delay: var(--select-option-close-delay) !important;
}

body[data-page="booking"] .booking-content .slots.is-revealing .slots-heading,
body[data-page="booking"] .booking-content .slots.is-revealing .slot {
  opacity: 0 !important;
  transform: translate3d(0, 9px, 0) scale(.96) !important;
  transition:
    opacity 240ms ease,
    transform 480ms var(--motion-smooth),
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 460ms var(--motion-smooth) !important;
}

body[data-page="booking"] .booking-content .slots.is-revealing.is-ready .slots-heading,
body[data-page="booking"] .booking-content .slots.is-revealing.is-ready .slot {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body[data-page="booking"] .booking-content .slots.is-revealing.is-ready .slot {
  transition-delay: var(--slot-intro-delay) !important;
}

/* LoveHome4U. Rovnaký prípad ako karty na úvodnej stránke: tento súbor sa
   načíta ako posledný a prepisuje celý prechod, takže vlastné hover
   vlastnosti karty musia byť v zozname aj tu, inak naskočia skokom.
   Oneskorenie nesie každá položka zvlášť priamo v skratke — keby sa
   nechalo na transition-delay vyššie, táto špecifickejšia skratka by ho
   prepísala na nulu a postupné nabiehanie kariet by zmizlo. */
body[data-page="lovehome4u"] .lh-service-card {
  --lh-reveal-delay: calc(var(--delay, 0) * 90ms);
  transition:
    opacity 680ms ease var(--lh-reveal-delay),
    translate 820ms var(--motion-smooth) var(--lh-reveal-delay),
    filter 620ms ease var(--lh-reveal-delay),
    background-color .3s ease 0s,
    transform .3s var(--motion-smooth) 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal {
    opacity: 0 !important;
    translate: 0 12px !important;
    filter: blur(1.5px) !important;
    transition-duration: 460ms, 560ms, 420ms !important;
  }

  .motion-ready .reveal.in-view {
    opacity: 1 !important;
    translate: 0 0 !important;
    filter: blur(0) !important;
  }

  /* Bez tohto by sa trojhodnotový zoznam vyššie cyklicky zopakoval cez päť
     prechodov karty a používateľ s obmedzeným pohybom by dostal 560ms
     nadvihnutie pri prejdení myšou, ktoré dnes nemá vôbec. */
  body[data-page="lovehome4u"] .lh-service-card {
    transition:
      opacity 460ms ease var(--lh-reveal-delay),
      translate 560ms var(--motion-smooth) var(--lh-reveal-delay),
      filter 420ms ease var(--lh-reveal-delay),
      background-color 0s, transform 0s !important;
  }

  body[data-page="booking"].booking-entry-pending.booking-entry-active .booking-progress li {
    animation-duration: 480ms !important;
  }

  body[data-page="booking"].booking-entry-pending.booking-entry-active .booking-step[data-step="1"].active .booking-service {
    animation-duration: 540ms !important;
  }

  body[data-page="booking"] .booking-title-reveal .booking-title-character {
    transition-duration: 300ms, 390ms, 280ms !important;
  }

  body[data-page="booking"] .booking-service-deck-page,
  body[data-page="booking"] .booking-select-menu,
  body[data-page="booking"] .booking-select-option,
  body[data-page="booking"] .calendar-day,
  body[data-page="booking"] .slot {
    transition-duration: 360ms !important;
  }
}

@media (max-width: 760px) {
  .motion-ready .reveal {
    translate: 0 16px !important;
    filter: blur(2px) !important;
  }
}

/* Scroll-driven hero retreat: media and foreground recede as one anchored stage. */
body[data-page="home"] .home-command .hero-fullbleed {
  --hero-frame-scale: 1;
  --hero-frame-shift: 0px;
  --hero-frame-radius: 0px;
  --hero-scroll-cue-opacity: 1;
  --hero-scroll-cue-shift: 0px;
  overflow: hidden;
  background: #56534d;
}

body[data-page="home"] .home-command .hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  align-items: center;
  box-sizing: border-box;
  padding: inherit;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--hero-frame-radius);
  box-shadow: 0 28px 72px rgba(10, 15, 12, .2);
  transform: translate3d(0, var(--hero-frame-shift), 0) scale(var(--hero-frame-scale));
  transform-origin: center center;
  will-change: transform, border-radius;
  pointer-events: auto;
}

body[data-page="home"] .home-command .hero-media .hero-backdrop,
body[data-page="home"] .home-command .hero-media .hero-overlay {
  inset: 0;
  pointer-events: none;
}

body[data-page="home"] .home-command .hero-media .hero-backdrop {
  z-index: 0;
}

body[data-page="home"] .home-command .hero-media .hero-overlay {
  z-index: 1;
}

body[data-page="home"] .home-command .hero-content {
  z-index: 2;
}

body[data-page="home"] .home-command .hero-scroll-cue {
  z-index: 2;
  opacity: var(--hero-scroll-cue-opacity);
  transform: translate3d(-50%, var(--hero-scroll-cue-shift), 0);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-command .hero-media,
  body[data-page="home"] .home-command .hero-scroll-cue {
    will-change: auto;
  }
}