/* ==================================================================
   Budget Stars Group — shared motion layer
   One set of classes / attributes for every hotel and restaurant page.
   Colours come only from the brand tokens (--hotel-accent, --brand-accent …).

   Rules
   - transform / opacity only for moving things; 0.4–0.8 s, cubic-bezier(.2,.7,.2,1)
     (exceptions asked for: Ken Burns 7 s, hero progress bar = slide interval)
   - nothing is hidden unless motion.js has put .js-motion on <html>
     → with JS off every word and image is visible
   - phones (≤767px): fade only, at most 12px of travel, no zoom / parallax
   - prefers-reduced-motion: no transforms, no animation, content shown at once
================================================================== */

:root {
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-fast: .4s;
  --motion-base: .7s;
  --motion-shift: 24px;          /* travel of fade-up */
  --hero-interval: 6500ms;       /* hero slide time = progress bar length */
  --header-shrink: 16px;         /* ~20% of the 77px header */
}

@media (max-width: 767.98px) {
  :root {
    --motion-shift: 12px;
  }
}

/* ------------------------------------------------------------------
   1. Scroll reveal — AOS (aos.js) toggles .aos-init / .aos-animate.
   aos.css is NOT loaded: it hides [data-aos] even when JS is off.
   These rules do the same job, but only under html.js-motion.
------------------------------------------------------------------- */
.js-motion [data-aos] {
  transition-property: opacity, transform;
  transition-duration: var(--motion-base);
  transition-timing-function: var(--motion-ease);
}

.js-motion [data-aos^="fade"]:not(.aos-animate),
.js-motion [data-aos="zoom-in"]:not(.aos-animate) {
  opacity: 0;
}

.js-motion [data-aos="fade-up"]:not(.aos-animate) {
  transform: translate3d(0, var(--motion-shift), 0);
}

.js-motion [data-aos="zoom-in"]:not(.aos-animate) {
  transform: scale(.96);
}

