/* ==========================================================================
   Motion layer (lot 1) — GSAP / ScrollTrigger / Lenis enhancements.
   Loaded after public.css. Everything here is additive: without JS the page
   renders exactly as before.
   ========================================================================== */

/* ---- Lenis smooth scroll ------------------------------------------------ */
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;
}

/* ---- Elements driven by GSAP must not carry CSS transitions ------------- */
.sy-motion .section_banner .con .img img,
.sy-motion .sy-clip img,
.sy-motion .ba_compare img {
  transition: none;
}

/* Banner and parallax pictures: containers clip the oversized, moving picture */
.sy-motion .section_banner .con .img,
.sy-motion .sy-banner .con,
.sy-motion .sy-parallax {
  overflow: hidden;
}
.sy-motion .section_banner .con .img img,
.sy-motion .sy-banner .con > img,
.sy-motion .sy-banner .con > picture > img,
.sy-motion .sy-parallax img {
  will-change: transform;
  transition: none;
}

/* ---- Split text (word masks) ------------------------------------------- */
.st_w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.st_i {
  display: inline-block;
  will-change: transform;
}
.st_w img {
  vertical-align: middle;
}

/* ---- Clip reveal for pictures ------------------------------------------ */
.sy-clip {
  will-change: clip-path;
}

