/* =================================================================
   LIMONS - GLOBAL MOTION DESIGN SYSTEM
   Premium, cohesive animation language for the entire website.
   ================================================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Timing */
  --mo-fast: 180ms;
  --mo-mid: 320ms;
  --mo-slow: 600ms;
  --mo-reveal: 800ms;
  --mo-hero: 1100ms;

  /* Easing */
  --mo-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mo-ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --mo-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mo-ease-entrance: cubic-bezier(.22, .61, .36, 1);

  /* Distances */
  --mo-lift-sm: -4px;
  --mo-lift-md: -6px;
  --mo-slide-up: 32px;
  --mo-slide-up-sm: 18px;
}

/* =================================================================
   1. PAGE LOAD - smooth body entrance
   ================================================================= */
body:not(.mo-no-body-fade) {
  opacity: 0;
  animation: moBodyIn .7s var(--mo-ease-entrance) .05s forwards;
}
@keyframes moBodyIn {
  to { opacity: 1; }
}

/* =================================================================
   2. SCROLL PROGRESS BAR
   ================================================================= */
.mo-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #ff5361, #ea2b64, #f6a2aa);
  z-index: 9999;
  pointer-events: none;
  transition: width 60ms linear;
  box-shadow: 0 0 8px rgba(255, 83, 97, .45);
}

/* =================================================================
   3. SCROLL REVEAL SYSTEM
   One consistent vocabulary: .mo-reveal + optional modifiers
   ================================================================= */

/* Base: fade + translate up */
.mo-reveal {
  opacity: 0;
  transform: translateY(var(--mo-slide-up));
  transition:
    opacity var(--mo-reveal) var(--mo-ease-entrance),
    transform var(--mo-reveal) var(--mo-ease-entrance);
  will-change: opacity, transform;
}
.mo-reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Variant: fade only */
.mo-fade {
  opacity: 0;
  transition: opacity var(--mo-reveal) var(--mo-ease-entrance);
}
.mo-fade.in { opacity: 1; }

/* Variant: scale in */
.mo-scale {
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity var(--mo-reveal) var(--mo-ease-entrance),
    transform var(--mo-reveal) var(--mo-ease-entrance);
}
.mo-scale.in { opacity: 1; transform: scale(1); }

/* Variant: slide from left */
.mo-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--mo-reveal) var(--mo-ease-entrance),
    transform var(--mo-reveal) var(--mo-ease-entrance);
}
.mo-from-left.in { opacity: 1; transform: translateX(0); }

/* Variant: slide from right */
.mo-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--mo-reveal) var(--mo-ease-entrance),
    transform var(--mo-reveal) var(--mo-ease-entrance);
}
.mo-from-right.in { opacity: 1; transform: translateX(0); }

/* Stagger delays - applied to children */
.mo-s1 { transition-delay: 0ms !important; }
.mo-s2 { transition-delay: 80ms !important; }
.mo-s3 { transition-delay: 160ms !important; }
.mo-s4 { transition-delay: 240ms !important; }
.mo-s5 { transition-delay: 320ms !important; }
.mo-s6 { transition-delay: 400ms !important; }
.mo-s7 { transition-delay: 480ms !important; }
.mo-s8 { transition-delay: 560ms !important; }

/* =================================================================
   4. NAVBAR SCROLL BEHAVIOR
   ================================================================= */
.mo-navbar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 10px clamp(20px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    background var(--mo-mid) var(--mo-ease-smooth),
    box-shadow var(--mo-mid) var(--mo-ease-smooth),
    transform var(--mo-mid) var(--mo-ease-smooth),
    backdrop-filter var(--mo-mid) var(--mo-ease-smooth);
  transform: translateY(0);
  background: transparent;
}
.mo-navbar-wrap.scrolled {
  background: rgba(6, 2, 3, .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 83, 97, .1), 0 8px 32px rgba(0, 0, 0, .4);
}
.mo-navbar-wrap.hidden {
  transform: translateY(-110%);
}

