/* ==========================================================================
   Sonic Slider — reusable Apple-style gallery slider (Embla engine)
   --------------------------------------------------------------------------
   Embla Carousel is HEADLESS: its JS handles the track (loop, peek, drag),
   but the layout + all visuals are ours. This file owns the looks — slide
   cards, captions, and the custom nav control (dots pill + play/pause),
   which js/sonic-slider.js drives via Embla's API.

   `!important` is used on the two control buttons ONLY, to defeat the host
   theme's (Elementor) global <button> styles that otherwise paint them pink
   and add padding that shrinks the icons.
   ========================================================================== */

.sonic-slider {
  --ss-radius: 22px;                            /* slide corner radius      */
  --ss-slide-w: 84%;                            /* active card width; the    */
                                                /* remainder is the peek     */
  --ss-gap: 14px;                               /* space between slides      */
  --ss-edge: 16px;                              /* left inset (right is flush)*/
  --ss-slide-aspect: 17 / 25;                   /* taller portrait (~0.68)   */
  --ss-control-h: 46px;                         /* nav pill / button height  */
  --ss-control-bg: rgba(44, 44, 49, 0.72);      /* ~#2c2c31, glassy          */
  --ss-nav-gap: 18px;                           /* pill -> button gap (must be */
                                                /* > the goo reach so they're  */
                                                /* separate at rest)           */
  --ss-goo-bg: #2c2c31;                         /* SOLID (goo threshold makes */
                                                /* it opaque anyway)          */
  /* Final glassmorphism surface — cross-fades in over the goo at the end of  */
  /* the birth (the goo can't be glass: backdrop-filter dies in an SVG filter)*/
  /* The settled surface (both nav controllers): a TRANSPARENT, blurred pane with
     a relative darkness — NOT a solid pill. The birth still enters as full solid
     colour (the goo) and cross-fades to THIS. */
  --ss-glass-bg: rgba(38, 38, 44, 0.42);        /* transparent, relatively dark */
  --ss-glass-blur: blur(20px) saturate(1.7);
  --ss-glass-border: rgba(160, 160, 172, 0.18); /* thin grey frame — barely perceptible; NO shadow */
  --ss-dot: #cfced2;
  --ss-dot-size: 7px;
  --ss-dot-gap: 11px;
  --ss-dot-active-w: 24px;

  position: relative;
  width: 100%;
}
.sonic-slider *,
.sonic-slider *::before,
.sonic-slider *::after { box-sizing: border-box; }

/* --- Slides (Embla viewport > container > slides) ------------------------
   We own the layout CSS; Embla's JS handles the transform / drag / loop. */
.sonic-slider__viewport {
  width: 100%;
  overflow: hidden;
  /* Leading inset for the active card; the trailing edge stays flush so the
     next slide peeks to the screen edge. Logical (`inline-start`) so it
     flips for RTL. CSS keeps Embla's init clean (a function `align`
     returning px broke it). */
  padding-inline-start: var(--ss-edge);
}
.sonic-slider__track {
  display: flex;
  touch-action: pan-y;                          /* let vertical scroll pass  */
}

.sonic-slider__slide {
  position: relative;
  flex: 0 0 var(--ss-slide-w);
  min-width: 0;
  /* Spacing via margin (NOT flex gap) so the gap is preserved across Embla's
     loop seam; logical so it flips for RTL. */
  margin-inline-end: var(--ss-gap);
  height: auto;                                 /* aspect-ratio sets height  */
  aspect-ratio: var(--ss-slide-aspect);
  border-radius: var(--ss-radius);
  overflow: hidden;
  background: #0c0c0e;                           /* placeholder until video   */
  isolation: isolate;
}
.sonic-slider__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Poster overlay — same box as the video (object-fit:cover), shown until the
   clip is actually PLAYING, then cross-faded out. This replaces the flaky iOS
   native poster->video swap (which flashed a frame). The <img> follows the
   <video> in the DOM with no z-index, so it sits ABOVE the video but BELOW the
   bottom scrim (::before, z-index 1) and the caption (z-index 2). */
