/* 
 Theme Name:   Frisson Studio
 Theme URI:    https://frisson.studio
 Description:  Custom Kadence Child theme for Frisson Studio
 Author:       david.manson@me.com
 Author URI:   http://www.david-manson.com
 Template:     kadence
 Version:      1.2.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*----------------------------
 * Global
 *----------------------------*/

/*body{
	cursor: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23CEFF00'/%3E%3C/svg%3E%0A")  16 16, pointer !important;
}*/
body.wp-toolbar{
    cursor: pointer;
}
::selection {
    background-color: var(--global-palette2);
}

.post-archive-hero-section .entry-hero-container-inner,
body.page-id-158.content-bg,
body.page-id-158 .site,
body.page-id-496.content-bg,
body.page-id-496 .site,
body.page-id-496 .about-section-2,
body.page-id-496 .frisson-about-section-2 {
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg height='152' width='152' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='152' y2='0' style='stroke:%23E8E8E8;stroke-width:1' /%3E%3Cline x1='0' y1='0' x2='0' y2='152' style='stroke:%23E8E8E8;stroke-width:1' /%3E%3C/svg%3E") !important;
    background-size: 152px;
}

.kt-modal-overlay{
    -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.custom-archive-loop-item a{
    text-decoration: none;
}

/*----------------------------
 * Header
 *----------------------------*/
.site-main-header-wrap{
	padding: 30px 20px;
}
.site-main-header-inner-wrap{
	background: rgba(0,0,0,.15);
	padding: 10px;
	border-radius: 8px;
    -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.svg-logo{
    display: block;
}

/* Dark version */
body.page-id-158 .main-navigation .primary-menu-container > ul > li.menu-item > a,
body.blog .main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: var(--global-palette3);
}
body.page-id-158 .site-main-header-inner-wrap,
body.blog .site-main-header-inner-wrap{
    background:rgb(24 23 28 / 5%);
}
body.page-id-158 .svg-logo path,
body.blog .svg-logo path{
    fill: #111;
}

body.page-id-158 .mobile-toggle-open-container .menu-toggle-open,
body.page-id-158 .mobile-toggle-open-container .menu-toggle-open:focus,
body.blog .mobile-toggle-open-container .menu-toggle-open,
body.blog .mobile-toggle-open-container .menu-toggle-open:focus {
    color: var(--global-palette3);
}

/*----------------------------
 * Contact modal
 *----------------------------*/
#contact .kt-modal-close{
    right: 12px;
    top: 30px;
}

/*----------------------------
 * Hero section
 *----------------------------*/
:root{
	--separator-size: 54px;
}

.frisson-hero-section{
	background-image: url("data:image/svg+xml,%3Csvg width='152' height='152' viewBox='0 0 152 152' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_246_1273)'%3E%3Cpath opacity='0.1' d='M151.33 -1.33008L151.33 150.67' stroke='white' stroke-width='1.33' stroke-miterlimit='10'/%3E%3Cpath opacity='0.1' d='M153 151.33H1' stroke='white' stroke-width='1.33' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_246_1273'%3E%3Crect width='152' height='152' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 152px;
}

.frisson-mask-video{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='261' height='437' viewBox='0 0 261 437' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M107.149 138.925C107.149 87.7568 149.037 45.9022 200.201 45.9022C213.401 45.9022 226.022 48.7319 237.401 53.7515C213.401 21.2225 174.846 0 131.532 0C59.1843 0 0 59.1894 0 131.543V436.766L107.149 353.746V138.925Z' fill='black'/%3E%3Cpath d='M181.642 296.573L179.11 298.521L107.549 354.135H261.008V236.09L181.642 296.573Z' fill='black'/%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg width='261' height='437' viewBox='0 0 261 437' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M107.149 138.925C107.149 87.7568 149.037 45.9022 200.201 45.9022C213.401 45.9022 226.022 48.7319 237.401 53.7515C213.401 21.2225 174.846 0 131.532 0C59.1843 0 0 59.1894 0 131.543V436.766L107.149 353.746V138.925Z' fill='black'/%3E%3Cpath d='M181.642 296.573L179.11 298.521L107.549 354.135H261.008V236.09L181.642 296.573Z' fill='black'/%3E%3C/svg%3E%0A");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  
    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

.frisson-hero-content{
	position: absolute;
	inset: 0;
	justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

p.hero-text {
    color: white;
    font-weight: bold;
    max-width: 260px;
    text-align: center;
    font-size: 21px;
}


/*----------------------------
 * Séparateurs
 *----------------------------*/
.f-separator:before,
.f-separator:after,
.frisson-modal-container:before,
.frisson-modal-container:after,
.frisson-realisation-about:before,
.frisson-realisation-about:after,
.frisson-separator-about-home:before,
.frisson-separator-footer:before,
.frisson-separator-footer:after,
.frisson-separator-1:after,
.slider-separators:after,
.frisson-about-section-2:before,
.frisson-separator-expertise:after,
.slider-separators:before{
	position: absolute;
    right: 0;
    bottom: -1px;
    content: '';
	height: 0;
    left: 0;
    width: 100%;
}

/* Modulaire */
.f-separator.top:before{
    --distance: 33%;
    top: -39px;
    bottom: auto;
    padding-bottom: 40px;
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 100% 100%);
    z-index: 3;
}
.f-separator.top.blue:before{
    background: var(--global-palette1);
}

/* Specific (pas ouf mais fonctionnel */
.frisson-realisation-about:before,
.frisson-separator-about-home:before{
    --distance: 33%;
    top: -39px;
    bottom: auto;
    padding-bottom: 40px;
    background: var(--global-palette1);
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 100% 100%);
    z-index: 3;
}

.frisson-about-section-2:before,
.frisson-modal-container:before,
.frisson-separator-footer:before{
    --distance: 33%;
    top: -39px;
    bottom: auto;
    padding-bottom: 40px;
    background: white;
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 100% 100%);
    z-index: 3;
}

