/*
 * Final MP4 handoff module.
 * Owns only the bridge between the cloned Finder bottle and the final video.
 * It must not style normal Finder cards, questions, progress or commerce UI.
 */
.vsf-final-overlay.has-final-video:not(.is-direct-final-media) .vsf-final-messages{
  display:none!important;
}

.vsf-final-video-stage{
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 66% at 50% 45%,#fbf5ff 0%,#f8f0fb 43%,#f2e4f8 72%,#ead7f5 100%);
  transition:opacity .82s cubic-bezier(.22,.72,.22,1);
}

/*
 * The wash starts before the video appears. It deliberately replaces the
 * photographic page background with the same pale lavender family present
 * at the edges of the supplied MP4, so the video rectangle has no obvious
 * visual seam when it crossfades in.
 */
.vsf-final-video-wash{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  background:
    radial-gradient(circle at 50% 43%,rgba(253,249,255,.99) 0 24%,rgba(248,239,252,.99) 49%,rgba(239,221,248,.985) 76%,rgba(230,207,244,.985) 100%);
  transition:opacity .88s cubic-bezier(.2,.7,.2,1);
}

/* Optical bridge used to hide the unavoidable geometry change between the
 * live CSS bottle and the bottle rendered in the MP4. It is a short bloom,
 * not a new ritual animation. */
.vsf-final-video-flare{
  position:fixed;
  left:var(--vsf-overlay-target-x,50vw);
  top:var(--vsf-overlay-target-y,40vh);
  z-index:4;
  width:clamp(210px,31vw,430px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.52);
  background:
    radial-gradient(circle,rgba(255,255,255,.96) 0 13%,rgba(249,235,255,.88) 28%,rgba(217,175,242,.45) 52%,rgba(169,107,209,.16) 67%,transparent 78%);
  filter:blur(10px);
  will-change:opacity,transform,filter;
}

.vsf-final-video-media{
  position:absolute;
  z-index:2;
  left:50%;
  top:var(--vsf-overlay-target-y,40vh);
  display:block;
  width:min(96vw,1080px);
  height:min(96vh,1080px);
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  border:0;
  outline:0;
  background:transparent;
  opacity:0;
  transform:translate(-50%,-48%) scale(.975);
  filter:blur(10px) saturate(.985) contrast(.985) brightness(1.015);
  will-change:opacity,transform,filter;
  transition:
    opacity .50s cubic-bezier(.22,.72,.22,1),
    transform .64s cubic-bezier(.16,.76,.22,1),
    filter .58s ease;
  -webkit-mask-image:radial-gradient(ellipse 84% 83% at 50% 50%,#000 62%,rgba(0,0,0,.985) 75%,rgba(0,0,0,.72) 89%,transparent 100%);
  mask-image:radial-gradient(ellipse 84% 83% at 50% 50%,#000 62%,rgba(0,0,0,.985) 75%,rgba(0,0,0,.72) 89%,transparent 100%);
}

/* Start matching the MP4 background during the last part of the bottle travel. */
.vsf-final-overlay.is-video-prep .vsf-final-video-stage,
.vsf-final-overlay.is-video-prep .vsf-final-video-wash{
  opacity:1;
}

.vsf-final-overlay.has-final-video .vsf-final-overlay-backdrop{
  transition:background .88s ease,opacity .88s ease!important;
}

.vsf-final-overlay.is-video-prep .vsf-final-overlay-backdrop{
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 43%,#fcf7ff 0 24%,#f8effc 50%,#efdff8 77%,#e7d1f3 100%)!important;
}

.vsf-final-overlay.has-final-video .vsf-final-overlay-visual{
  transition:
    opacity .50s cubic-bezier(.22,.72,.22,1),
    filter .50s ease!important;
}

/* First hide the geometry mismatch inside an optical bloom. */
.vsf-final-overlay.is-video-bridging .vsf-final-video-flare{
  animation:vsfVideoBridgeBloom .78s cubic-bezier(.18,.72,.2,1) both;
}

.vsf-final-overlay.is-video-bridging .vsf-final-overlay-visual{
  opacity:.48!important;
  filter:blur(8px) brightness(1.18) saturate(.82)!important;
}

.vsf-final-overlay.is-video-bridging .vsf-final-overlay-light{
  opacity:.34!important;
  filter:blur(7px)!important;
  transition:opacity .42s ease,filter .42s ease!important;
}

/* The MP4 bottle resolves out of the same bloom before the CSS clone is
 * completely gone. This makes the handoff read as one object changing focus
 * rather than two unrelated bottles cutting between each other. */
.vsf-final-overlay.is-video-active .vsf-final-video-media{
  opacity:1;
  transform:translate(-50%,-48%) scale(1);
  filter:blur(0) saturate(.985) contrast(.99) brightness(1.01);
}

.vsf-final-overlay.is-video-active .vsf-final-overlay-visual{
  opacity:0!important;
  filter:blur(13px) brightness(1.22)!important;
}

.vsf-final-overlay.is-video-active .vsf-final-overlay-light{
  opacity:.12!important;
  transition:opacity .58s ease!important;
}

.vsf-final-overlay.is-video-complete .vsf-final-video-stage{
  opacity:1;
}

.vsf-final-overlay.is-video-complete .vsf-final-video-media{
  opacity:.96;
}

@keyframes vsfVideoBridgeBloom{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.52);
    filter:blur(12px);
  }
  42%{
    opacity:.92;
    transform:translate(-50%,-50%) scale(1.02);
    filter:blur(7px);
  }
  72%{
    opacity:.64;
    transform:translate(-50%,-50%) scale(1.18);
    filter:blur(12px);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.34);
    filter:blur(18px);
  }
}

