/* =========================================================
   BASE
========================================================= */

html,
body{
    margin:0;
    padding:0;
    height:100%;
    background:#000;
}

/* =========================================================
   DEMO TYPOGRAPHY
========================================================= */

body,
button,
input,
select,
textarea{
    font-family:CC-Jura;
    font-size:clamp(16px, 1.3vw, 25px);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

#cc-left{
    background-color:var(--contrast-3);
    position:absolute;
    top:0;
    width:50vw;
    border-top:24px solid var(--contrast-3);
    padding:clamp(40px,6vw,100px) clamp(10px,5vw,100px) 50px clamp(10px,5vw,100px)
}

/* =========================================================
   RIGHT CONTENT
========================================================= */

#cc-right{
    background-color:var(--contrast);
    color:var(--contrast-3);
    display:flex;
    flex-wrap:wrap;
    height:calc(100vh - 30px);
    left:50vw;
    position:fixed;
    top:0;
    width:50vw;
}

.generate-back-to-top {bottom:10px;right:10px;}

/* =========================================================
   HEADINGS
========================================================= */

#cc-left .cc-microcopy {
	background-color: #e705ba;
	color: var(--contrast-3);
	font-size: 17px;
	width: max-content;
	padding: 5px;
}

#cc-left h1{ 
    font-family:inherit;
    font-weight:600;
    font-size:clamp(36px, 3.2vw, 50px);
    line-height:1.2em;
    margin-bottom:0;
    max-width:500px;
}

#cc-left h2{
    font-size:clamp(26px, 2.2vw, 35px);
    line-height:1.2em;
    margin-bottom:0;
    font-weight:600;
    text-transform:none;
}

#cc-right .swiper-content h2{
    margin:0 0 28px;
    font-size:
        clamp(64px,7vw,120px);
    line-height:.9;
    letter-spacing:-0.05em;
    font-weight:700;
}

#cc-right .swiper-content p{
    margin:0;
    font-size:
        clamp(18px,1.5vw,28px);
    line-height:1.45;
    opacity:.92;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

    #cc-left,
    #cc-left button,
    #cc-left input,
    #cc-left select,
    #cc-left textarea{
        font-size:16px;
    }

    #cc-left h1{
        font-size:26px;
        line-height:1;
    }

    #cc-left h2{
        font-size:22px;
        margin-bottom:14px;
        line-height:1.15;
    }

    #cc-right .swiper-content h2{
        font-size:clamp(32px, 6vw, 48px);
        margin-bottom:18px;
    }

    #cc-right .swiper-content p{
        font-size:clamp(14px, 3vw, 18px);
        line-height:1.35;
    }

}

/* =========================================================
   CAMERA RIG
========================================================= */

@keyframes camera-drift{
    0%{
        transform:
            scale(var(--s1))
            translate3d(var(--x1),var(--y1),0)
            rotate(var(--r1));
    }
    50%{
        transform:
            scale(var(--s2))
            translate3d(var(--x2),var(--y2),0)
            rotate(var(--r2));
    }
    100%{
        transform:
            scale(var(--s3))
            translate3d(var(--x3),var(--y3),0)
            rotate(var(--r3));
    }
}

.mainSwiper .swiper-slide img.is-animating{
    animation:
        camera-drift
        var(--duration,10s)
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.mainSwiper .swiper-slide::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:var(--z-overlay);
    pointer-events:none;
    background:
        radial-gradient(
            circle at var(--vignette-x,50%)
            var(--vignette-y,60%),
            rgba(0,0,0,.04),
            rgba(0,0,0,.82)
        );
}


/* =========================================================
   FOG
========================================================= */

.fog-layer{
    position:absolute;
    inset:-10%;
    z-index:var(--z-overlay);
    pointer-events:none;
    opacity:.18;
    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(255,255,255,.16),
            transparent 45%
        ),
        radial-gradient(
            circle at 70% 40%,
            rgba(255,255,255,.10),
            transparent 40%
        );
    transform:
        translate3d(0,0,0)
        scale(1.08);
    will-change:
        transform,
        opacity;
    animation:
        fogMove 22s ease-in-out infinite alternate;
}