/* ---- Comparison: before / after slider --------------------------------- */
.ba_compare {
  position: relative;
  overflow: hidden;
  border-radius: 2.6rem;
  aspect-ratio: 2.35 / 1;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  --pos: 50%;
  background-color: #dfe7ef;
}
.ba_compare .ba_img {
  position: absolute;
  inset: 0;
}
.ba_compare .ba_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba_compare .ba_after {
  clip-path: inset(0 0 0 var(--pos));
}
.ba_compare .ba_label {
  position: absolute;
  top: 2.4rem;
  z-index: 3;
  pointer-events: none;
}
.ba_compare .ba_label h3 {
  margin: 0;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  padding: 1.1rem 1.8rem;
  border-radius: 999px;
  background: rgba(12, 42, 56, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}
.ba_compare .ba_label_l {
  left: 2.4rem;
}
.ba_compare .ba_label_r {
  right: 2.4rem;
}
.ba_compare .ba_label_r h3 {
  background: rgba(38, 178, 219, 0.75);
}
.ba_compare .ba_handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  z-index: 4;
}
.ba_compare .ba_handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.ba_compare .ba_grip {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  outline: none;
  transition: transform 0.25s ease;
  cursor: ew-resize;
}
.ba_compare .ba_grip::before,
.ba_compare .ba_grip::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
}
.ba_compare .ba_grip::before {
  border-right: 0.8rem solid var(--secondary);
}
.ba_compare .ba_grip::after {
  border-left: 0.8rem solid var(--secondary);
}
.ba_compare:hover .ba_grip,
.ba_compare.dragging .ba_grip,
.ba_compare .ba_grip:focus-visible {
  transform: translate(-50%, -50%) scale(1.12);
}
.ba_compare .ba_grip:focus-visible {
  box-shadow: 0 0 0 4px rgba(38, 178, 219, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3);
}
.ba_compare .ba_hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: rgba(12, 42, 56, 0.45);
  pointer-events: none;
  transition: opacity 0.4s;
}
.ba_compare.touched .ba_hint {
  opacity: 0;
}
.sy-motion .home_comparison .main .top.ba_replaced,
.sy-motion .product_comparison .main .top.ba_replaced {
  display: none;
}
.sy-motion .home_comparison .main .ba_compare + .list,
.sy-motion .product_comparison .main .ba_compare + .list {
  margin-top: 1rem;
}
/* rows arrive from left / right */
.sy-motion .home_comparison .list .lt,
.sy-motion .product_comparison .list .lt {
  transform: translateX(-3rem);
  transition: all 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sy-motion .home_comparison .list .rt,
.sy-motion .product_comparison .list .rt {
  transform: translateX(3rem);
  transition: all 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sy-motion .home_comparison .list li.active .lt,
.sy-motion .home_comparison .list li.active .rt,
.sy-motion .product_comparison .list li.active .lt,
.sy-motion .product_comparison .list li.active .rt {
  transform: translateX(0);
}

/* ---- Applications: Ken Burns on the active slide + autoplay progress --- */
.sy-motion .home_application .swiper-slide-active .item > .img_cv img {
  animation: sy_kenburns 7s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes sy_kenburns {
  from {
    transform: scale(1.12) translate(1.5%, 1%);
  }
  to {
    transform: scale(1) translate(0, 0);
  }
}
.sy-motion .home_application .nav li {
  position: relative;
  overflow: hidden;
}
.sy-motion .home_application .nav li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  opacity: 0;
}
.sy-motion .home_application .nav li.active::after {
  opacity: 1;
}

/* ---- Sustainability arcs: drawn on scroll ------------------------------ */
.sy-motion .home_sustainability svg .cls-4,
.sy-motion .home_sustainability svg .cls-5,
.sy-motion .home_sustainability svg .cls-6 {
  stroke-linecap: round;
}

/* ---- Magnetic buttons -------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .sy-motion .btn.sy-magnet {
    will-change: transform;
  }
}

/* ---- Ambient drift on decorative blur circles -------------------------- */
.sy-motion .home_principle .bg img,
.sy-motion .home_sustainability .bg1 img,
.sy-motion .home_sustainability .bg2 img,
.sy-motion .home_about .bg img,
.sy-motion .float_cir li {
  animation: sy_drift 14s ease-in-out infinite alternate;
  will-change: transform;
}
.sy-motion .home_sustainability .bg2 img {
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}
@keyframes sy_drift {
  from {
    transform: translate(-3%, -2%) scale(1);
  }
  to {
    transform: translate(3%, 4%) scale(1.08);
  }
}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 768px) {
  .ba_compare {
    aspect-ratio: 16 / 10;
    border-radius: 1.6rem;
  }
  .ba_compare .ba_label {
    top: 1.2rem;
  }
  .ba_compare .ba_label_l {
    left: 1.2rem;
  }
  .ba_compare .ba_label_r {
    right: 1.2rem;
  }
  .ba_compare .ba_label h3 {
    font-size: 1.4rem;
    padding: 0.8rem 1.2rem;
  }
  .ba_compare .ba_grip {
    width: 4.4rem;
    height: 4.4rem;
  }
  .ba_compare .ba_hint {
    display: none;
  }
}

/* magnetic buttons keep their colour transitions but never transition transform */
.sy-motion .btn.sy-magnet {
  transition-property: color, background-color, border-color, box-shadow, opacity, filter;
}

/* ---- "How it works": live particle scene (assets/js/principle-scene.js) --- */
.sy-scene-on .home_principle_swiper .swiper-slide img,
.sy-scene-on .product_works_swiper .swiper-slide .img img {
  opacity: 0 !important;
  transition: none !important;
}
.sy-scene-on .home_principle .rt,
.sy-scene-on .product_works_swiper {
  position: relative;
}
.sy-scene {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  clip-path: inset(-40% -40% -40% 0); /* never draw over the text column on the left */
}
.sy-scene-fx {
  position: absolute;
  pointer-events: none;
}
.sy-scene-grid {
  position: absolute;
  opacity: 0;
  overflow: visible;
}
.sy-scene-p {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.sy-scene-p img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(12, 42, 56, 0.18));
}
.sy-scene-comp {
  opacity: 0;
}
.sy-scene-lines {
  position: absolute;
  right: 100%;
  top: 30%;
  height: 40%;
  width: 28%;
  margin-right: 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: 100% 50%;
}
.sy-scene-lines i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(31, 58, 71, 0), rgba(31, 58, 71, 0.55));
  transform-origin: 100% 50%;
  opacity: 0;
}
.sy-scene-lines i:nth-child(1) { width: 70%; align-self: flex-end; }
.sy-scene-lines i:nth-child(2) { width: 100%; }
.sy-scene-lines i:nth-child(3) { width: 55%; align-self: flex-end; }
.sy-scene-lines i:nth-child(4) { width: 85%; }
/* step indicators follow the scene timing */
.sy-scene-on.home_principle .items .active .line::after {
  height: calc(var(--p, 0) * 100%);
  transition: none;
}
.sy-scene-on.product_works .nav .nav_item.active::after {
  transform: scaleX(var(--p, 0));
  transition: none;
}