/* =================================================================
   5. BUTTON MICRO-INTERACTIONS
   Premium tactile hover / active states
   ================================================================= */
.mo-btn {
  transition:
    transform var(--mo-fast) var(--mo-ease-out),
    box-shadow var(--mo-mid) var(--mo-ease-out),
    background var(--mo-mid) var(--mo-ease-smooth),
    border-color var(--mo-mid) var(--mo-ease-smooth) !important;
}
.mo-btn:hover {
  transform: translateY(var(--mo-lift-sm)) !important;
}
.mo-btn:active {
  transform: translateY(0) scale(.97) !important;
  transition-duration: 80ms !important;
}

/* =================================================================
   6. CARD HOVER EFFECTS - Premium, modern, intentional
   ================================================================= */
.mo-card {
  transition:
    transform var(--mo-mid) var(--mo-ease-out),
    box-shadow var(--mo-mid) var(--mo-ease-out),
    border-color var(--mo-mid) var(--mo-ease-out);
}
.mo-card:hover {
  transform: translateY(var(--mo-lift-md));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 30px rgba(255, 83, 97, .08);
}

/* Card with image zoom */
.mo-card-img {
  overflow: hidden;
  border-radius: inherit;
}
.mo-card-img img {
  transition: transform var(--mo-slow) var(--mo-ease-out);
}
.mo-card:hover .mo-card-img img,
.mo-card-img:hover img {
  transform: scale(1.04);
}

/* Card icon animation */
.mo-card:hover .mo-icon-rotate {
  transform: rotate(6deg) scale(1.08);
  transition: transform var(--mo-mid) var(--mo-ease-spring);
}
.mo-icon-rotate {
  transition: transform var(--mo-mid) var(--mo-ease-out);
}

/* =================================================================
   7. LINK UNDERLINE ANIMATION
   ================================================================= */
.mo-underline {
  position: relative;
  display: inline-block;
}
.mo-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #ff5361, #ea2b64);
  transition: width var(--mo-mid) var(--mo-ease-out);
}
.mo-underline:hover::after {
  width: 100%;
}

/* =================================================================
   8. FLOATING MOCKUP ANIMATION
   Subtle, continuous, elegant float
   ================================================================= */
@keyframes moFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes moFloatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-8px) rotate(.4deg); }
  66%      { transform: translateY(-4px) rotate(-.3deg); }
}
.mo-float {
  animation: moFloat 5s var(--mo-ease-smooth) infinite;
}
.mo-float-slow {
  animation: moFloatSlow 7s var(--mo-ease-smooth) infinite;
}
.mo-float-delayed {
  animation: moFloat 5.5s var(--mo-ease-smooth) 1s infinite;
}

/* =================================================================
   9. TEXT SCROLL-REVEAL (grey → white on scroll)
   Words start grey, become white as you scroll through them
   ================================================================= */
.mo-text-reveal {
  color: rgba(255, 255, 255, .2);
  transition: none;
}
.mo-text-reveal .mo-word {
  display: inline;
  color: rgba(255, 255, 255, .2);
  transition: color .35s var(--mo-ease-smooth);
}
.mo-text-reveal .mo-word.lit {
  color: #fff;
}

/* =================================================================
   10. FEATURE NOTE CARDS - Remove numbering, add premium hover
   ================================================================= */
.mo-note {
  transition:
    transform var(--mo-mid) var(--mo-ease-out),
    border-color var(--mo-mid) var(--mo-ease-smooth),
    box-shadow var(--mo-mid) var(--mo-ease-smooth);
}
.mo-note:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 83, 97, .35);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 28px rgba(255, 83, 97, .15);
}

/* =================================================================
   11. IMAGE REVEAL - subtle mask/fade
   ================================================================= */
.mo-img-reveal {
  opacity: 0;
  transform: scale(.97);
  transition:
    opacity var(--mo-hero) var(--mo-ease-entrance),
    transform var(--mo-hero) var(--mo-ease-entrance);
}
.mo-img-reveal.in {
  opacity: 1;
  transform: scale(1);
}