.fog-layer::before{
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
    opacity:.6;
    transform:scale(1.4);
    mix-blend-mode:screen;
}

@keyframes fogMove{
    0%{
        transform:
            translate3d(-2%,0,0)
            scale(1.05);
    }
    100%{
        transform:
            translate3d(2%,1%,0)
            scale(1.1);
    }
}


/* =========================================================
   CONTENT
========================================================= */

.swiper-content{
    position:absolute;
    left:6%;
    bottom:10%;
    z-index:var(--z-content);
    max-width:750px;
}


/* =========================================================
   PARALLAX TEXT
========================================================= */

.parallax-title,
.parallax-text{
    opacity:0;
    will-change:
        transform,
        opacity;
}

.parallax-title{
    transform:
        translate3d(0,220px,0)
        scale(1.12);
    transition:
        transform 2.2s cubic-bezier(.19,1,.22,1),
        opacity 1.4s ease;
}

.parallax-text{
    transform:
        translate3d(0,160px,0)
        scale(1.03);
    transition:
        transform 2.8s cubic-bezier(.19,1,.22,1),
        opacity 2s ease;
}


/* =========================================================
   ACTIVE TEXT
========================================================= */

.swiper-slide-active .parallax-title,
.swiper-slide-active .parallax-text{
    opacity:1;
    transform:
        translate3d(0,0,0)
        scale(1);
}

.swiper-slide-active .parallax-title{
    transition-delay:.22s;
}

.swiper-slide-active .parallax-text{
    transition-delay:.58s;
}



/* =========================================================
   VIDEO
========================================================= */

.video-slide{
    background:#000;
}

.video-poster{
    position:absolute;
    inset:0;
    z-index:var(--z-bg);
    transition:
        opacity .8s ease,
        transform 8s ease;
}

.video-overlay{
    position:absolute;
    inset:0;
    z-index:var(--z-overlay);
    pointer-events:none;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.12)
        );
}

.video-frame{
    position:absolute;
    inset:0;
    z-index:var(--z-content);
    opacity:0;
    visibility:hidden;
    transition:
        opacity .8s ease;
}

.video-frame iframe{
    width:100%;
    height:100%;
    border:0;
}


/* =========================================================
   VIDEO ACTIVE
========================================================= */

.video-slide.video-active .video-frame{
    opacity:1;
    visibility:visible;
}

.video-slide.video-active .video-poster{
    opacity:0;
    transform:
        scale(1.08);
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.video-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:
        translate(-50%,-50%);
    z-index:var(--z-ui);
    width:110px;
    height:110px;
    border:none;
    border-radius:999px;
    background:
        rgba(255,255,255,.14);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    transition:
        transform .45s ease,
        background .45s ease,
        opacity .45s ease;
}

.video-play .gb-shape{
    position:absolute;
    left:33%;
    top:27%;
}

.video-slide.video-active .video-play{
    opacity:0;
    pointer-events:none;
}

@media (hover:hover){
    .video-play:hover{
        transform:
            translate(-50%,-50%)
            scale(1.08);
        background:
            rgba(255,255,255,.22);
    }
}


/*CMPLZ*/     
#cmplz-cookiebanner-1-optin {background:#fff;}
.cmplz-cookiebanner * {padding-right: 5px;}
#cmplz-message-1-optin{font-size:12px!important;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {font-family:tierarztweb-Space-Grotesk;height: 40px;font-size: 15px!important;border-color:#f2f2f2!important;background:#f9f9f9!important;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {background:#e705ba!important;color: #fff!important;}
#cmplz-manage-consent {display:none;}
#cmplz-document a, .editor-styles-wrapper .cmplz-unlinked-mode a,
body .cmplz-cookiebanner .cmplz-links .cmplz-link {	text-decoration: none;color:#e705ba;font-size:12px!important;}
.cmplz-document #cc-footer .cmplz-show-banner {display:none;}