/* Baked video crop positions. Desktop first, then mobile overrides. */

.product-reel video,
.story-reel video,
.gallery-main video,
.gallery-thumb video {
  object-position: var(--reel-x, 50%) var(--reel-y, 50%);
}

/* Clip-to-clip glitch + fade for homepage and product story reels.
   Kept in this file; Frame Apply CSS must preserve this block. */
.product-reel,
.story-reel {
  --reel-base-filter: saturate(.7) contrast(1.08) brightness(.84);
}

.product-reel.is-swapping::after,
.product-reel.is-settling::after,
.story-reel.is-swapping::after,
.story-reel.is-settling::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(131, 245, 208, .12), transparent 28%, transparent 72%, rgba(131, 245, 208, .1)),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .05) 2px 3px);
  mix-blend-mode: screen;
  animation: reel-scan-flash .42s steps(3, end);
}

.product-reel.is-swapping video.is-front,
.story-reel.is-swapping video.is-front {
  animation: reel-glitch-out .42s steps(2, end) forwards;
}

.product-reel.is-settling video.is-front,
.story-reel.is-settling video.is-front {
  animation: reel-glitch-in .4s ease-out forwards;
}

@keyframes reel-glitch-out {
  0% {
    opacity: 1;
    filter: var(--reel-base-filter);
    transform: none;
    clip-path: inset(0 0 0 0);
  }
  18% {
    opacity: .88;
    filter: saturate(.25) contrast(1.55) brightness(1.18) hue-rotate(95deg);
    transform: translate3d(1.4%, -.4%, 0) skewX(-1deg);
    clip-path: inset(8% 0 55% 0);
  }
  36% {
    opacity: .5;
    filter: saturate(1.35) contrast(1.35) brightness(.55) hue-rotate(-35deg);
    transform: translate3d(-2%, .6%, 0) skewX(1.1deg);
    clip-path: inset(42% 0 12% 0);
  }
  58% {
    opacity: .22;
    filter: saturate(.4) contrast(1.2) brightness(.7);
    transform: translate3d(.8%, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 0;
    filter: saturate(.7) contrast(1.08) brightness(.35);
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reel-glitch-in {
  0% {
    opacity: 0;
    filter: saturate(.2) contrast(1.5) brightness(1.15) hue-rotate(70deg);
    transform: translate3d(-1.6%, .4%, 0);
  }
  28% {
    opacity: .55;
    filter: saturate(.95) contrast(1.28) brightness(.92) hue-rotate(-25deg);
    transform: translate3d(1.1%, -.3%, 0) skewX(.6deg);
  }
  62% {
    opacity: .88;
    filter: saturate(.55) contrast(1.14) brightness(.8);
    transform: translate3d(-.4%, 0, 0);
  }
  100% {
    opacity: 1;
    filter: var(--reel-base-filter);
    transform: none;
  }
}

@keyframes reel-scan-flash {
  0% { opacity: 0; }
  25% { opacity: .95; }
  55% { opacity: .45; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-reel.is-swapping::after,
  .product-reel.is-settling::after,
  .story-reel.is-swapping::after,
  .story-reel.is-settling::after,
  .product-reel.is-swapping video.is-front,
  .product-reel.is-settling video.is-front,
  .story-reel.is-swapping video.is-front,
  .story-reel.is-settling video.is-front {
    animation: none !important;
  }
}

/* nolee-reel home-object 1 desktop */
[data-reel-frame="home-object"][data-active-clip="1"] {
  --reel-x: 50%;
  --reel-y: 100%;
}
/* nolee-reel home-object 2 desktop */
[data-reel-frame="home-object"][data-active-clip="2"] {
  --reel-x: 50%;
  --reel-y: 76%;
}
/* nolee-reel home-object 3 desktop */
[data-reel-frame="home-object"][data-active-clip="3"] {
  --reel-x: 50%;
  --reel-y: 50%;
}
/* nolee-reel home-object 4 desktop */
[data-reel-frame="home-object"][data-active-clip="4"] {
  --reel-x: 50%;
  --reel-y: 88.8%;
}
/* nolee-reel home-object 6 desktop */
[data-reel-frame="home-object"][data-active-clip="6"] {
  --reel-x: 50%;
  --reel-y: 54.9%;
}
/* nolee-reel home-object 8 desktop */
[data-reel-frame="home-object"][data-active-clip="8"] {
  --reel-x: 50%;
  --reel-y: 69.7%;
}
/* nolee-reel product-story 1 desktop */
[data-reel-frame="product-story"][data-active-clip="1"] {
  --reel-x: 50%;
  --reel-y: 79.3%;
}
/* nolee-reel product-story 3 desktop */
[data-reel-frame="product-story"][data-active-clip="3"] {
  --reel-x: 50%;
  --reel-y: 96.8%;
}
/* nolee-reel product-story 4 desktop */
[data-reel-frame="product-story"][data-active-clip="4"] {
  --reel-x: 50%;
  --reel-y: 70.3%;
}
/* nolee-reel product-story 5 desktop */
[data-reel-frame="product-story"][data-active-clip="5"] {
  --reel-x: 50%;
  --reel-y: 57.9%;
}
/* nolee-reel product-story 6 desktop */
[data-reel-frame="product-story"][data-active-clip="6"] {
  --reel-x: 50%;
  --reel-y: 57.2%;
}
/* nolee-reel product-story 8 desktop */
[data-reel-frame="product-story"][data-active-clip="8"] {
  --reel-x: 50%;
  --reel-y: 64.5%;
}
/* nolee-reel home-object 5 desktop */
[data-reel-frame="home-object"][data-active-clip="5"] {
  --reel-x: 50%;
  --reel-y: 50%;
}
/* nolee-reel home-object 9 desktop */
[data-reel-frame="home-object"][data-active-clip="9"] {
  --reel-x: 50%;
  --reel-y: 69.7%;
}
/* nolee-reel product-story 2 desktop */
[data-reel-frame="product-story"][data-active-clip="2"] {
  --reel-x: 50%;
  --reel-y: 70.3%;
}
/* nolee-reel product-story 9 desktop */
[data-reel-frame="product-story"][data-active-clip="9"] {
  --reel-x: 50%;
  --reel-y: 64.5%;
}
/* nolee-reel product-gallery 5 desktop */
[data-reel-frame="product-gallery"][data-active-clip="5"] {
  --reel-x: 50%;
  --reel-y: 65%;
}
/* nolee-reel product-gallery 4 desktop */
[data-reel-frame="product-gallery"][data-active-clip="4"] {
  --reel-x: 50%;
  --reel-y: 88%;
}
/* nolee-reel product-gallery 7 desktop */
[data-reel-frame="product-gallery"][data-active-clip="7"] {
  --reel-x: 50%;
  --reel-y: 74.2%;
}
/* nolee-reel product-gallery 6 desktop */
[data-reel-frame="product-gallery"][data-active-clip="6"] {
  --reel-x: 50%;
  --reel-y: 80.8%;
}
/* nolee-reel product-gallery 2 desktop */
[data-reel-frame="product-gallery"][data-active-clip="2"] {
  --reel-x: 50%;
  --reel-y: 84.3%;
}
/* nolee-reel product-gallery 3 desktop */
[data-reel-frame="product-gallery"][data-active-clip="3"] {
  --reel-x: 50%;
  --reel-y: 72.8%;
}
/* nolee-reel product-gallery-thumb 2 desktop */
[data-reel-frame="product-gallery-thumb"][data-active-clip="2"] {
  --reel-x: 50%;
  --reel-y: 71.1%;
}
/* nolee-reel product-gallery-thumb 3 desktop */
[data-reel-frame="product-gallery-thumb"][data-active-clip="3"] {
  --reel-x: 50%;
  --reel-y: 62.5%;
}
/* nolee-reel product-gallery-thumb 4 desktop */
[data-reel-frame="product-gallery-thumb"][data-active-clip="4"] {
  --reel-x: 50%;
  --reel-y: 72.7%;
}
/* nolee-reel product-gallery-thumb 1 desktop */
[data-reel-frame="product-gallery-thumb"][data-active-clip="1"] {
  --reel-x: 50%;
  --reel-y: 100%;
}
/* nolee-reel home-object 7 desktop */
[data-reel-frame="home-object"][data-active-clip="7"] {
  --reel-x: 50%;
  --reel-y: 88.5%;
}
/* nolee-reel product-story 7 desktop */
[data-reel-frame="product-story"][data-active-clip="7"] {
  --reel-x: 50%;
  --reel-y: 81.1%;
}
/* nolee-reel home-object 10 desktop */
[data-reel-frame="home-object"][data-active-clip="10"] {
  --reel-x: 50%;
  --reel-y: 69.7%;
}
/* nolee-reel product-story 10 desktop */
[data-reel-frame="product-story"][data-active-clip="10"] {
  --reel-x: 50%;
  --reel-y: 64.5%;
}

@media (max-width: 980px) {
  /* nolee-reel product-story 2 mobile */
  [data-reel-frame="product-story"][data-active-clip="2"] {
    --reel-x: 50%;
    --reel-y: 100%;
  }
  /* nolee-reel product-story 3 mobile */
  [data-reel-frame="product-story"][data-active-clip="3"] {
    --reel-x: 50%;
    --reel-y: 19.3%;
  }
  /* nolee-reel product-story 4 mobile */
  [data-reel-frame="product-story"][data-active-clip="4"] {
    --reel-x: 50%;
    --reel-y: 57.1%;
  }
  /* nolee-reel product-story 5 mobile */
  [data-reel-frame="product-story"][data-active-clip="5"] {
    --reel-x: 50%;
    --reel-y: 30.6%;
  }
  /* nolee-reel product-story 6 mobile */
  [data-reel-frame="product-story"][data-active-clip="6"] {
    --reel-x: 50%;
    --reel-y: 46.8%;
  }
  /* nolee-reel product-story 9 mobile */
  [data-reel-frame="product-story"][data-active-clip="9"] {
    --reel-x: 50%;
    --reel-y: 33%;
  }
  /* nolee-reel product-story 1 mobile */
  [data-reel-frame="product-story"][data-active-clip="1"] {
    --reel-x: 50%;
    --reel-y: 91.1%;
  }
  /* nolee-reel product-story 7 mobile */
  [data-reel-frame="product-story"][data-active-clip="7"] {
    --reel-x: 50%;
    --reel-y: 100%;
  }
  /* nolee-reel product-story 10 mobile */
  [data-reel-frame="product-story"][data-active-clip="10"] {
    --reel-x: 50%;
    --reel-y: 33%;
  }
}

@media (max-width: 900px) {
  /* nolee-reel home-hero 1 mobile */
  [data-reel-frame="home-hero"][data-active-clip="1"] {
    --reel-x: 50%;
    --reel-y: 100%;
  }
  /* nolee-reel home-hero 2 mobile */
  [data-reel-frame="home-hero"][data-active-clip="2"] {
    --reel-x: 0%;
    --reel-y: 100%;
  }
  /* nolee-reel home-hero 3 mobile */
  [data-reel-frame="home-hero"][data-active-clip="3"] {
    --reel-x: 50%;
    --reel-y: 47.2%;
  }
  /* nolee-reel home-hero 4 mobile */
  [data-reel-frame="home-hero"][data-active-clip="4"] {
    --reel-x: 50%;
    --reel-y: 65%;
  }
  /* nolee-reel home-hero 6 mobile */
  [data-reel-frame="home-hero"][data-active-clip="6"] {
    --reel-x: 50%;
    --reel-y: 58.9%;
  }
  /* nolee-reel home-hero 5 mobile */
  [data-reel-frame="home-hero"][data-active-clip="5"] {
    --reel-x: 50%;
    --reel-y: 48.6%;
  }
  /* nolee-reel home-hero 8 mobile */
  [data-reel-frame="home-hero"][data-active-clip="8"] {
    --reel-x: 50%;
    --reel-y: 54.8%;
  }
  /* nolee-reel home-hero 9 mobile */
  [data-reel-frame="home-hero"][data-active-clip="9"] {
    --reel-x: 50%;
    --reel-y: 0%;
  }
  /* nolee-reel home-hero 7 mobile */
  [data-reel-frame="home-hero"][data-active-clip="7"] {
    --reel-x: 50%;
    --reel-y: 100%;
  }
  /* nolee-reel home-hero 10 mobile */
  [data-reel-frame="home-hero"][data-active-clip="10"] {
    --reel-x: 50%;
    --reel-y: 54.8%;
  }
}