/* ELIE v5.1.50 — cinematic Share Studio navigation and adaptive outside arrows. */
.share-studio-modal .share-preview-zone{
  --share-arrow-size:clamp(34px,3.2vw,54px);
  position:relative;
  overflow:visible!important;
  isolation:isolate;
}
.share-studio-modal .share-canvas-shell{
  overflow:visible!important;
  transform-origin:center center;
  transition:width .58s cubic-bezier(.22,.8,.18,1),height .58s cubic-bezier(.22,.8,.18,1),box-shadow .45s ease,border-color .45s ease,transform .45s cubic-bezier(.22,.8,.18,1)!important;
  will-change:width,height,transform;
}
.share-studio-modal .share-canvas-shell.ratio-square{
  width:min(calc(100% - var(--share-arrow-size) - var(--share-arrow-size) - 20px),56vh)!important;
}
.share-studio-modal .share-canvas-shell canvas,
.share-studio-modal .share-canvas-shell>span{
  border-radius:inherit;
}
.share-studio-modal .share-canvas-shell canvas{
  position:relative;
  z-index:1;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) brightness(1) saturate(1);
  transition:opacity .34s ease,transform .68s cubic-bezier(.16,.84,.24,1),filter .42s ease;
  will-change:opacity,transform,filter;
}
.share-studio-modal .share-canvas-shell>span{
  z-index:5;
}
.share-studio-modal .share-canvas-shell::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(73,255,78,.08),inset 0 0 26px rgba(40,255,54,.04);
}
.share-studio-modal .share-canvas-shell::after{
  content:"";
  position:absolute;
  z-index:4;
  left:3%;
  right:3%;
  top:-9%;
  height:9%;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(58,255,67,0),rgba(58,255,67,.22),rgba(58,255,67,0));
  filter:blur(3px);
  mix-blend-mode:screen;
}
.share-studio-modal .share-preview-toolbar strong{
  transition:opacity .28s ease,transform .5s cubic-bezier(.16,.84,.24,1),filter .35s ease;
  will-change:opacity,transform,filter;
}
.share-studio-modal .share-frame-arrow{
  --share-arrow-x:0%;
  top:50%!important;
  width:var(--share-arrow-size)!important;
  height:auto!important;
  aspect-ratio:1.42/1;
  opacity:.86;
  z-index:20!important;
  border:0!important;
  background:transparent!important;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.95));
  transition:opacity .25s ease,filter .3s ease,transform .42s cubic-bezier(.18,.9,.2,1)!important;
  will-change:transform,opacity;
}
.share-studio-modal .share-frame-arrow.prev{
  left:-5px!important;
  right:auto!important;
  --share-arrow-x:-100%;
  transform:translate3d(var(--share-arrow-x),-50%,0)!important;
}
.share-studio-modal .share-frame-arrow.next{
  right:-5px!important;
  left:auto!important;
  --share-arrow-x:100%;
  transform:translate3d(var(--share-arrow-x),-50%,0)!important;
}
.share-studio-modal .share-frame-arrow:hover,
.share-studio-modal .share-frame-arrow:focus-visible{
  opacity:1;
  filter:drop-shadow(0 0 13px rgba(66,230,62,.62));
  transform:translate3d(var(--share-arrow-x),-50%,0) scale(1.12)!important;
  outline:none;
}
.share-studio-modal .share-frame-arrow:active{
  transform:translate3d(var(--share-arrow-x),-50%,0) scale(.94)!important;
}
.share-studio-modal .share-type-grid button,
.share-studio-modal .share-ratio-grid button{
  transition:border-color .32s ease,background-color .32s ease,color .32s ease,transform .38s cubic-bezier(.18,.9,.2,1),box-shadow .32s ease!important;
}
.share-studio-modal .share-type-grid button:hover,
.share-studio-modal .share-type-grid button:focus-visible{
  transform:translateX(3px);
  box-shadow:0 0 18px rgba(46,241,58,.10);
}
.share-studio-modal .share-type-grid button.is-active{
  transform:translateX(5px);
  box-shadow:0 0 20px rgba(46,241,58,.16),inset 0 0 18px rgba(46,241,58,.04);
}
.share-studio-modal .share-preview-zone.is-cinematic-out .share-canvas-shell{
  border-color:rgba(46,241,58,.12)!important;
  box-shadow:0 10px 42px rgba(0,0,0,.82),0 0 8px rgba(46,241,58,.02)!important;
}
.share-studio-modal .share-preview-zone.is-cinematic-out .share-canvas-shell canvas{
  opacity:0;
  filter:blur(7px) brightness(.42) saturate(.55);
  transform:translate3d(0,0,0) scale(.955);
}
.share-studio-modal .share-preview-zone.is-cinematic-out.move-next .share-canvas-shell canvas{
  transform:translate3d(-18px,0,0) scale(.955);
}
.share-studio-modal .share-preview-zone.is-cinematic-out.move-prev .share-canvas-shell canvas{
  transform:translate3d(18px,0,0) scale(.955);
}
.share-studio-modal .share-preview-zone.is-cinematic-out.move-change .share-canvas-shell canvas{
  transform:translate3d(0,0,0) scale(.93);
}
.share-studio-modal .share-preview-zone.is-cinematic-out .share-preview-toolbar strong{
  opacity:0;
  filter:blur(4px);
  transform:translateY(-7px);
}
.share-studio-modal .share-preview-zone.is-cinematic-out .share-frame-arrow{
  opacity:.28;
  pointer-events:none;
}
.share-studio-modal .share-preview-zone.is-cinematic-in .share-canvas-shell{
  border-color:rgba(46,241,58,.62)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.78),0 0 28px rgba(46,241,58,.13)!important;
}
.share-studio-modal .share-preview-zone.is-cinematic-in .share-canvas-shell::after{
  animation:elieShareScan .82s cubic-bezier(.2,.72,.16,1) both;
}
.share-studio-modal .share-preview-zone.is-cinematic-in .share-preview-toolbar strong{
  animation:elieShareSubjectIn .58s cubic-bezier(.16,.84,.24,1) both;
}
@keyframes elieShareScan{
  0%{top:-9%;opacity:0}
  18%{opacity:.85}
  100%{top:100%;opacity:0}
}
@keyframes elieShareSubjectIn{
  0%{opacity:0;filter:blur(5px);transform:translateY(8px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
@media (orientation:landscape) and (pointer:coarse){
  html.phone-landscape .share-studio-modal .share-preview-zone{
    --share-arrow-size:clamp(23px,6.4vh,32px);
  }
  html.phone-landscape .share-studio-modal .share-canvas-shell.ratio-square{
    width:min(calc(100% - var(--share-arrow-size) - var(--share-arrow-size) - 14px),calc(100dvh - 112px))!important;
  }
  html.phone-landscape .share-studio-modal .share-frame-arrow.prev{left:-5px!important}
  html.phone-landscape .share-studio-modal .share-frame-arrow.next{right:-5px!important}
  html.phone-landscape .share-studio-modal .share-type-grid button:hover,
  html.phone-landscape .share-studio-modal .share-type-grid button.is-active{
    transform:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .share-studio-modal .share-canvas-shell,
  .share-studio-modal .share-canvas-shell canvas,
  .share-studio-modal .share-preview-toolbar strong,
  .share-studio-modal .share-frame-arrow{
    transition-duration:.18s!important;
  }
  .share-studio-modal .share-preview-zone.is-cinematic-in .share-canvas-shell::after{animation:none}
}