.sonic-slider__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.sonic-slider__slide.is-playing .sonic-slider__poster { opacity: 0; }
/* Caption + soft top scrim for legibility over bright footage. */
.sonic-slider__slide::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;                 /* scrim at the BOTTOM (text lives there) */
  height: 55%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent);
  z-index: 1;
  pointer-events: none;
}
/* Shop cards are white-bg product shots with their own title/button — NO scrim
   (the client did not want the black gradient at the bottom). */
.sonic-slider__slide--shop::before { content: none; }
.sonic-slider__caption {
  position: absolute;
  bottom: clamp(1.4rem, 5vw, 2.4rem); /* anchored to the bottom of the card */
  left: clamp(0.9rem, 5vw, 2.2rem);
  right: clamp(0.9rem, 5vw, 2.2rem);
  z-index: 2;
  text-align: center;
}
.sonic-slider__caption-title {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.3;
  text-wrap: balance;                /* even lines, no lone word */
}
.sonic-slider__caption-sub {
  margin: 0.55em 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.7vw, 1.05rem);
  line-height: 1.45;
  text-wrap: balance;                /* balances instead of orphaning "range" */
}

/* --- Caption reveal — Apple-style fade + slide from the start side ---------
   Hidden until the slide is the current/active one (JS sets .is-current on the
   slide). Title leads, sub follows (stagger). RTL enters from the right. */
.sonic-slider__caption-title,
.sonic-slider__caption-sub {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[dir="rtl"] .sonic-slider__caption-title,
[dir="rtl"] .sonic-slider__caption-sub {
  transform: translateX(26px);
}
.sonic-slider__slide.is-current .sonic-slider__caption-title,
.sonic-slider__slide.is-current .sonic-slider__caption-sub {
  opacity: 1;
  transform: none;
}
.sonic-slider__slide.is-current .sonic-slider__caption-title { transition-delay: 0.12s; }
.sonic-slider__slide.is-current .sonic-slider__caption-sub   { transition-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
  .sonic-slider__caption-title,
  .sonic-slider__caption-sub {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Nav control: goo (metaball) layer + content layer -------------------
   Sticky-bottom: the control pins to the viewport bottom and "leads" the
   slides in, then un-pins and docks just below the cards once the section's
   bottom scrolls into view. Requires a host section taller than the viewport
   and NO `overflow: hidden | clip | auto` on any ancestor (it kills sticky).
   `position: relative` is still the fallback for hosts that don't set that up. */
.sonic-slider__nav {
  position: sticky;
  bottom: calc(18px + env(safe-area-inset-bottom));   /* the pin line above the Safari toolbar */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--ss-nav-gap);
  width: fit-content;
  margin: clamp(16px, 3vh, 28px) auto 0;
}

/* Goo layer — solid shapes; the SVG #ss-goo filter melts/splits them. */
.sonic-slider__goo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#ss-goo);
}
.sonic-slider__goo-pill,
.sonic-slider__goo-btn {
  position: absolute;
  top: 0;
  height: var(--ss-control-h);
  background: var(--ss-goo-bg);     /* JS sets left/width to match content */
  border-radius: 999px;
}

/* Glass layer — the SAME pill + button as a glassmorphism surface. Sits BEHIND
   the goo (z-index:-1) so it is always blurring the CARD, not the goo. The birth
   simply fades the goo OUT to REVEAL this blur gradually (no "pop"). Below the
   content; layoutGoo positions these too. */
.sonic-slider__glass {
  position: absolute;
  inset: 0;
  z-index: -1;                      /* behind the goo — revealed as the goo fades */
  pointer-events: none;
  opacity: 0;                       /* JS sets to 1 (hidden behind the solid goo) */
}
.sonic-slider__glass-pill,
.sonic-slider__glass-btn {
  position: absolute;
  top: 0;
  height: var(--ss-control-h);
  border-radius: 999px;
  background: var(--ss-glass-bg);   /* JS sets left/width to match content */
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
  /* The defining cue: a thin, UNIFORM grey frame (border-box so the 1px doesn't
     resize the JS-measured pill). NO box-shadow / drop-shadow anywhere. */
  border: 1px solid var(--ss-glass-border);
}

/* Content layer — segments (over the pill) + play/pause (over the btn). */
.sonic-slider__dots {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--ss-dot-gap);
  height: var(--ss-control-h);
  padding: 0 16px;
}
.sonic-slider__seg,
.sonic-slider__seg:hover,
.sonic-slider__seg:focus,
.sonic-slider__seg:focus-visible,
.sonic-slider__seg:active {
  appearance: none;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  width: var(--ss-dot-size);
  height: var(--ss-dot-size);
  min-height: 0 !important;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(207, 206, 210, 0.32) !important;  /* dim track; beats Elementor */
  box-shadow: none !important;
  outline: none !important;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sonic-slider__seg.is-active { width: var(--ss-dot-active-w); }
/* While the JS measures the goo layout at init, the active segment must be at
   its FINAL width instantly (no transition) — otherwise the pill/button are
   sized to the collapsed dots and the segments overflow / the icon sits
   outside its circle. */
.sonic-slider.ss-measuring .sonic-slider__seg { transition: none !important; }
.sonic-slider__seg-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ss-dot);
  transform: scaleX(0);
  transform-origin: left center;
}