.js-motion [data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* grid stagger: 0, 80 … 400 ms */
.js-motion [data-aos-delay="80"]  { transition-delay: 80ms; }
.js-motion [data-aos-delay="160"] { transition-delay: 160ms; }
.js-motion [data-aos-delay="240"] { transition-delay: 240ms; }
.js-motion [data-aos-delay="320"] { transition-delay: 320ms; }
.js-motion [data-aos-delay="400"] { transition-delay: 400ms; }

@media (max-width: 767.98px) {
  /* phones: fade only (zoom becomes a plain fade) */
  .js-motion [data-aos="zoom-in"]:not(.aos-animate) {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   2. Hero — crossfade (Owl animateOut: fadeOut), Ken Burns, captions,
   progress bar. Same markup on every hotel; JS adds .hero-progress.
------------------------------------------------------------------- */
.hero-carousel .owl-item.animated {
  animation-duration: .8s;
  animation-timing-function: var(--motion-ease);
}

/* the old one-off zoom on the active figure is replaced by Ken Burns */
.hero-carousel .owl-item.active .hero-slide figure {
  animation: none;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* .owl-animated-out keeps the same animation running while the slide fades
     out, so the outgoing photo never snaps back to scale(1) */
  .js-motion .hero-carousel .owl-item.active .hero-slide figure img,
  .js-motion .hero-carousel .owl-item.owl-animated-out .hero-slide figure img {
    animation: heroKenBurns 6s ease-out both;   /* ends before the 6.5 s slide change */
    will-change: transform;
  }

  .js-motion .hero-carousel .owl-item:nth-child(odd) .hero-slide figure img {
    transform-origin: 25% 50%;
  }

  .js-motion .hero-carousel .owl-item:nth-child(even) .hero-slide figure img {
    transform-origin: 75% 50%;
  }
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* captions: kicker > title > subtitle rise one line at a time, 120 ms apart,
   replayed every time a slide becomes active */
.js-motion .hero-carousel .hero-caption > * {
  opacity: 0;
}

.js-motion .hero-carousel .owl-item.active .hero-caption > * {
  animation: heroLineUp var(--motion-base) var(--motion-ease) both;
}

.js-motion .hero-carousel .owl-item.active .hero-caption > :nth-child(2) { animation-delay: 120ms; }
.js-motion .hero-carousel .owl-item.active .hero-caption > :nth-child(3) { animation-delay: 240ms; }

.hero-caption__kicker {
  display: block;            /* inline spans cannot be transformed */
}

@keyframes heroLineUp {
  from { opacity: 0; transform: translate3d(0, var(--motion-shift), 0); }
  to   { opacity: 1; transform: none; }
}

/* progress bar under the hero — it is also the autoplay clock (motion.js) */
.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  /* kept invisible: its animation is only the 6.5 s autoplay timer */
  opacity: 0;
}

.hero-progress span {
  display: block;
  height: 100%;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hero-progress.is-running span {
  animation: heroProgress var(--hero-interval) linear forwards;
}

.hero.is-paused .hero-progress span {
  animation-play-state: paused;
}

@keyframes heroProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------------
   3. Header — after 80px: ~20% shorter, smaller logo card, solid
   background + soft shadow. Transform / opacity only, so the sticky
   header never changes its layout height (no layout shift).
------------------------------------------------------------------- */
header {
  transition: transform .3s var(--motion-ease);
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(17, 17, 26, .08);
  opacity: 0;
  transition: opacity .3s var(--motion-ease);
  pointer-events: none;
}

/* Shrink on scroll (tablet / desktop only): the bar really gets ~20% shorter
   (81px -> 65px: nav padding 16px -> 8px) and the logo card gets smaller.
   Phones keep the full header. */
@media (min-width: 768px) {
  header .nav-wrapper {
    transition: padding .3s var(--motion-ease);
  }

  header .logo .img-logo {
    transform-origin: 0 0;
    transition: transform .3s var(--motion-ease);
  }

  header.is-scrolled .nav-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  header.is-scrolled .logo .img-logo {
    transform: scale(.62);
  }
}

header.is-scrolled::before {
  opacity: 1;
}

/* mobile menu: slide + fade, items rise one after another */
@media (max-width: 1199.98px) {
  nav#hotel-navigation {
    transition: transform var(--motion-fast) var(--motion-ease),
                opacity var(--motion-fast) var(--motion-ease),
                visibility 0s linear var(--motion-fast);
  }

  nav#hotel-navigation.active {
    transition: transform var(--motion-fast) var(--motion-ease),
                opacity var(--motion-fast) var(--motion-ease),
                visibility 0s;
  }

  nav#hotel-navigation.active > ul > li {
    animation: navItemIn var(--motion-fast) var(--motion-ease) both;
  }

  nav#hotel-navigation.active > ul > li:nth-child(2) { animation-delay: 40ms; }
  nav#hotel-navigation.active > ul > li:nth-child(3) { animation-delay: 80ms; }
  nav#hotel-navigation.active > ul > li:nth-child(4) { animation-delay: 120ms; }
  nav#hotel-navigation.active > ul > li:nth-child(5) { animation-delay: 160ms; }
  nav#hotel-navigation.active > ul > li:nth-child(6) { animation-delay: 200ms; }
  nav#hotel-navigation.active > ul > li:nth-child(7) { animation-delay: 240ms; }
  nav#hotel-navigation.active > ul > li:nth-child(n+8) { animation-delay: 280ms; }
}

@keyframes navItemIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   4. Hover / micro-interaction — pointer devices only; every hover state
   has the same :focus-visible state for keyboard users.
------------------------------------------------------------------- */
.hotel-card,
.feature-card,
.facility-item,
.restaurant-slider .item {
  transition: transform .6s var(--motion-ease), box-shadow .6s var(--motion-ease);
}

.hotel-card > a:first-child img,
.feature-card img,
.facility-image img,
.restaurant-slider .slide-image {
  transition: transform .6s var(--motion-ease);
}

@media (hover: hover) {
  .hotel-card:hover,
  .feature-card:hover,
  .facility-item:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 18px 40px -18px rgba(17, 17, 26, .28);
  }

  .hotel-card:hover > a:first-child img,
  .feature-card:hover img,
  .facility-item:hover .facility-image img,
  .restaurant-slider .item:hover .slide-image {
    transform: scale(1.05);
  }
}

/* keyboard: same lift / zoom when a link inside the card has visible focus */
.hotel-card:has(:focus-visible),
.feature-card:has(:focus-visible),
.facility-item:has(:focus-visible) {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 18px 40px -18px rgba(17, 17, 26, .28);
}

.hotel-card:has(:focus-visible) > a:first-child img,
.feature-card:has(:focus-visible) img,
.facility-item:has(:focus-visible) .facility-image img,
.restaurant-slider .item:has(:focus-visible) .slide-image {
  transform: scale(1.05);
}

/* buttons: brand colour fills from left to right, arrow nudges 4px */
.btn,
.contact-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn::before,
.contact-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hotel-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--motion-ease);
}

.btn--accent::before,
.contact-submit::before {
  background: var(--hotel-accent-deep);
}

