/* =================================================================
   Motion & interactive states for the server-rendered site.
   Recreates the original animations (scroll reveals, hero entrance,
   menus, modals, accordion) in plain CSS; styles.css is unchanged.
   ================================================================= */

/* ---------- Scroll reveals ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.9s var(--ease-luxury),
    transform 0.9s var(--ease-luxury);
  transition-delay: var(--d, 0s);
}
.js [data-reveal='right'] {
  transform: translate3d(-24px, 0, 0);
}
.js [data-reveal='left'] {
  transform: translate3d(24px, 0, 0);
}
[dir='rtl'].js [data-reveal='right'],
[dir='rtl'] .js [data-reveal='right'] {
  transform: translate3d(24px, 0, 0);
}
.js [data-reveal='hero'] {
  transform: translate3d(0, 34px, 0);
  transition-duration: 1s;
}
.js [data-reveal='line'] {
  transform: translate3d(0, 26px, 0);
  transition-duration: 0.85s;
}
.js [data-reveal].is-visible,
.reveal-fallback [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ---------- Page & header entrance ---------- */

/* "backwards" (not "both"): once finished, the animation leaves no transform behind.
   A lingering transform would trap the fixed-position popups inside the page. */
main.page {
  animation: jb-page-in 0.4s var(--ease-luxury) backwards;
}
nav.site-nav {
  animation: jb-nav-in 0.7s var(--ease-luxury) backwards;
}
nav.site-nav .nav-links li {
  animation: jb-drop-in 0.65s var(--ease-luxury) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes jb-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes jb-nav-in {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }
}
@keyframes jb-drop-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ---------- Hero ---------- */

/* `scale` animates the entrance; the scroll parallax uses `translate`, so they never clash. */
.hero-bg-img {
  animation: jb-hero-zoom 1.6s var(--ease-luxury) backwards;
}
@keyframes jb-hero-zoom {
  from {
    scale: 1.08;
  }
}
.hero-eyebrow-line {
  animation: jb-line-grow 1.1s var(--ease-luxury) 0.6s backwards;
}
[dir='rtl'] .hero-eyebrow-line {
  transform-origin: right;
}
@keyframes jb-line-grow {
  from {
    transform: scaleX(0);
  }
}

/* ---------- Scroll progress bar ---------- */

.scroll-progress {
  transform: scaleX(var(--progress, 0));
  transition: transform 0.12s linear;
}

/* ---------- Mobile menu items ---------- */

.mobile-menu .menu-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s var(--ease-luxury),
    transform 0.55s var(--ease-luxury);
}
.mobile-menu.open .menu-item {
  opacity: 1;
  transform: none;
  transition-delay: var(--d, 0.08s);
}

/* ---------- Popups that were mounted/unmounted by React ---------- */

.lang-panel[hidden],
.select-panel[hidden],
.date-calendar[hidden],
.confirm-overlay[hidden],
.film-modal-overlay[hidden],
.lightbox[hidden] {
  display: none !important;
}
.lang-panel,
.select-panel,
.date-calendar {
  animation: jb-pop-down 0.24s var(--ease-luxury) both;
}
@keyframes jb-pop-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.confirm-overlay,
.film-modal-overlay,
.lightbox.open {
  animation: jb-fade-in 0.35s ease-out both;
}
.confirm-overlay.is-closing,
.film-modal-overlay.is-closing,
.lightbox.is-closing {
  animation: jb-fade-out 0.28s ease-in both;
}
.confirm-modal,
.film-modal {
  animation: jb-modal-in 0.45s var(--ease-luxury) both;
}
.lightbox.open img {
  animation: jb-modal-in 0.45s var(--ease-luxury) both;
}
@keyframes jb-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes jb-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes jb-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}

/* ---------- FAQ accordion (smooth height without JS measuring) ---------- */

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.45s var(--ease-luxury),
    opacity 0.45s var(--ease-luxury);
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-answer-clip {
  min-height: 0;
  overflow: hidden;
}

/* ---------- Gallery drag ---------- */

.gallery-row.is-dragging {
  cursor: grabbing;
}

/* ---------- Draft preview banner ---------- */

.preview-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 500;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: #3b2c25;
  color: #fbeee6;
  font: 500 13px/1.3 var(--font-sans);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.preview-banner a {
  margin-inline-start: 10px;
  color: #d9a08b;
  text-decoration: underline;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .mobile-menu .menu-item {
    transform: none !important;
    transition-duration: 0.01s !important;
  }
  main.page,
  nav.site-nav,
  nav.site-nav .nav-links li,
  .hero-bg-img,
  .hero-eyebrow-line,
  .lang-panel,
  .select-panel,
  .date-calendar,
  .confirm-overlay,
  .confirm-modal,
  .film-modal-overlay,
  .film-modal,
  .lightbox.open,
  .lightbox.open img {
    animation: none !important;
  }
  .faq-answer {
    transition: none;
  }
}

/* ---------- Fixes for the original stylesheet ---------- */

/* Phones: the header switcher is hidden to save space, but the one inside the menu must show. */
@media (max-width: 700px) {
  .mobile-menu .lang-switcher {
    display: inline-flex;
  }
}
/* The phone-size heading rule for menu links also hit the contact details. */
.mobile-menu .mobile-menu-contact a,
.mobile-menu .mobile-menu-contact span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* ---------- Film popup: one layout for every video ---------- */

/* The popup sizes itself to the video and always fits the screen height. */
.film-modal-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.film-modal,
.film-modal.is-portrait,
.film-modal.is-instagram {
  width: auto;
  max-width: min(940px, calc(100vw - 32px));
  margin: auto;
}
.film-modal-media {
  display: flex;
  justify-content: center;
}
.film-modal-media video,
.film-modal-media .film-embed,
.film-modal.is-portrait .film-embed,
.film-modal.is-instagram .film-embed {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(760px, calc(100vh - 170px));
  max-height: none;
  margin: 0 auto;
}
.film-modal-media video {
  object-fit: contain;
}
/* Vertical videos (uploads, reels, shorts): 9:16 frame */
.film-modal.is-portrait .film-embed,
.film-modal.is-instagram .film-embed,
.film-modal.is-file-portrait video {
  aspect-ratio: 9 / 16;
}
/* Horizontal platform videos (normal YouTube/Facebook): 16:9 frame */
.film-modal:not(.is-portrait):not(.is-instagram) .film-embed {
  aspect-ratio: 16 / 9;
  width: min(880px, calc(100vw - 72px), (100vh - 170px) * 16 / 9);
  height: auto;
}
.film-modal.is-instagram .film-modal-media {
  background: #fff;
}
.film-modal-foot {
  max-width: 100%;
}
@media (max-width: 700px) {
  .film-modal-media video,
  .film-modal-media .film-embed,
  .film-modal.is-portrait .film-embed,
  .film-modal.is-instagram .film-embed {
    height: min(680px, calc(100vh - 150px));
  }
}