@media(max-width:680px){
  .vsf-final-video-media{
    width:100vw;
    height:92vh;
    top:var(--vsf-overlay-target-y,44vh);
    -webkit-mask-image:radial-gradient(ellipse 94% 82% at 50% 50%,#000 60%,rgba(0,0,0,.96) 80%,transparent 100%);
    mask-image:radial-gradient(ellipse 94% 82% at 50% 50%,#000 60%,rgba(0,0,0,.96) 80%,transparent 100%);
  }

  .vsf-final-video-flare{
    width:clamp(180px,62vw,320px);
  }
}

@media(prefers-reduced-motion:reduce){
  .vsf-final-video-stage,
  .vsf-final-video-wash,
  .vsf-final-video-flare{
    display:none!important;
  }
}


/* ==========================================================================
   v1.8.40 — MP4 background integration
   Palette sampled from the staging screenshot. This module only owns the
   final-video environment; Finder cards/layout/commerce remain untouched.
   ========================================================================== */
.vsf-final-video-stage{
  background:
    radial-gradient(ellipse 82% 74% at 50% 33%,rgba(251,246,255,.98) 0%,rgba(248,240,252,.97) 46%,rgba(241,226,248,.98) 76%,rgba(234,215,245,1) 100%);
}

/* Extend the MP4's own vertical background gradient beyond the portrait frame.
   The source is slightly brighter at the top and noticeably more lavender near
   the lower edge; reproducing that field behind it removes the 'white card' look. */
.vsf-final-video-stage::before{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:min(100vw,1320px);
  height:100%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.94;
  background:linear-gradient(180deg,
    #fbf6ff 0%,
    #f8f1fd 34%,
    #f5ebfb 63%,
    #eee2f9 82%,
    #e9daf6 100%
  );
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 6%,#000 22%,#000 78%,rgba(0,0,0,.18) 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 6%,#000 22%,#000 78%,rgba(0,0,0,.18) 94%,transparent 100%);
}

/* Feather the actual portrait-video edges over the bottle-independent
   background. The center remains completely untouched. */
.vsf-final-video-stage::after{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:var(--vsf-overlay-target-y,40vh);
  width:min(96vw,1080px);
  height:min(96vh,1080px);
  transform:translate(-50%,-48%);
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(248,241,253,.98) 0%,
      rgba(248,241,253,.72) 5%,
      rgba(248,241,253,.24) 13%,
      transparent 24%,
      transparent 76%,
      rgba(248,241,253,.24) 87%,
      rgba(248,241,253,.72) 95%,
      rgba(248,241,253,.98) 100%
    ),
    linear-gradient(180deg,
      rgba(251,246,255,.60) 0%,
      transparent 13%,
      transparent 83%,
      rgba(234,220,248,.58) 100%
    );
}

.vsf-final-video-wash{
  background:
    radial-gradient(ellipse 78% 72% at 50% 32%,rgba(251,246,255,.995) 0 28%,rgba(248,240,252,.992) 52%,rgba(240,225,248,.99) 79%,rgba(233,214,245,.99) 100%);
}

.vsf-final-overlay.is-video-prep .vsf-final-overlay-backdrop{
  background:
    radial-gradient(ellipse 82% 74% at 50% 33%,#fbf6ff 0 28%,#f8f0fc 52%,#f0e1f8 79%,#e9d6f5 100%)!important;
}

/* Slightly broader/softer alpha falloff than 1.8.39. */
.vsf-final-video-media{
  -webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 50%,#000 56%,rgba(0,0,0,.99) 70%,rgba(0,0,0,.80) 86%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 86% at 50% 50%,#000 56%,rgba(0,0,0,.99) 70%,rgba(0,0,0,.80) 86%,transparent 100%);
}

@media(max-width:680px){
  .vsf-final-video-stage::before{
    width:118vw;
  }
  .vsf-final-video-stage::after{
    width:100vw;
    height:92vh;
    top:var(--vsf-overlay-target-y,44vh);
    background:
      linear-gradient(90deg,rgba(248,241,253,.82) 0%,transparent 14%,transparent 86%,rgba(248,241,253,.82) 100%),
      linear-gradient(180deg,rgba(251,246,255,.48) 0%,transparent 10%,transparent 88%,rgba(234,220,248,.48) 100%);
  }
}

/* ========================================================================== 
   v1.8.41 — transparent SVG final-media support
   SVG is composited directly over Velara's real full-screen wash. Unlike the
   portrait MP4 path, it has no edge feather, no portrait background field and
   no radial alpha mask, so transparent pixels remain genuinely transparent.
   ========================================================================== */
.vsf-final-video-stage.is-svg-media{
  background:transparent;
}

.vsf-final-video-stage.is-svg-media::before,
.vsf-final-video-stage.is-svg-media::after{
  display:none!important;
}

.vsf-final-video-stage.is-svg-media .vsf-final-video-wash{
  background:
    radial-gradient(ellipse 86% 76% at 50% 38%,rgba(251,246,255,.94) 0%,rgba(247,237,252,.90) 52%,rgba(235,214,246,.88) 100%);
}

.vsf-final-video-stage.is-svg-media .vsf-final-svg-media{
  width:min(88vw,960px);
  height:min(90vh,960px);
  object-fit:contain;
  object-position:center;
  background:transparent!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:blur(10px) saturate(1) contrast(1) brightness(1)!important;
}

.vsf-final-overlay.is-video-active .vsf-final-video-stage.is-svg-media .vsf-final-svg-media{
  filter:blur(0) saturate(1) contrast(1) brightness(1)!important;
}

@media(max-width:680px){
  .vsf-final-video-stage.is-svg-media .vsf-final-svg-media{
    width:94vw;
    height:86vh;
  }
}

/* ========================================================================== 
   v1.8.42 — desktop final-media scale refinement
   The transparent final asset was visually too dominant on desktop. Keep the
   approved mobile geometry untouched and reduce only the desktop media box.
   ========================================================================== */
@media (min-width:681px){
  .vsf-final-video-media{
    width:min(82vw,900px);
    height:min(74vh,820px);
  }
}


/* ========================================================================== 
   v1.8.43 — direct final media + editorial phrases
   Client-approved flow: the Finder bottle no longer travels to center before
   final media. The final video begins as the ritual itself and the existing
   editorial phrases run concurrently with it.
   ========================================================================== */
.vsf-final-overlay.is-direct-final-media .vsf-final-overlay-visual{
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
  pointer-events:none!important;
}

.vsf-final-overlay.is-direct-final-media .vsf-final-overlay-light,
.vsf-final-overlay.is-direct-final-media .vsf-final-video-flare{
  display:none!important;
}

.vsf-final-overlay.is-direct-final-media .vsf-final-messages{
  display:block!important;
  z-index:7!important;
}

/* Keep the wording visually separate from the bottle on desktop. The message
   lives in the lower clear band rather than over the transparent media. */
.vsf-final-overlay.is-direct-final-media .vsf-final-message[data-vsf-slot="below-bottle"]{
  top:auto!important;
  right:auto!important;
  bottom:clamp(24px,4.2vh,52px)!important;
  left:50%!important;
  width:min(88vw,680px)!important;
  max-width:680px!important;
  transform:translate(-50%,6px)!important;
  text-align:center!important;
}

.vsf-final-overlay.is-direct-final-media .vsf-final-message[data-vsf-slot="below-bottle"].is-active{
  transform:translate(-50%,0)!important;
}

.vsf-final-overlay.is-direct-final-media .vsf-final-message[data-vsf-slot="below-bottle"].is-leaving{
  transform:translate(-50%,-5px)!important;
}

.vsf-final-overlay.is-direct-final-media .vsf-final-message strong{
  font-size:clamp(29px,3.15vw,46px)!important;
}

.vsf-final-overlay.is-direct-final-media .vsf-final-message p{
  max-width:590px!important;
  margin:8px auto 0!important;
}

@media(max-width:680px){
  .vsf-final-overlay.is-direct-final-media .vsf-final-message[data-vsf-slot="below-bottle"]{
    bottom:max(18px,env(safe-area-inset-bottom))!important;
    width:min(92vw,460px)!important;
  }

  .vsf-final-overlay.is-direct-final-media .vsf-final-message strong{
    font-size:clamp(25px,7.2vw,36px)!important;
  }

  .vsf-final-overlay.is-direct-final-media .vsf-final-message p{
    max-width:88vw!important;
    margin-top:6px!important;
    font-size:12.5px!important;
    line-height:1.42!important;
  }
}


/* ========================================================================== 
   v1.8.44 — synchronized ending + Velara background droplets
   The transparent media now ends before its static tail and exits together
   with editorial copy. Decorative drops reuse the site's lavender glass
   language and remain behind media/copy, never affecting Finder layout.
   ========================================================================== */
.vsf-final-video-drops{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
}

.vsf-final-video-drops span{
  --vsf-final-drop-size:16px;
  --vsf-final-drop-duration:8.2s;
  --vsf-final-drop-delay:0s;
  position:absolute;
  display:block;
  width:var(--vsf-final-drop-size);
  height:calc(var(--vsf-final-drop-size) * 1.55);
  border-radius:78% 22% 68% 32%;
  background:linear-gradient(
    150deg,
    rgba(255,255,255,.90),
    rgba(214,178,239,.72) 44%,
    rgba(126,69,187,.56)
  );
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.52),
    0 8px 18px rgba(88,38,139,.12);
  filter:blur(.15px);
  opacity:.52;
  transform:translate3d(0,0,0) rotate(18deg);
  animation:vsfFinalBackgroundDropFloat var(--vsf-final-drop-duration) ease-in-out var(--vsf-final-drop-delay) infinite alternate;
  will-change:transform;
}

.vsf-final-video-drops span:nth-child(1){top:12%;left:10%;--vsf-final-drop-size:13px;--vsf-final-drop-duration:8.6s;--vsf-final-drop-delay:-3.1s;transform:rotate(54deg)}
.vsf-final-video-drops span:nth-child(2){top:23%;right:12%;--vsf-final-drop-size:21px;--vsf-final-drop-duration:9.4s;--vsf-final-drop-delay:-6.0s;transform:rotate(73deg)}
.vsf-final-video-drops span:nth-child(3){top:43%;left:5%;--vsf-final-drop-size:10px;--vsf-final-drop-duration:7.2s;--vsf-final-drop-delay:-1.8s;transform:rotate(101deg)}
.vsf-final-video-drops span:nth-child(4){top:58%;right:7%;--vsf-final-drop-size:15px;--vsf-final-drop-duration:8.1s;--vsf-final-drop-delay:-4.9s;transform:rotate(36deg)}
.vsf-final-video-drops span:nth-child(5){bottom:14%;left:17%;--vsf-final-drop-size:20px;--vsf-final-drop-duration:9.8s;--vsf-final-drop-delay:-7.2s;transform:rotate(118deg)}
.vsf-final-video-drops span:nth-child(6){bottom:9%;right:20%;--vsf-final-drop-size:11px;--vsf-final-drop-duration:7.7s;--vsf-final-drop-delay:-2.6s;transform:rotate(65deg)}
.vsf-final-video-drops span:nth-child(7){top:8%;left:34%;--vsf-final-drop-size:8px;--vsf-final-drop-duration:7.4s;--vsf-final-drop-delay:-5.5s;transform:rotate(92deg)}
.vsf-final-video-drops span:nth-child(8){top:69%;left:32%;--vsf-final-drop-size:9px;--vsf-final-drop-duration:8.8s;--vsf-final-drop-delay:-3.8s;transform:rotate(28deg)}
.vsf-final-video-drops span:nth-child(9){top:36%;right:31%;--vsf-final-drop-size:7px;--vsf-final-drop-duration:6.9s;--vsf-final-drop-delay:-6.6s;transform:rotate(122deg)}
.vsf-final-video-drops span:nth-child(10){bottom:27%;right:37%;--vsf-final-drop-size:8px;--vsf-final-drop-duration:8.3s;--vsf-final-drop-delay:-1.2s;transform:rotate(48deg)}

@keyframes vsfFinalBackgroundDropFloat{
  0%{transform:translate3d(0,-5px,0) rotate(12deg) scale(.94)}
  50%{transform:translate3d(7px,4px,0) rotate(24deg) scale(1.03)}
  100%{transform:translate3d(-5px,11px,0) rotate(6deg) scale(.98)}
}

/* Media and copy leave as one composition. This removes the short frame in
   which the editorial message was already gone but the bottle remained. */
.vsf-final-overlay.is-exiting .vsf-final-video-stage{
  opacity:0!important;
  transition:opacity .30s ease!important;
}

@media(max-width:680px){
  .vsf-final-video-drops{opacity:.58}
  .vsf-final-video-drops span:nth-child(7),
  .vsf-final-video-drops span:nth-child(9),
  .vsf-final-video-drops span:nth-child(10){display:none}
}

@media(prefers-reduced-motion:reduce){
  .vsf-final-video-drops span{animation:none!important}
}


/* ========================================================================== 
   v1.8.45 — full-screen Velara petals in the final ritual
   Reuses the soft leaf/petal language already present across Velara, but keeps
   the final composition restrained: eight slow petals on desktop, five on
   mobile. They stay behind transparent media and editorial copy.
   ========================================================================== */
.vsf-final-video-leaves{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .72s ease;
}

.vsf-final-overlay.is-video-active .vsf-final-video-leaves,
.vsf-final-overlay.is-video-complete .vsf-final-video-leaves{
  opacity:.62;
}

.vsf-final-video-leaves span{
  --vsf-final-leaf-w:34px;
  --vsf-final-leaf-h:20px;
  --vsf-final-leaf-duration:13s;
  --vsf-final-leaf-delay:0s;
  --vsf-final-leaf-x:18px;
  --vsf-final-leaf-y:28px;
  --vsf-final-leaf-r1:24deg;
  --vsf-final-leaf-r2:72deg;
  position:absolute;
  display:block;
  width:var(--vsf-final-leaf-w);
  height:var(--vsf-final-leaf-h);
  border-radius:82% 18% 74% 26%;
  background:linear-gradient(145deg,rgba(238,214,255,.94),rgba(193,132,230,.72) 55%,rgba(139,76,198,.52));
  box-shadow:
    inset 2px 2px 6px rgba(255,255,255,.50),
    0 9px 20px rgba(96,47,153,.10);
  opacity:.58;
  filter:blur(.08px);
  transform:translate3d(0,0,0) rotate(var(--vsf-final-leaf-r1));
  animation:vsfFinalLeafDrift var(--vsf-final-leaf-duration) ease-in-out var(--vsf-final-leaf-delay) infinite alternate;
  will-change:transform;
}

/* Spread over the complete viewport, deliberately avoiding a dense cluster
   around the bottle or the copy band. */
.vsf-final-video-leaves span:nth-child(1){top:8%;left:7%;--vsf-final-leaf-w:38px;--vsf-final-leaf-h:22px;--vsf-final-leaf-duration:14.8s;--vsf-final-leaf-delay:-5.2s;--vsf-final-leaf-x:26px;--vsf-final-leaf-y:34px;--vsf-final-leaf-r1:-18deg;--vsf-final-leaf-r2:42deg}
.vsf-final-video-leaves span:nth-child(2){top:13%;right:9%;--vsf-final-leaf-w:28px;--vsf-final-leaf-h:17px;--vsf-final-leaf-duration:12.6s;--vsf-final-leaf-delay:-8.1s;--vsf-final-leaf-x:-22px;--vsf-final-leaf-y:30px;--vsf-final-leaf-r1:38deg;--vsf-final-leaf-r2:104deg}
.vsf-final-video-leaves span:nth-child(3){top:39%;left:3%;--vsf-final-leaf-w:31px;--vsf-final-leaf-h:18px;--vsf-final-leaf-duration:16.2s;--vsf-final-leaf-delay:-2.9s;--vsf-final-leaf-x:31px;--vsf-final-leaf-y:-24px;--vsf-final-leaf-r1:62deg;--vsf-final-leaf-r2:128deg}
.vsf-final-video-leaves span:nth-child(4){top:42%;right:4%;--vsf-final-leaf-w:42px;--vsf-final-leaf-h:24px;--vsf-final-leaf-duration:15.4s;--vsf-final-leaf-delay:-10.5s;--vsf-final-leaf-x:-30px;--vsf-final-leaf-y:26px;--vsf-final-leaf-r1:-34deg;--vsf-final-leaf-r2:28deg}
.vsf-final-video-leaves span:nth-child(5){bottom:22%;left:10%;--vsf-final-leaf-w:25px;--vsf-final-leaf-h:15px;--vsf-final-leaf-duration:13.7s;--vsf-final-leaf-delay:-6.7s;--vsf-final-leaf-x:24px;--vsf-final-leaf-y:-30px;--vsf-final-leaf-r1:18deg;--vsf-final-leaf-r2:84deg}
.vsf-final-video-leaves span:nth-child(6){bottom:16%;right:13%;--vsf-final-leaf-w:35px;--vsf-final-leaf-h:21px;--vsf-final-leaf-duration:17.1s;--vsf-final-leaf-delay:-3.4s;--vsf-final-leaf-x:-28px;--vsf-final-leaf-y:-35px;--vsf-final-leaf-r1:74deg;--vsf-final-leaf-r2:142deg}
.vsf-final-video-leaves span:nth-child(7){top:24%;left:28%;--vsf-final-leaf-w:20px;--vsf-final-leaf-h:12px;--vsf-final-leaf-duration:14.1s;--vsf-final-leaf-delay:-11.2s;--vsf-final-leaf-x:18px;--vsf-final-leaf-y:21px;--vsf-final-leaf-r1:-8deg;--vsf-final-leaf-r2:58deg;opacity:.38}
.vsf-final-video-leaves span:nth-child(8){top:29%;right:27%;--vsf-final-leaf-w:23px;--vsf-final-leaf-h:14px;--vsf-final-leaf-duration:15.9s;--vsf-final-leaf-delay:-4.6s;--vsf-final-leaf-x:-20px;--vsf-final-leaf-y:-23px;--vsf-final-leaf-r1:48deg;--vsf-final-leaf-r2:116deg;opacity:.40}

@keyframes vsfFinalLeafDrift{
  0%{transform:translate3d(0,0,0) rotate(var(--vsf-final-leaf-r1)) scale(.94)}
  45%{transform:translate3d(calc(var(--vsf-final-leaf-x) * .62),calc(var(--vsf-final-leaf-y) * .55),0) rotate(calc((var(--vsf-final-leaf-r1) + var(--vsf-final-leaf-r2)) / 2)) scale(1.03)}
  100%{transform:translate3d(var(--vsf-final-leaf-x),var(--vsf-final-leaf-y),0) rotate(var(--vsf-final-leaf-r2)) scale(.98)}
}

@media(max-width:680px){
  .vsf-final-overlay.is-video-active .vsf-final-video-leaves,
  .vsf-final-overlay.is-video-complete .vsf-final-video-leaves{opacity:.50}

  .vsf-final-video-leaves span{transform:scale(.82)}
  .vsf-final-video-leaves span:nth-child(4),
  .vsf-final-video-leaves span:nth-child(7),
  .vsf-final-video-leaves span:nth-child(8){display:none}
}

@media(prefers-reduced-motion:reduce){
  .vsf-final-video-leaves span{animation:none!important}
}