.btn::after {
  content: "\f061";                 /* Font Awesome arrow-right */
  display: inline-block;
  margin-left: 10px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8em;
  transition: transform .4s var(--motion-ease);
}

.contact-submit i,
.text-btn i {
  display: inline-block;
  transition: transform .4s var(--motion-ease);
}

@media (hover: hover) {
  .btn:hover,
  .btn--accent:hover {
    background: transparent;
    border-color: var(--hotel-accent);
    color: var(--hotel-on-accent);
  }

  .btn--accent:hover {
    border-color: var(--hotel-accent-deep);
    color: var(--hotel-on-accent-deep);
  }

  .btn:hover::before,
  .contact-submit:hover::before {
    transform: scaleX(1);
  }

  .btn:hover::after,
  .contact-submit:hover i,
  .text-btn:hover i {
    transform: translate3d(4px, 0, 0);
  }
}

.btn:focus-visible,
.btn--accent:focus-visible {
  background: transparent;
  border-color: var(--hotel-accent);
  color: var(--hotel-on-accent);
}

.btn--accent:focus-visible {
  border-color: var(--hotel-accent-deep);
  color: var(--hotel-on-accent-deep);
}

.btn:focus-visible::before,
.contact-submit:focus-visible::before {
  transform: scaleX(1);
}

.btn:focus-visible::after,
.contact-submit:focus-visible i,
.text-btn:focus-visible i {
  transform: translate3d(4px, 0, 0);
}

/* menu links (desktop bar): brand underline grows from the left */
@media (min-width: 1200px) {
  #hotel-navigation > ul > li > a,
  #hotel-navigation .dropdown-trigger {
    position: relative;
  }

  #hotel-navigation > ul > li > a::after,
  #hotel-navigation .dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--hotel-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .4s var(--motion-ease);
  }

  #hotel-navigation > ul > li > a.active::after,
  #hotel-navigation > ul > li.active > .dropdown-trigger::after,
  #hotel-navigation > ul > li > a:focus-visible::after,
  #hotel-navigation .dropdown-trigger:focus-visible::after {
    transform: scaleX(1);
  }
}

@media (min-width: 1200px) and (hover: hover) {
  #hotel-navigation > ul > li > a:hover::after,
  #hotel-navigation .dropdown-trigger:hover::after {
    transform: scaleX(1);
  }
}

/* footer social icons: background turns brand colour */
.social-list a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.social-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--hotel-accent);
  opacity: 0;
  transition: opacity .4s var(--motion-ease);
}

@media (hover: hover) {
  .social-list a:hover {
    background: transparent;
    border-color: var(--hotel-accent);
    color: var(--hotel-on-accent);
  }

  .social-list a:hover::before {
    opacity: 1;
  }
}

.social-list a:focus-visible {
  background: transparent;
  border-color: var(--hotel-accent);
  color: var(--hotel-on-accent);
  outline: 3px solid var(--hotel-accent);
  outline-offset: 3px;
}

.social-list a:focus-visible::before {
  opacity: 1;
}

/* one clear focus ring everywhere */
.js-motion :focus-visible {
  outline: 2px solid var(--hotel-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   5. Parallax (desktop > 1024px only) — motion.js writes --parallax-y
------------------------------------------------------------------- */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .js-motion .page-breadcrumb--photo::before {
    inset: -6% 0;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
  }

  .js-motion .about-media {
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
  }
}

/* ------------------------------------------------------------------
   6. Lightbox (gallery + restaurant photos) — built by motion.js
------------------------------------------------------------------- */
html.lightbox-open,
html.lightbox-open body {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  background: rgba(10, 10, 12, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast) var(--motion-ease), visibility 0s linear var(--motion-fast);
  touch-action: pan-y;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--motion-fast) var(--motion-ease), visibility 0s;
}

.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  object-fit: contain;
  border-radius: 4px;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.lightbox__img.is-loaded {
  opacity: 1;
}

.lightbox__caption {
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  text-align: center;
}

.lightbox__count {
  position: absolute;
  top: 18px;
  left: 20px;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.lightbox__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hotel-accent);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.lightbox__btn i {
  position: relative;
}

@media (hover: hover) {
  .lightbox__btn:hover::before {
    opacity: 1;
  }
}

.lightbox__btn:focus-visible::before {
  opacity: 1;
}

.lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev  { left: 12px;  top: 50%; margin-top: -24px; }
.lightbox__next  { right: 12px; top: 50%; margin-top: -24px; }

.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next,
.lightbox.is-single .lightbox__count {
  display: none;
}