.frisson-modal-container:after,
.frisson-separator-footer:after{
    --distance: 66%;
    bottom: 1px;
    padding-bottom: 40px;
    background: #ffffff;
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 0 0);
    transform: translateY(40px);
    z-index: 3;
}

.frisson-realisation-about:after{
    --distance: 66%;
    bottom: 1px;
    padding-bottom: 40px;
    background: var(--global-palette1);
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 0 0);
    transform: translateY(40px);

}

.frisson-separator-1:after{
	--distance: 66%;
    padding-top: 40px;
    background: white;
    clip-path: polygon(0 0, var(--distance) 0, calc(var(--distance) + var(--separator-size)) 100%, 100% 100%, 0 100%);
}

.frisson-separator-expertise:after{
	--distance: 66%;
    padding-top: 40px;
    background: var(--global-palette3);
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 100% 100%);
}

.slider-separators:before{
    --distance: 33%;
    width: 100%;
    top: -1px;
    padding-bottom: 40px;
    background: white;
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 0 0);
}

.slider-separators:after{
    --distance: 66%;
    bottom: 1px;
    padding-bottom: 40px;
    background: #FF76FF;
    clip-path: polygon(0 100%, var(--distance) 100%, calc(var(--distance) + var(--separator-size)) 0, 100% 0, 0 0);
    transform: translateY(40px);
}

/* Modal specific */
.frisson-modal-container:after{
    transform: translateY(30px);
}
.frisson-modal-container:before{
    top: -29px;
}

.frisson-separator-line {
    position: relative;
    --distance: 33%;
    height: 40px;
    background: rgba(24,23,28,.4);
    clip-path: polygon(0 calc(100% - 1px), var(--distance) calc(100% - 1px), calc(var(--distance) + var(--separator-size)) 0, 100% 0, 100% 1px, calc(var(--distance) + var(--separator-size)) 1px, var(--distance) 100%, 0 100%);
}


/*----------------------------
 * Buttons styles
 *----------------------------*/
.kb-button{
    display: flex !important;
    background: transparent;
}
.kb-button::before {
    position: static;
    display: block;
    opacity: 1;
    width: 8px;
    height: 8px;
    background: var(--global-palette1);
    border-radius: 4px;
    margin-right: 8px;
}
.kb-button:hover:before {
    background: var(--global-palette8);
}

/* White dot */
.kb-button.white-dot::before {
    background: white;
}
.kb-button.white-dot:hover:before {
    background: var(--global-palette3);
}

/* Green dot */
.kb-button.green-dot::before {
    background: #BFFF00;
}
.kb-button.green-dot:hover:before {
    background: var(--global-palette3);
}

/*----------------------------
 * Slider homepage
 *----------------------------*/
.frisson-slider{
    background-image: url('/wp-content/uploads/2024/02/frisson-light-picto.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 230px;
    padding-top: 60px;
}
.frisson-slider .splide__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.frisson-slider .slide-wrapper{
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.frisson-slider .splide__slide h3{
    color: white;
    font-size: 28px;
}

.frisson-slider .splide__slide figure{
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.frisson-slider .splide__slide img{
    max-width: 190px;
}

.slider-background-color {
    --bg-color: #6C4BFF;
    background-color: var(--bg-color) !important;
    transition: background-color .6s ease;
}

.slider-background-color.slider-separators:after {
    content: '';
    background-color: var(--bg-color);
    transition: background-color .6s ease;
}

.frisson-slider .splide__arrow,
.frisson-slider .splide__arrow:hover {
    background: rgba(255,255,255,.5) !important;
}


/*----------------------------
 * Image à travers
 *----------------------------*/
.image-container {
    cursor: none;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 61.5%;
}

.image-container img, .image-container .hover-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hover-image {
    background-size: cover;
    clip-path: circle(0px at var(--x, 0) var(--y, 0));
    pointer-events: none;
}


/*----------------------------
 * Custom Cursor
 *----------------------------*/
.custom-cursor {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: difference;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    transition: transform 350ms ease;
    transform: translate(-50%, -50%) scale(.3);
    z-index: 9999999;
}
.custom-cursor--link {
    transform: translate(-50%, -50%) scale(1);
}
.custom-cursor--hide{
    display: none !important;
}

@media (pointer: coarse){
    .custom-cursor {
        display: none !important;
    }
}