/* =========================================================
   Lumeve • Multi-Platform Accessibility
   Scope: .fit-experience  •  Slideshow with themed bg
   Notes:
   - Keeps original ocean, sunrise, violet themes
   - Preserves < and > nav buttons
   - Clean edge fades, smooth motion, mobile safe
========================================================= */

:root {
  --ink-900: #1f1f1f;
  --ink-700: #333333;

  /* ocean theme */
  --ocean-0: #eaf6fb;
  --ocean-1: #cfe8f3;
  --ocean-2: #b5dbee;

  /* sunrise theme */
  --sun-0: #fff4e8;
  --sun-1: #ffe6cc;
  --sun-2: #ffd2a6;
  --brand-blue: #165c7d;
  --btn-blue: #165c7d;
  --btn-blue-hover: #1f6c8d;
  --ring: rgba(22, 92, 125, 0.28);

  --rail-max: 1160px;
  --rail-pad: clamp(16px, 4vw, 40px);

  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fade: 0.6s var(--easing) both;
  --stagger: 0.08s;
}

/* Theme switcher */
.fit-experience {
  --bg-0: var(--ocean-0);
  --bg-1: var(--ocean-1);
  --bg-2: var(--ocean-2);
}
.fit-experience[data-theme="sunrise"] {
  --bg-0: var(--sun-0);
  --bg-1: var(--sun-1);
  --bg-2: var(--sun-2);
}


/* Section container */
.fit-experience {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: var(--rail-pad);
  isolation: isolate;
}

/* Headings and copy */
.fit-experience .label {
  width: 100%;
  max-width: var(--rail-max);
  animation: fxRise var(--fade);
}
.fit-experience .multi-platform-accessibility {
  color: var(--ink-900);
  font-family: "Montserrat";
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
  animation: fxRise var(--fade);
  animation-delay: calc(var(--stagger) * 1);
}
.fit-experience .from-first-tap-to-final-measurement-every-screen-tells-a-story {
  font-family: "Montserrat",;
  font-weight: 600;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.35;
  margin-bottom: 12px;
  animation: fxRise var(--fade);
  animation-delay: calc(var(--stagger) * 2);
}
.fit-experience .designing-a-personalized-fit-experience-means-guiding-users-step-by-step-across-every-device-this-section-showcases-the-core-screens-of-the-app-from-selecting-gender-and-body-shape-to-entering-precise-measurements-each-interface-is-crafted-to-be-intuitive-inclusive-and-responsive-ensuring-users-feel-confident-and-seen-throughout-their-sizing-journey-whether-on-mobile-tablet-or-desktop-the-experience-remains-seamless-and-empowering {
  color: var(--ink-700);
  font-family: "Montserrat",;
  font-weight: 500;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.7;
  max-width: var(--rail-max);
  animation: fxRise var(--fade);
  animation-delay: calc(var(--stagger) * 3);
}

/* =========================================================
   Slideshow shell with themed background and safe edge fades
========================================================= */
.fit-experience .device-gallery {
  width: 100%;
  max-width: var(--rail-max);
  position: relative;
  border-radius: 18px;
  overflow: hidden; /* prevent scrolling artifacts */
  isolation: isolate;

  /* layered themed background */


  padding-block: clamp(6px, 1vw, 12px);
  padding-inline: clamp(10px, 2vw, 18px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05) inset, 0 8px 20px rgba(0, 0, 0, 0.06);
  animation: fxFadeLift 0.6s var(--easing) both;
  animation-delay: calc(var(--stagger) * 4);
}

/* edge fades that do not clip content */
.fit-experience .device-gallery::before,
.fit-experience .device-gallery::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.fit-experience .device-gallery::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-0), rgba(0,0,0,0));
  mix-blend-mode: multiply;
}
.fit-experience .device-gallery::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-0), rgba(0,0,0,0));
  mix-blend-mode: multiply;
}

/* optional one time sheen across chrome, not the image */
.fit-experience .device-gallery > .chrome-sheen {
  position: absolute;
  inset: -2px -30% -2px -30%;
  pointer-events: none;
  z-index: 2;
  transform: translateX(-30%);
  animation: fxSheen 2.2s var(--easing) 0.3s both;
  mix-blend-mode: soft-light;
}

/* Track and slides */
.fit-experience .gallery-rail {
  display: flex;
  will-change: transform;
  transition: transform 0.5s var(--easing);
}
.fit-experience .slide {
  min-width: 100%;
  display: grid;
  place-items: center;
  padding-block: clamp(4px, 0.8vw, 10px);
  transition: opacity 300ms var(--easing), transform 300ms var(--easing);
}
.fit-experience .slide.is-entering { opacity: 0.001; transform: translateY(6px) scale(0.995); }
.fit-experience .slide.is-active   { opacity: 1;     transform: translateY(0)   scale(1); }
.fit-experience .slide.is-leaving  { opacity: 0.001; transform: translateY(-6px) scale(0.995); }

