/* ============================================================
   Season Hive — Motion System
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration: 0.95s;
  --motion-duration-slow: 1.35s;
  --motion-stagger: 0.11s;
}

/* ---------- Reduced motion ---------- */
html.motion-reduce *,
html.motion-reduce *::before,
html.motion-reduce *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.motion-reduce [data-reveal],
html.motion-reduce [data-motion],
html.motion-reduce [data-stagger] > *,
html.motion-reduce .hero-motion-item,
html.motion-reduce .prop-hero-motion-item {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---------- Scroll reveals ---------- */
html.motion-ready [data-reveal],
html.motion-ready [data-motion] {
  opacity: 0;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease),
    filter var(--motion-duration) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.motion-ready [data-reveal]:not([data-motion]),
html.motion-ready [data-motion="fade-up"] {
  transform: translateY(28px);
  filter: blur(6px);
}

html.motion-ready [data-motion="fade"] {
  transform: none;
  filter: blur(4px);
}

html.motion-ready [data-motion="slide-left"] {
  transform: translateX(-36px);
  filter: blur(4px);
}

html.motion-ready [data-motion="slide-right"] {
  transform: translateX(36px);
  filter: blur(4px);
}

html.motion-ready [data-motion="zoom"] {
  transform: scale(0.94);
  filter: blur(8px);
}

html.motion-ready [data-reveal].is-visible,
html.motion-ready [data-motion].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Legacy delay attrs */
html.motion-ready [data-reveal-delay="100"] { --motion-delay: 100ms; }
html.motion-ready [data-reveal-delay="150"] { --motion-delay: 150ms; }
html.motion-ready [data-reveal-delay="200"] { --motion-delay: 200ms; }
html.motion-ready [data-reveal-delay="300"] { --motion-delay: 300ms; }

/* ---------- Stagger groups ---------- */
html.motion-ready [data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease),
    filter var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--motion-i, 0) * var(--motion-stagger));
}

html.motion-ready [data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
  filter: none;
}

html.motion-ready [data-stagger] > .stats__divider {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ---------- Hero entrance ---------- */
html.motion-ready .hero__bg-img {
  transform: scale(1.1);
  animation: heroKenBurns 2.2s var(--motion-ease-out) forwards;
}

@keyframes heroKenBurns {
  to { transform: scale(1.05); }
}

html.motion-ready .hero__content {
  opacity: 1;
  transform: none;
}

html.motion-ready .hero-motion-item {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(8px);
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease),
    transform var(--motion-duration-slow) var(--motion-ease),
    filter var(--motion-duration-slow) var(--motion-ease);
  transition-delay: var(--hero-delay, 0ms);
}

html.motion-ready .hero__content.is-animated .hero-motion-item {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Navigation entrance ---------- */
html.motion-ready .nav {
  transform: translateY(-100%);
  transition: transform 0.9s var(--motion-ease), background 0.4s ease, box-shadow 0.4s ease;
}

html.motion-ready .nav.nav-is-visible {
  transform: translateY(0);
}

html.motion-ready .nav.scrolled {
  transform: translateY(0);
}

/* ---------- Property hero ---------- */
html.motion-ready .prop-hero__bg img {
  transform: scale(1.08);
  animation: heroKenBurns 2s var(--motion-ease-out) forwards;
}

html.motion-ready .prop-hero-motion-item {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 1s var(--motion-ease),
    transform 1s var(--motion-ease),
    filter 1s var(--motion-ease);
  transition-delay: var(--hero-delay, 0ms);
}

html.motion-ready .prop-hero__content.is-animated .prop-hero-motion-item {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- Marquee ---------- */
html.motion-ready .marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- Lightbox ---------- */
.lightbox {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--motion-ease), visibility 0.45s;
}

.lightbox.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.lightbox.is-open:not(.is-ready) .lightbox__img {
  opacity: 0;
}

.lightbox.is-open.is-ready .lightbox__img {
  opacity: 1;
  transition: opacity 0.4s var(--motion-ease);
}

/* Navigatie: alleen korte fade, geen zoom */
.lightbox__img.is-fading {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  opacity: 0;
  transition: opacity 0.3s ease 0.1s, background 0.2s, border-color 0.2s, transform 0.2s;
}

.lightbox.is-open.is-ready .lightbox__close,
.lightbox.is-open.is-ready .lightbox__prev,
.lightbox.is-open.is-ready .lightbox__next {
  opacity: 1;
}

/* ---------- Card & gallery hover (refined) ---------- */
/* prop-card hover: see style.css */

html.motion-ready .gallery__item {
  transition: transform 0.5s var(--motion-ease);
}

html.motion-ready .gallery__item img {
  transition: transform 0.85s var(--motion-ease);
}

/* ---------- Sidebar (property) ---------- */
html.motion-ready .prop-sidebar__card {
  transition: transform 0.6s var(--motion-ease), box-shadow 0.6s var(--motion-ease);
}

html.motion-ready .prop-sidebar__card.is-visible {
  animation: sidebarSettle 0.8s var(--motion-ease) both;
}

@keyframes sidebarSettle {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Buttons & float ---------- */
html.motion-ready .btn {
  transition:
    transform 0.4s var(--motion-ease),
    box-shadow 0.4s var(--motion-ease),
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

html.motion-ready .btn:hover {
  transform: translateY(-2px);
}

html.motion-ready .btn:active {
  transform: translateY(0) scale(0.98);
}

html.motion-ready .whatsapp-float {
  animation: floatPulse 3s ease-in-out infinite;
}

@keyframes floatPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}