/* =================================================================
   12. PAGE TRANSITION OVERLAY
   ================================================================= */
.mo-page-transition {
  position: fixed;
  inset: 0;
  background: #060203;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--mo-ease-smooth);
}
.mo-page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* =================================================================
   13. SECTION DIVIDER - Subtle gradient transitions between sections
   ================================================================= */
.mo-section-glow {
  position: relative;
}
.mo-section-glow::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 83, 97, .15), transparent);
  pointer-events: none;
}

/* =================================================================
   14. FORM INPUT INTERACTIONS
   ================================================================= */
.mo-input {
  transition:
    border-color var(--mo-fast) var(--mo-ease-smooth),
    box-shadow var(--mo-mid) var(--mo-ease-smooth),
    background var(--mo-fast) var(--mo-ease-smooth) !important;
}
.mo-input:focus {
  border-color: #ff5361 !important;
  box-shadow: 0 0 0 3px rgba(255, 83, 97, .12), 0 0 20px rgba(255, 83, 97, .2) !important;
}

/* =================================================================
   15. FOOTER STAGGER REVEAL
   ================================================================= */
.mo-footer-col {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--mo-reveal) var(--mo-ease-entrance),
    transform var(--mo-reveal) var(--mo-ease-entrance);
}
.mo-footer-col.in {
  opacity: 1;
  transform: none;
}

/* =================================================================
   16. EU BADGE & BRAND STRIP - subtle entrance
   ================================================================= */
.mo-badge {
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition:
    opacity var(--mo-slow) var(--mo-ease-entrance),
    transform var(--mo-slow) var(--mo-ease-entrance);
}
.mo-badge.in {
  opacity: 1;
  transform: none;
}

/* Brand logos stagger */
.mo-brand-logo {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--mo-slow) var(--mo-ease-entrance),
    transform var(--mo-slow) var(--mo-ease-entrance);
}
.mo-brand-logo.in {
  opacity: 1;
  transform: none;
}
.mo-brand-logo:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
  transition: transform var(--mo-fast) var(--mo-ease-out), filter var(--mo-fast);
}

/* =================================================================
   17. DASHBOARD POINTS - stagger animation
   ================================================================= */
.mo-dash-point {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--mo-slow) var(--mo-ease-entrance),
    transform var(--mo-slow) var(--mo-ease-entrance);
}
.mo-dash-point.in {
  opacity: 1;
  transform: none;
}

/* =================================================================
   18. CTA BAND - Special emphasis reveal
   ================================================================= */
.mo-cta-band {
  opacity: 0;
  transform: translateY(40px) scale(.98);
  transition:
    opacity var(--mo-hero) var(--mo-ease-entrance),
    transform var(--mo-hero) var(--mo-ease-entrance);
}
.mo-cta-band.in {
  opacity: 1;
  transform: none;
}

/* =================================================================
   19. ACCESSIBILITY - prefers-reduced-motion
   ================================================================= */
@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;
  }
  body:not(.mo-no-body-fade) { opacity: 1; animation: none; }
  .mo-reveal, .mo-fade, .mo-scale,
  .mo-from-left, .mo-from-right,
  .mo-footer-col, .mo-badge, .mo-brand-logo,
  .mo-dash-point, .mo-cta-band, .mo-img-reveal {
    opacity: 1;
    transform: none;
  }
  .mo-float, .mo-float-slow, .mo-float-delayed {
    animation: none;
  }
  .mo-text-reveal, .mo-text-reveal .mo-word {
    color: #fff !important;
  }
}

/* =================================================================
   20. RESPONSIVE - reduce motion intensity on mobile
   ================================================================= */
@media (max-width: 820px) {
  :root {
    --mo-slide-up: 20px;
    --mo-slide-up-sm: 12px;
  }
  .mo-float {
    animation: moFloat 6s var(--mo-ease-smooth) infinite;
  }
  @keyframes moFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }
}

/* =================================================================
   21. FEATURE FIGURE HOVER (images in feature sections)
   ================================================================= */
