@use "sass:math";
@import "../var";

.product-detail {
    @media screen and (max-width: $breakpoint-mobile) {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .__plane {
        position: relative;
        .__out {
            @include fullsize;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .__model {
            display: block;
            width: 100%;
            height: auto;
            position: relative;
            video,
            img {
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: auto;
            }
            video {
                //position: absolute;
                top: 0;
                left: 0;
                //opacity: .5;
            }
        }
        .__specs {
            @include fullsize;
            top: 0;
            left: 0;

            .__lines {
                @media screen and (max-width: $breakpoint-mobile) {
                    display: none;
                }
                svg {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }
    }

    .__spot {

        .__line {
            opacity: 0;
            transition: opacity 200ms;

        }
        .__cta {
            cursor: pointer;
            opacity: 0;
            circle {
                fill: rgba(0, 0, 0, 0);
            }

            path,
            circle {
                transition: fill 200ms, stroke 200ms, stroke-width 200ms;
            }
        }
        @media screen and (hover: hover) {
            &:hover {

                .__cta {
                    circle,
                    path {
                        //stroke: $accent-color;
                        stroke-width: 2px;
                        stroke: #fff;
                    }

                    circle {
                        fill: $accent-color;
                        stroke-width: 1px;
                    }
                }
            }
        }
        &.__active {
            .__line {
                opacity: 1;
            }

            .__cta {
                circle,
                path {
                    //stroke: $accent-color;
                    stroke-width: 2px;
                    stroke: #fff;
                }
                circle {
                    fill: $accent-color;
                    stroke-width: 1px;
                }
            }
        }
    }
    .__desc {
        position: absolute;
        @include calc-clamp(13px, 16px);
        line-height: 1.25;
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: opacity 300ms, transform 300ms;
        margin-top: 1em;
        pointer-events: none;
        &.__active {
            opacity: 1;
            margin-top: 0;
            visibility: visible;
            z-index: 10;
        }
        p {
            position: absolute;
            white-space: nowrap;
            font-weight: 500;
            text-shadow: 1px 1px 1px #fff;
        }



        @media screen and (max-width: $breakpoint-mobile) {

            left: 0% !important;
            top: 0% !important;
            transform: none !important;
            pointer-events: auto;
            cursor: pointer;
            margin-top: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,.2);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);

            &:before,
            &:after {
                width: 1.25rem;
                height: 1px;
                background: #000;
                content: '';
                position: absolute;
                right: .5rem;
                top: 1rem;
                transform-origin: 50% 50%;
                transform: rotate(45deg);
            }

            &:after {
                transform: rotate(-45deg);
            }
            
            p {
                text-align: center !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%,-50%) !important;
                background: #fff;
                padding: 1em 2em;
                box-shadow:  0 0 10px rgba(0,0,0,.25);
              
            }
        }
    }
    .__plus {
        display: block;
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        transition: transform 300ms ease;
        transform-origin: 0% 0%;
        &.__init {
            &:before {
                content: "";
                display: block;
                border-radius: 50%;
                //background: rgba(255, 224, 3, 0.62);
                transform: translate(-50%,-50%);
                position: absolute;
                //animation: __em 1.25s $easeOutQuint forwards;
                animation-iteration-count: 2;
                width: 200%;
                height: 200%;
            }
        }
        @keyframes __em {
            0%, 20% {
                width: 0%;
                height: 0%;
                opacity: 0;
            }
            70% {
                width: 240%;
                height: 240%;
                opacity: .8;
            }
            100% {
                opacity: 0;
                width: 300%;
                height: 300%;
            }
        }
        svg {
            position: relative;
            display: block;
            width: 22px;
            height: 22px;
            transform: translate(-50%,-50%);
            overflow: visible;
            @media screen and (max-width: $breakpoint-mobile) {
                width: 12px;
                height: 12px;
            }
            circle,
            path {
                stroke: #000;
                stroke-width: 1px;
                fill: transparent;
                vector-effect: non-scaling-stroke;
                transition: fill 200ms, stroke 200ms, stroke-width 200ms;
            }
        }
        &.__w {
            svg {
                circle,
                path {
                    stroke: #fff;
                }
            }
        }
        @media screen and (hover: hover) {
            &:hover {
                transform: rotate(90deg);

                svg {
                    circle,
                    path {
                        stroke: $accent-color;
                    }
                }
            }
        }
        &.__active {
            svg {
                circle,
                path {
                    //stroke: $accent-color;
                    stroke-width: 2px;
                    stroke: #fff;
                }
                circle {
                    fill: $accent-color;
                    stroke-width: 1px;
                }
            }
        }
    }


}
.__cp-01 {
    $__width: 1440;
    $__height: 800;
    @mixin __calc_pos($x, $y) {
        left: math.div($x, $__width) * 100%;
        top: math.div($y, $__height) * 100%;
    }
    .__plane {
        .__model {
            video {
                //top: 0%;
                //left: -3.5%;
                //width: 109.5%;
                opacity: 1;
            }
        }
    }


    .__desc {

        &[data-index="1"] {
            @include __calc_pos(748, 672);
        }
        &[data-index="2"] {
            @include __calc_pos(1110, 542);
        }
        &[data-index="3"] {
            @include __calc_pos(348, 248);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }
        &[data-index="4"] {
            @include __calc_pos(862, 544);
        }
        &[data-index="5"] {
            @include __calc_pos(474, 124);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }
        &[data-index="6"] {
            @include __calc_pos(208, 530);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }
        &[data-index="7"] {
            @include __calc_pos(214, 622);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }

        &[data-index="8"] {
            @include __calc_pos(776, 56);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }



    }
    .__plus {

        &[data-index="1"] {
            @include __calc_pos(577.25, 626.25);
        }

        &[data-index="2"] {
            @include __calc_pos(915.25, 437.25);
        }
        &[data-index="3"] {
            @include __calc_pos(578, 383);

        }
        &[data-index="4"] {
            @include __calc_pos(633.25, 428.25);
        }
        &[data-index="5"] {
            @include __calc_pos(680.25, 238.25);

        }
        &[data-index="6"] {
            @include __calc_pos(370.25, 483.25);

        }
        &[data-index="7"] {
            @include __calc_pos(406, 531);

        }

        &[data-index="8"] {
            @include __calc_pos(1058.25, 251.25);
        }
    }
}

.__hybrid {
    $__width: 1440;
    $__height: 800;
    .__in,
    .__out {
        transition: opacity 600ms;
    }
    .__out {
        opacity: 1;
    }
    .__in {
        opacity: 0;
    }

    &.__active {
        .__in {
            opacity: 1;
        }
        .__out {
            opacity: .3;
        }
    }

    @media screen and (hover:hover) {


        .__in {
            opacity: 0 !important;
        }
        .__out {
            opacity: 1 !important;
        }
        &:hover {
            .__in {
                opacity: 1 !important;
            }
            .__out {
                opacity: .3 !important;
            }
        }
    }
    @mixin __calc_pos($x, $y) {
        left: math.div($x, $__width) * 100%;
        top: math.div($y, $__height) * 100%;
    }

    .__desc {

        &[data-index="1"] {
            @include __calc_pos(1019, 454);
        }
        &[data-index="2"] {
            @include __calc_pos(264, 306);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }
        &[data-index="3"] {
            @include __calc_pos(214, 568);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }
        &[data-index="4"] {
            @include __calc_pos(624, 110);
            p {
                text-align: right;
                transform: translateX(-100%);
            }
        }
        &[data-index="5"] {
            @include __calc_pos(622, 346);
            p {
                text-align: center;
            }
        }
    }
    .__plus {
        &[data-index="1"] {
            @include __calc_pos(757.25, 440.25);
        }
        &[data-index="2"] {
            @include __calc_pos(522.25, 441.25);
        }
        &[data-index="3"] {
            @include __calc_pos(373.25, 508.25);

        }
        &[data-index="4"] {
            @include __calc_pos(807.25, 149.25);
        }
        &[data-index="5"] {
            @include __calc_pos(683.25, 331.25);
        }
    }
}