.fit-experience .slide img {
  width: 100%;
  height: auto;
  max-width: 1160px;
  max-height: min(60vh, 560px);
  object-fit: contain;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
  transition: transform 320ms var(--easing), filter 320ms var(--easing);
}
@media (hover: hover) {
  .fit-experience .slide img:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.16));
  }
}

/* =========================================================
   Navigation Buttons  •  keep the < and > feel
========================================================= */
.fit-experience .device-gallery > .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 50px;
  block-size: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #3a95be, var(--btn-blue));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.22s var(--easing), background 0.25s var(--easing), box-shadow 0.25s var(--easing), filter 0.25s var(--easing);
  animation: btnFloat 6s ease-in-out infinite, btnPulse 3s ease-in-out infinite;
  padding: 0;
  line-height: normal;
  outline: none;
  border: none;
}
.fit-experience .device-gallery > .prev { left: clamp(10px, 2vw, 20px); }
.fit-experience .device-gallery > .next { right: clamp(10px, 2vw, 20px); }

/* keep your icons or < > glyphs exactly as before */
.fit-experience .device-gallery > .nav svg {
  width: 22px;
  height: 22px;
  display: block;
}
.fit-experience .device-gallery > .prev svg { transform: translateX(-1px); }
.fit-experience .device-gallery > .next svg { transform: translateX(1px); }

/* hover and active */
@media (hover: hover) {
  .fit-experience .device-gallery > .nav:hover {
    transform: translateY(-50%) scale(1.08);
    background: var(--btn-blue-hover);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  }
  .fit-experience .device-gallery:hover > .prev { transform: translate(-2px, -50%); }
  .fit-experience .device-gallery:hover > .next { transform: translate(2px, -50%); }
}
.fit-experience .device-gallery > .nav:active {
  transform: translateY(-50%) scale(0.96) rotate(-2deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.18) 0 35%, transparent 36% 100%),
    linear-gradient(145deg, #3a95be, var(--btn-blue-hover));
}
.fit-experience .device-gallery > .next:active { transform: translateY(-50%) scale(0.96) rotate(2deg); }

/* Strong keyboard focus */
.fit-experience .device-gallery > .nav:focus-visible {
  box-shadow: 0 0 0 6px var(--ring), 0 0 0 12px rgba(22, 92, 125, 0.12), 0 8px 22px rgba(0,0,0,0.22);
  filter: brightness(1.05);
}

/* Dots */
.fit-experience .dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(8px, 1vw, 12px);
  position: relative;
  z-index: 3;
  animation: fxRise var(--fade);
  animation-delay: calc(var(--stagger) * 5);
}
.fit-experience .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #a7c7d6;
  cursor: pointer;
  transition: transform 0.2s var(--easing), background 0.2s var(--easing), box-shadow 0.2s var(--easing);
  box-shadow: 0 0 0 0 var(--ring);
}
.fit-experience .dot.is-active {
  background: #2b7ea1;
  transform: scale(1.18);
  animation: fxDotBreath 1.8s ease-in-out infinite;
}
.fit-experience .dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px var(--ring);
}

/* Guard */
.fit-experience .labtop {
  width: 100% !important;
  height: auto !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .fit-experience { gap: 22px; }
  .fit-experience .device-gallery > .nav { inline-size: 44px; block-size: 44px; }
  .fit-experience .device-gallery > .nav svg { width: 20px; height: 20px; }
}
@media (max-width: 520px) {
  .fit-experience .device-gallery { padding-inline: 12px; }
  .fit-experience .device-gallery > .nav {
    inline-size: 40px;
    block-size: 40px;
    animation-duration: 6.5s, 2.2s;
  }
}