.sonic-slider__playpause,
.sonic-slider__playpause:hover,
.sonic-slider__playpause:focus,
.sonic-slider__playpause:focus-visible,
.sonic-slider__playpause:active {
  appearance: none;
  border: 0 !important;
  padding: 0 !important;          /* Elementor padding shrank the icon */
  margin: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--ss-control-h);
  height: var(--ss-control-h);
  min-height: 0 !important;
  border-radius: 999px;
  background: transparent !important;   /* the goo-btn shape is the bg */
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sonic-slider__playpause svg { width: 58%; height: 58%; display: block; fill: currentColor; }
.sonic-slider__playpause .ss-ico-play  { display: none; }
.sonic-slider__playpause .ss-ico-pause { display: block; }
.sonic-slider.is-paused .sonic-slider__playpause .ss-ico-play  { display: block; }
.sonic-slider.is-paused .sonic-slider__playpause .ss-ico-pause { display: none; }

/* Hide the nav until the one-time entrance reveals it. */
.sonic-slider.ss-pre-entrance .sonic-slider__nav { visibility: hidden; }

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 768px) {
  .sonic-slider {
    --ss-slide-w: 62%;                          /* smaller card, more peek   */
    --ss-slide-aspect: 16 / 10;                 /* wider landscape on desktop*/
    --ss-control-h: 50px;
  }

  /* SHOP cards on desktop: show ~3–4 portrait cards at once (was 1.5 huge
     landscape cards that cropped the product shots and made the title/button
     float far apart). Smaller + portrait = comfortable, never stretched.
     `contain` + the products' own #cfced3 backdrop means NO image is ever
     cropped — any letterbox blends seamlessly into the card. Mobile is left
     exactly as-is (this whole block is desktop-only). */
  .sonic-slider--shop {
    --ss-slide-w: 30%;
    --ss-slide-aspect: 794 / 1084;              /* the EXACT product-image ratio
                                                   (all cards are 794×1084) → fills
                                                   perfectly, zero crop, zero bar */
  }
  .sonic-slider--shop .sonic-slider__slide { background: #cfced3; }
  .sonic-slider--shop .sonic-slider__img {
    object-fit: contain;                        /* never crop the product shot;   */
    background: #cfced3;                         /* any stray edge blends into bg  */
  }
}

/* ==========================================================================
   --shop VARIATION — image cards (the WHOLE card is a link) with a title at the
   top and a "Shop …" pill at the bottom (Perlisten Section 4). The nav runs the
   same goo→glass birth as the Technology slider (played by the host on tab
   activation), so no goo/glass opacity overrides here.
   ========================================================================== */
.sonic-slider__slide--shop {
  display: block;                       /* it's an <a> — keep the slide box model */
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.sonic-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card head — top-centre block holding the title + (optional) sub-line. */
.sonic-slider__card-head {
  position: absolute;
  top: 6%;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 1rem;
  text-align: center;
}

/* Card title — BLACK (the card images have white/#cfced3 backgrounds), LARGER
   than the button, light weight (600 read too heavy). No text-shadow. */
.sonic-slider__card-title {
  margin: 0;
  color: #000;
  font-weight: 400;
  font-size: clamp(1.2rem, 3.2vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
  /* Entrance — fade in from the START side (left in LTR, right in RTL), revealed
     when the card is current (.is-current, mobile) / in view (.is-inview, desktop). */
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Card sub-line — a short series tagline under the title: a touch SMALLER and
   LIGHTER (greyer) than the title. Same entrance, slightly later. */
.sonic-slider__card-sub {
  margin: 0.4em 0 0;
  color: rgba(0, 0, 0, 0.58);
  font-weight: 400;
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  line-height: 1.35;
  text-wrap: balance;
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[dir="rtl"] .sonic-slider__card-title,
[dir="rtl"] .sonic-slider__card-sub { transform: translateX(26px); }

.sonic-slider__slide--shop.is-current .sonic-slider__card-title,
.sonic-slider__slide--shop.is-current .sonic-slider__card-sub {
  opacity: 1;
  transform: none;
}
.sonic-slider__slide--shop.is-current .sonic-slider__card-title { transition-delay: 0.1s; }
.sonic-slider__slide--shop.is-current .sonic-slider__card-sub   { transition-delay: 0.2s; }

/* Fully-rounded "Shop …" pill pinned ~5% above the card's bottom edge.
   #252525 pill with #ececec text (sits on the white-background card image). */
.sonic-slider__shop-btn {
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  padding: 0.72rem 1.7rem;
  background: #252525;
  color: #ececec;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 400;                     /* same weight as the card title (was 500 — too heavy) */
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;                 /* fully rounded — NO box-shadow */
  /* Entrance — FADE IN UP (keeps the translateX(-50%) centring), after the title. */
  opacity: 0;
  transform: translateX(-50%) translateY(18px);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
  will-change: opacity, transform;
}
.sonic-slider__slide--shop.is-current .sonic-slider__shop-btn {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.22s;
}
.sonic-slider__slide--shop:hover  .sonic-slider__shop-btn { background: #333; }
.sonic-slider__slide--shop:active .sonic-slider__shop-btn { transform: translateX(-50%) translateY(0) scale(0.98); }

/* DESKTOP — reveal the title/button on EVERY in-view card (not just the centred
   one), so all visible cards show their content; each animates in as it scrolls
   into view. Mobile keeps the .is-current behaviour above (single active card). */
@media (min-width: 768px) {
  .sonic-slider__slide--shop.is-inview .sonic-slider__card-title,
  .sonic-slider__slide--shop.is-inview .sonic-slider__card-sub {
    opacity: 1;
    transform: none;
  }
  .sonic-slider__slide--shop.is-inview .sonic-slider__card-title { transition-delay: 0.1s; }
  .sonic-slider__slide--shop.is-inview .sonic-slider__card-sub   { transition-delay: 0.2s; }
  .sonic-slider__slide--shop.is-inview .sonic-slider__shop-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.3s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sonic-slider__card-title,
  .sonic-slider__card-sub  { opacity: 1; transform: none; transition: none; }
  .sonic-slider__shop-btn  { opacity: 1; transform: translateX(-50%); transition: none; }
}

/* --------------------------------------------------------------------------
   LIGHT THEME — `.sonic-slider--light` modifier for light/white backgrounds.
   The --shop cards are already light-native (black titles on light imagery);
   this reskins the NAV control: milky glass pill, light goo, dark dots/icon.
   -------------------------------------------------------------------------- */
.sonic-slider--light {
  --ss-control-bg: rgba(255, 255, 255, 0.72);
  --ss-goo-bg: #e7e7ea;
  --ss-glass-bg: rgba(255, 255, 255, 0.6);
  --ss-glass-blur: blur(20px) saturate(1.4);
  --ss-glass-border: rgba(0, 0, 0, 0.08);
  --ss-dot: #1a1a1a;
}
.sonic-slider--light .sonic-slider__seg,
.sonic-slider--light .sonic-slider__seg:hover,
.sonic-slider--light .sonic-slider__seg:focus,
.sonic-slider--light .sonic-slider__seg:active {
  background: rgba(0, 0, 0, 0.14) !important;    /* dim track on light glass */
}
.sonic-slider--light .sonic-slider__playpause,
.sonic-slider--light .sonic-slider__playpause:hover,
.sonic-slider--light .sonic-slider__playpause:focus,
.sonic-slider--light .sonic-slider__playpause:active {
  color: #1a1a1a !important;
}