.feature-figure {
  transition: transform var(--mo-mid) var(--mo-ease-out);
}
.feature-figure:hover {
  transform: scale(1.008);
}
.feature-figure img {
  transition: filter var(--mo-slow) var(--mo-ease-smooth);
}
.feature-figure:hover img {
  filter: drop-shadow(0 40px 65px rgba(0,0,0,.7));
}

/* =================================================================
   22. MOBILE MENU STAGGER
   ================================================================= */
.nav.open .nav-link,
.nav.open .nav-item-dropdown {
  animation: moMenuItemIn .4s var(--mo-ease-out) both;
}
.nav.open .nav-link:nth-child(1),
.nav.open .nav-item-dropdown:nth-child(1) { animation-delay: .05s; }
.nav.open .nav-link:nth-child(2),
.nav.open .nav-item-dropdown:nth-child(2) { animation-delay: .1s; }
.nav.open .nav-link:nth-child(3),
.nav.open .nav-item-dropdown:nth-child(3) { animation-delay: .15s; }
.nav.open .nav-link:nth-child(4),
.nav.open .nav-item-dropdown:nth-child(4) { animation-delay: .2s; }
.nav.open .nav-link:nth-child(5),
.nav.open .nav-item-dropdown:nth-child(5) { animation-delay: .25s; }
.nav.open .nav-link:nth-child(6),
.nav.open .nav-item-dropdown:nth-child(6) { animation-delay: .3s; }
.nav.open .nav-link:nth-child(7) { animation-delay: .35s; }

@keyframes moMenuItemIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =================================================================
   23. MOBILE TOGGLE X ANIMATION
   ================================================================= */
.mobile-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* =================================================================
   24. DROPDOWN ENHANCED - smoother open
   ================================================================= */
.dropdown-menu {
  transition:
    opacity .25s var(--mo-ease-out),
    transform .3s var(--mo-ease-out),
    visibility .25s !important;
}

/* =================================================================
   25. HERO CONTENT ENTRANCE (product pages)
   ================================================================= */
.mo-hero-logo {
  opacity: 0;
  transform: translateY(24px) scale(.94);
  transition:
    opacity .9s var(--mo-ease-entrance) .15s,
    transform .9s var(--mo-ease-entrance) .15s;
}
.mo-hero-logo.in {
  opacity: 1;
  transform: none;
}

.mo-hero-title {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--mo-ease-entrance) .3s,
    transform .9s var(--mo-ease-entrance) .3s;
}
.mo-hero-title.in {
  opacity: 1;
  transform: none;
}

.mo-hero-sub {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .8s var(--mo-ease-entrance) .5s,
    transform .8s var(--mo-ease-entrance) .5s;
}
.mo-hero-sub.in {
  opacity: 1;
  transform: none;
}

.mo-hero-img {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  transition:
    opacity 1.1s var(--mo-ease-entrance) .6s,
    transform 1.1s var(--mo-ease-entrance) .6s;
}
.mo-hero-img.in {
  opacity: 1;
  transform: none;
}

/* =================================================================
   15. LENIS SMOOTH SCROLLING
   ================================================================= */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* =================================================================
   16. PRELOADER (Luxury Brand Intro - No Dashes, Dividers, or AI Artifacts)
   ================================================================= */
.limons-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #060203;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.limons-preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
}

.preloader-ambient-glow {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 43, 100, 0.22) 0%, rgba(104, 2, 2, 0.12) 50%, transparent 72%);
  filter: blur(60px);
  pointer-events: none;
  animation: preloaderPulse 3s ease-in-out infinite alternate;
}

@keyframes preloaderPulse {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.08); opacity: 0.9; }
}

.preloader-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.preloader-brand-title {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-indent: 0;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 22px;
  line-height: 1;
}

.preloader-bar-wrap {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
}

.preloader-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff5361 0%, #ea2b64 100%);
  box-shadow: 0 0 10px rgba(255, 83, 97, 0.8);
  border-radius: 99px;
  transition: width 0.1s linear;
}

.preloader-count {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}