/* =========================================
   SOGNARE YACHTS — EMIL KOWALSKI ANIMATIONS
   Physics-based, purposeful motion
   ========================================= */

/* === EASING TOKENS === */
:root {
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:    cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
}

/* === LENIS SMOOTH SCROLL === */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* === NAV — UNDERLINE HOVER === */
.nav-links a {
  position: relative;
  transition: color 200ms var(--ease-out-expo);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 300ms var(--ease-out-expo);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* === BUTTONS — PREMIUM HOVER === */
.btn {
  transition: color 200ms var(--ease-out-expo),
              border-color 200ms var(--ease-out-expo),
              background 200ms var(--ease-out-expo),
              transform 200ms var(--ease-out-expo),
              box-shadow 200ms var(--ease-out-expo) !important;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 143, 160, 0.2);
}
.btn:active {
  transform: translateY(0);
  transition-duration: 100ms !important;
}

/* === PHOTO STRIP — IMAGE HOVER === */
.photo-strip-grid picture {
  overflow: hidden;
}
.photo-strip-grid img {
  transition: transform 600ms var(--ease-out-expo);
}
.photo-strip-grid picture:hover img {
  transform: scale(1.05);
}

/* === GALLERY — IMAGE HOVER === */
.gallery-grid picture {
  overflow: hidden;
}
.gallery-grid img {
  transition: transform 600ms var(--ease-out-expo);
  cursor: pointer;
}
.gallery-grid picture:hover img {
  transform: scale(1.04);
}

/* === FEATURED IMAGE — OVERFLOW CLIPPING === */
.featured-image-wrap {
  overflow: hidden;
}

/* === USP ITEMS — HOVER LIFT === */
.usp-item {
  transition: transform 300ms var(--ease-out-expo);
}
.usp-item:hover {
  transform: translateY(-4px);
}

/* === SPEC ITEMS — HOVER === */
.spec-item {
  transition: transform 250ms var(--ease-out-expo);
}
.spec-item:hover {
  transform: translateY(-3px);
}

/* === OPTION ITEMS === */
.option-item {
  transition: transform 300ms var(--ease-out-expo),
              box-shadow 300ms var(--ease-out-expo);
}
.option-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* === BUILD STEPS === */
.build-step {
  transition: transform 300ms var(--ease-out-expo);
}
.build-step:hover {
  transform: translateY(-3px);
}

/* === TEAM CARDS === */
.team-item {
  transition: transform 300ms var(--ease-out-expo),
              box-shadow 300ms var(--ease-out-expo);
}
.team-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* === SCROLL INDICATOR — PULSE === */
.hero-scroll-line {
  animation: scrollPulse 2s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%       { transform: scaleY(0.6); opacity: 0.5; }
}

/* === HERO PARALLAX CONTAINER === */
.hero-video {
  will-change: transform;
}

/* === MARQUEE — PAUSE ON HOVER === */
.marquee-strip:hover .marquee-track {
  animation-play-state: paused;
}

/* === PAGE TRANSITION === */
body {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
}
body.loaded {
  opacity: 1;
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-scroll-line {
    animation: none !important;
  }
}