/* mockup-screenscroller.css */

/* Aktivator */
.mockupscreenscroller {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Root wrapper (JS erzeugt) */
.ifs-ss-scroller {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

/* Frame (Mockup-Hintergrund) */
.ifs-ss-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ifs-ss-mockup-ratio, 1150 / 938);

  background-image: var(--ifs-ss-mockup-image, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Screen / Clip-Area */
.ifs-ss-screen {
  position: absolute;

  top: var(--ifs-ss-screen-top, 7.5%);
  left: var(--ifs-ss-screen-left, 12.2%);
  right: var(--ifs-ss-screen-right, 12.2%);
  bottom: var(--ifs-ss-screen-bottom, 23.5%);

  overflow: hidden;
  border-radius: var(--ifs-ss-screen-radius, 6px);
  background: #000;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Screenshot 
.ifs-ss-screen img {
  width: 100%;
  height: auto;
  display: block;

  transform: translate3d(0,0,0);
  will-change: transform;
  user-select: none;
  pointer-events: none;
}
*/

.ifs-ss-screen img {
  width: 100%;
  height: auto;
  display: block;

  /* transform kommt jetzt aus CSS-Variablen */
  transform: translate3d(0, calc(-1px * var(--ifs-ss-scroll-y, 0)), 0);
  will-change: transform;

  user-select: none;
  pointer-events: none;
}


/* Hover-Zustand */
.ifs-ss-screen.is-interactive {
  cursor: ns-resize;
}

/* -------------------------
   Mockup Varianten
-------------------------- */

.mockupscreenscroller .ifs-ss-frame,
.mockupscreenscroller.mac-mockup .ifs-ss-frame 
{
  --ifs-ss-mockup-image: url("/wp-content/uploads/MAC_Mockup.jpg");
  --ifs-ss-mockup-ratio: 1150 / 938;

  --ifs-ss-screen-top: 3%;
  --ifs-ss-screen-left: 5%;
  --ifs-ss-screen-right: 5%;
  --ifs-ss-screen-bottom: 32%;
  --ifs-ss-screen-radius: 3px;
}

.mockupscreenscroller.mac-mockup2 .ifs-ss-frame {
  --ifs-ss-mockup-image: url("/wp-content/uploads/workplace-with-computer.jpg");
  --ifs-ss-mockup-ratio: 1500 / 1000;

  --ifs-ss-screen-top: 12%;
  --ifs-ss-screen-left: 26.8%;
  --ifs-ss-screen-right: 25%;
  --ifs-ss-screen-bottom: 32%;
  --ifs-ss-screen-radius: 2px;
}

/* -------------------------
   Optionale Perspektive
-------------------------- */
/*
.mockupscreenscroller.is-perspective .ifs-ss-frame,
.mockupscreenscroller.mac-mockup2 .ifs-ss-frame 
{
  transform-origin: center center;
  transform:
    perspective(var(--ifs-ss-perspective-depth, 1200px))
    rotateX(var(--ifs-ss-rotate-x, 0deg))
    rotateY(var(--ifs-ss-rotate-y, 0deg))
    rotateZ(var(--ifs-ss-rotate-z, 0deg));
}
*/

/* Perspektive nur auf den Screenshot anwenden */
.mockupscreenscroller.is-perspective .ifs-ss-screen img,
.mockupscreenscroller.mac-mockup2 .ifs-ss-screen img 
{
  transform-origin: var(--ifs-ss-transform-origin, center top);
  transform:
    perspective(var(--ifs-ss-perspective-depth, 1200px))
    rotateX(var(--ifs-ss-rotate-x, 0deg))
    rotateY(var(--ifs-ss-rotate-y, 0deg))
    rotateZ(var(--ifs-ss-rotate-z, 0deg))
    translate3d(var(--ifs-ss-translate-x, 0px), calc(-1px * var(--ifs-ss-scroll-y, 0)), 0);


}

.mockupscreenscroller
{
    --ifs-imgh-factor: 1;
}


.mockupscreenscroller.is-perspective .ifs-ss-screen,
.mockupscreenscroller.mac-mockup2 .ifs-ss-screen 
{
    clip-path: var(--ifs-ss-clip-path);
}

/* konkrete Verzerrungen */ 
.mockupscreenscroller.mac-mockup2 {
  --ifs-imgh-factor: 0.92;

  --ifs-ss-translate-x: -5%;
  --ifs-ss-transform-origin: 50% 21%;
  --ifs-ss-rotate-x: 0deg;
  --ifs-ss-rotate-y: -2deg;
  --ifs-ss-rotate-z: 0deg;
  --ifs-ss-perspective-depth: min(4.2vw, 64px); 



  --ifs-ss-clip-path: polygon(2% 6.5%, 100% 0, 98% 100%, 0 90%);

}

.vc_column_container.vc_col-sm-12 .mockupscreenscroller.mac-mockup2 {
    --ifs-imgh-factor: 0.92;
    --ifs-ss-translate-x: -7%;
}