@media (max-width: 767.98px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 12px;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------
   7. Group page (index.html) — logo hover / focus crossfades the photo
   on the right; first-visit preloader (≤800 ms).
------------------------------------------------------------------- */
.group-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;          /* each panel shows only its own slice of the photo */
  pointer-events: none;
}

.group-stage__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--motion-ease);
}

.group-stage__img.is-active {
  opacity: 1;
}

/* while one hotel is previewed, only its logo card stays in front */
.intro-hotel-slider .hotel-logo {
  transition: opacity .6s var(--motion-ease), transform .6s var(--motion-ease);
}

.intro-hotel-slider.is-previewing .hotel-logo:not(.is-preview) {
  opacity: .2;
}

.intro-hotel-slider.is-previewing .hotel-logo.is-preview {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .intro-hotel-slider .hotel-logo { transition: none; }
  .intro-hotel-slider.is-previewing .hotel-logo.is-preview { transform: none; }
}

/* The preloader and the hidden intro exist only while html.preloading is set
   (first visit in the tab, by the inline script in <head>). Without JS, or on
   later visits, the page is shown straight away. The 1.5 s fallback hides the
   preloader even if motion.js never runs. */
#preloader {
  display: none;
}

html.preloading #preloader {
  display: flex;
  animation: preloaderFallback 0s linear 3s forwards;
}

#preloader.is-leaving {
  opacity: 0;
  transform: none;
  transition: opacity .4s var(--motion-ease);
}

.intro-section {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}

html.preloading .intro-section:not(.loaded) {
  opacity: 0;
  transform: translate3d(0, var(--motion-shift), 0);
  animation: introFallback 0s linear 1.5s forwards;
}

/* preloader content: transform / opacity only (the old open-up animated max-width,
   max-height and left) and short enough to finish inside 800 ms */
#preloader .logo {
  max-width: none;
  max-height: none;
  border-left-color: transparent;
  border-right-color: transparent;
}

html.preloading #preloader .logo-icon,
html.preloading #preloader .logo,
html.preloading #preloader .subtitle {
  opacity: 0;
  animation: preloaderIn .5s var(--motion-ease) forwards;
}

html.preloading #preloader .logo     { animation-delay: 80ms; }
html.preloading #preloader .subtitle { animation-delay: 160ms; }

#preloader .loading-line::before {
  left: 0;
  animation: preloaderLine .8s var(--motion-ease) infinite;
}

@keyframes preloaderIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes preloaderLine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

@keyframes preloaderFallback { to { visibility: hidden; opacity: 0; } }
@keyframes introFallback { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------
   8. Reduced motion — no transforms, no animation, everything visible
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-aos],
  .js-motion [data-aos]:not(.aos-animate),
  .js-motion .hero-carousel .hero-caption > *,
  .js-motion .hero-carousel .owl-item.active .hero-caption > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .hero-carousel .owl-item.animated,
  .hero-carousel .hero-slide figure img,
  header,
  header::before,
  header .nav-wrapper,
  header .logo .img-logo,
  nav#hotel-navigation,
  nav#hotel-navigation > ul > li,
  .hotel-card, .feature-card, .facility-item, .restaurant-slider .item,
  .hotel-card img, .feature-card img, .facility-image img, .restaurant-slider .slide-image,
  .btn::before, .btn::after, .contact-submit::before, .contact-submit i, .text-btn i,
  .social-list a::before,
  .lightbox, .lightbox__img, .lightbox__btn, .lightbox__btn::before,
  .group-stage__img,
  #preloader,
  #preloader *,
  #preloader *::before {
    animation: none !important;
    transition: none !important;
  }

  header.is-scrolled,
  header.is-scrolled .nav-wrapper,
  header.is-scrolled .logo .img-logo,
  .hotel-card:hover, .feature-card:hover, .facility-item:hover,
  .hotel-card:has(:focus-visible), .feature-card:has(:focus-visible), .facility-item:has(:focus-visible),
  .hotel-card:hover img, .feature-card:hover img, .facility-item:hover .facility-image img,
  .restaurant-slider .item:hover .slide-image,
  .btn:hover::after, .btn:focus-visible::after,
  .contact-submit:hover i, .text-btn:hover i,
  .page-breadcrumb--photo::before,
  .about-media {
    transform: none !important;
  }

  /* the fill still shows the state change, just without movement */
  .btn:hover::before,
  .btn:focus-visible::before,
  .contact-submit:hover::before,
  .contact-submit:focus-visible::before {
    transform: none !important;
  }

  .hero-progress {
    display: none;
  }

  #preloader .logo-icon,
  #preloader .logo,
  #preloader .subtitle {
    opacity: 1 !important;
    transform: none !important;
  }
}