/* Animations */
@keyframes fxFadeLift {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fxRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes btnFloat {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 4px)); }
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,0.15), 0 0 0 0 rgba(57,143,186,0); }
  50%      { box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 0 10px rgba(57,143,186,0.15); }
}
@keyframes fxDotBreath {
  0%, 100% { transform: scale(1.18); box-shadow: 0 0 0 0 rgba(43,126,161,0); }
  50%      { transform: scale(1.26); box-shadow: 0 0 0 6px rgba(43,126,161,0.18); }
}
@keyframes fxSheen {
  from { transform: translateX(-40%) rotate(0.001deg); opacity: 0.35; }
  70%  { transform: translateX(55%)  rotate(0.001deg); opacity: 0.35; }
  to   { transform: translateX(80%)  rotate(0.001deg); opacity: 0; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  .fit-experience .device-gallery,
  .fit-experience .device-gallery > .chrome-sheen,
  .fit-experience .device-gallery > .nav,
  .fit-experience .dot.is-active,
  .fit-experience .label,
  .fit-experience .multi-platform-accessibility,
  .fit-experience .from-first-tap-to-final-measurement-every-screen-tells-a-story,
  .fit-experience .designing-a-personalized-fit-experience-means-guiding-users-step-by-step-across-every-device-this-section-showcases-the-core-screens-of-the-app-from-selecting-gender-and-body-shape-to-entering-precise-measurements-each-interface-is-crafted-to-be-intuitive-inclusive-and-responsive-ensuring-users-feel-confident-and-seen-throughout-their-sizing-journey-whether-on-mobile-tablet-or-desktop-the-experience-remains-seamless-and-empowering {
    animation: none !important;
  }
}


@media (max-width: 640px) {
  /* Center text content on mobile */
  .fit-experience .label {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .fit-experience .multi-platform-accessibility,
  .fit-experience .from-first-tap-to-final-measurement-every-screen-tells-a-story,
  .fit-experience .designing-a-personalized-fit-experience-means-guiding-users-step-by-step-across-every-device-this-section-showcases-the-core-screens-of-the-app-from-selecting-gender-and-body-shape-to-entering-precise-measurements-each-interface-is-crafted-to-be-intuitive-inclusive-and-responsive-ensuring-users-feel-confident-and-seen-throughout-their-sizing-journey-whether-on-mobile-tablet-or-desktop-the-experience-remains-seamless-and-empowering {
    max-width: 100%;   /* remove max-width constraint */
  }

  /* Optional: shrink long paragraph font size a little */
  .fit-experience .designing-a-personalized-fit-experience-means-guiding-users-step-by-step-across-every-device-this-section-showcases-the-core-screens-of-the-app-from-selecting-gender-and-body-shape-to-entering-precise-measurements-each-interface-is-crafted-to-be-intuitive-inclusive-and-responsive-ensuring-users-feel-confident-and-seen-throughout-their-sizing-journey-whether-on-mobile-tablet-or-desktop-the-experience-remains-seamless-and-empowering {
    font-size: 15px;
    line-height: 1.6;
  }
}


/* Shared fixes for mobile readability */
@media (max-width: 640px) {
  /* Marketing section */
  .section.enhanced .col.copy {
    text-align: center;
    align-items: center;
  }
  .section.enhanced .paragraph {
    max-width: 90%;
    line-height: 1.6;
    margin: 0 auto 18px auto; /* breathing space */
  }
  .section.enhanced .button.cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;                 /* full width */
    padding: 14px 20px;
    border-radius: 10px;
    background-color: #165c7d;
    border: none;
    color: #fff;
  }
  .section.enhanced .button.cta svg { fill: #fff; }
  .section.enhanced .watch-prototyping { color: #fff; font-size: 16px; }

  /* Multi-platform accessibility section */
  .fit-experience .label {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fit-experience .multi-platform-accessibility,
  .fit-experience .from-first-tap-to-final-measurement-every-screen-tells-a-story,
  .fit-experience .designing-a-personalized-fit-experience-means-guiding-users-step-by-step-across-every-device-this-section-showcases-the-core-screens-of-the-app-from-selecting-gender-and-body-shape-to-entering-precise-measurements-each-interface-is-crafted-to-be-intuitive-inclusive-and-responsive-ensuring-users-feel-confident-and-seen-throughout-their-sizing-journey-whether-on-mobile-tablet-or-desktop-the-experience-remains-seamless-and-empowering {
    max-width: 90%;
    margin: 0 auto 16px auto;
    line-height: 1.6;
  }

  /* Extra spacing between sections */
  #marketing {
    margin-bottom: 50px;  /* adjust to taste */
  }
  #fit-experience {
    padding-top: 30px;    /* extra breathing room at top */
  }
}


/* Mobile refinements for the Multi-Platform Accessibility section */
@media (max-width: 640px) {
  /* Extra space around this section */
  #fit-experience.fit-experience {
    margin-top: 28px;
    margin-bottom: 56px;             /* gap before next section */
    padding-block: 24px;
  }

  /* Make the text block look like a tidy card, left aligned */
  #fit-experience .label {
    width: 100%;
    max-width: 92%;
    margin: 0 auto 12px auto;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 20px;
    text-align: left;
    display: block;                  /* override flex centering if any */
  }

  /* Comfortable spacing and readable line length */
  #fit-experience .multi-platform-accessibility {
    margin: 0 0 6px 0;
  }
  #fit-experience .from-first-tap-to-final-measurement-every-screen-tells-a-story {
    margin: 0 0 8px 0;
  }
  #fit-experience .designing-a-personalized-fit-experience-means-guiding-users-step-by-step-across-every-device-this-section-showcases-the-core-screens-of-the-app-from-selecting-gender-and-body-shape-to-entering-precise-measurements-each-interface-is-crafted-to-be-intuitive-inclusive-and-responsive-ensuring-users-feel-confident-and-seen-throughout-their-sizing-journey-whether-on-mobile-tablet-or-desktop-the-experience-remains-seamless-and-empowering {
    line-height: 1.7;
    margin: 0;
  }

  /* Keep the gallery neat under the card */
  #fit-experience .device-gallery {
    border-radius: 16px;
    padding-inline: 12px;
    margin-top: 10px;
  }

  /* Keep dots close to the gallery on mobile */
  #fit-experience .dots {
    margin-top: 10px;
  }
}