/* Base styles (mobile first) */

/* SVGs fade-in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #0033FF;
    max-width: 320px;
    margin: auto;
}

/* Скрываем пустой контейнер изображения на мобильных */
.toggle-container > div:last-child {
    display: none;
}

/* Left block (text) */
.toggle-profile {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    text-align: left;
}

.toggle-text {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    font-family: 'Onest', sans-serif;
    color: #0033FF;
}

.toggle-profile p {
    margin-top: 0px;
    margin-bottom: 40px;
}

.greeting {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.greeting svg {
    height: 72px;
    width: auto;
    margin-bottom: -12.5px;
}

.greeting .toggle-image {
        width: 152px;
        height: 190px;
}

.brand-logos {
    width: 100%;
    max-width: 415px;
    height: auto;
}

/* Dimmable items (we only dim them on toggle) */
.dim {
    opacity: 0.2;
    transition: opacity 0.1s;
}

/* Toggle wrapper inside .toggle-profile */
.toggle-wrapper {
    display: flex;
    padding: 18px 24px;
    margin-bottom: 40px;
    background-color: hsla(228, 100%, 50%, 0.05);
    align-items: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #0033FF;
    cursor: pointer;
    width: calc(100vw - 40px);
    margin-left: calc(50% - 50vw + 20px);
    margin-right: auto;
    justify-content: space-between;
    border-radius: 100px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Исправление для iOS Safari - компенсация разницы в viewport */
@supports (-webkit-touch-callout: none) and (not (overflow: -webkit-marquee)) {
    @media only screen and (max-width: 959px) {
        .toggle-wrapper {
            width: calc(100vw - 20px);
            margin-left: calc(50% - 50vw + 10px);
        }
    }
}

.toggle-wrapper:active {
    background-color: hsla(228, 100%, 50%, 0.08);
}
@media (hover:hover) and (pointer:fine){
    .toggle-wrapper:hover {
        background-color: hsla(228, 100%, 50%, 0.08);
    }
}

.toggle-wrapper > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    cursor: pointer;
    width: 100%;
    max-width: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    padding: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #0033FF;
    transition: 0.1s;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: #0033FF;
    transition: 0.1s;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #0033FF;
    box-shadow: inset 0 0 0 2px #0033FF;
}

.toggle-switch input:checked + .toggle-slider:before {
    background-color: white;
    transform: translateX(16px);
    -webkit-transform: translateX(16px);
    -moz-transform: translateX(16px);
}

/* The image on the right side */
.toggle-image {
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    /* Header */
    .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    width: 100%;
    height: 36px;
}

.header-name {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.header-links {
    display: flex;
    gap: 20px;
}

.header-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.header-link svg {
    height: 20px;
    width: 20px;
    position: relative;
}

.link-text {
    display: none;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.header-link:active path { fill: #0033FF; }
.header-link:active .link-text { color: #0033FF; }
@media (hover:hover) and (pointer:fine){
    .header-link:hover path { fill: #0033FF; }
    .header-link:hover .link-text { color: #0033FF; }
}

.cta {
    padding: 9px;
    background-color: #0033FF;
    border-radius: 100px;
}
.cta svg {
    height: 18px;
    width: 18px;
}
.cta path {
    fill: #fff;
}
.cta .link-text {
    color: #fff;
}
.cta:active { background-color: #000; color: #fff; }
.cta:active path{ fill: #fff; }
.cta:active .link-text { color: #fff; }
@media (hover:hover) and (pointer:fine){
    .cta:hover { background-color: #000; color: #fff; }
    .cta:hover path{ fill: #fff; }
    .cta:hover .link-text { color: #fff; }
}

/* Responsive Breakpoints */
@media (min-width: 480px) {
    .toggle-container {
        max-width: 440px;
    }
    /* .toggle-wrapper остается на всю ширину на мобильных */
    .greeting svg {
        height: 100px;
        width: auto;
        margin-bottom: -17px;
    }
    .greeting .toggle-image {
        width: 208px;
        height: 260px;
    }
}

@media (min-width: 640px) {
    .toggle-container {
        max-width: 600px;
    }
    /* .toggle-wrapper остается на всю ширину на мобильных */
    .greeting {
        margin-bottom: 2px;
    }
    .greeting svg {
        height: 135px;
        width: auto;
        margin-bottom: -16px;
    }
    .greeting .toggle-image {
        width: 288px;
        height: 360px;
    }
}

@media (min-width: 801px) {
    .toggle-wrapper {
        width: calc(100vw - 96px);
        margin-left: calc(50% - 50vw + 48px);
    }
}

@media (min-width: 960px) {
    .toggle-container {
        max-width: 880px;
        flex-direction: row;
        text-align: left;
        padding-top: 60px;
        padding-bottom: 100px;
        gap: 40px;
        position: relative;
    }
    
    /* Показываем контейнер изображения на десктопе */
    .toggle-container > div:last-child {
        position: relative;
        display: flex;
        height: 600px;
        align-items: flex-start;
    }
    
    .toggle-profile {
        width: 100%;
        height: 600px;
        flex-direction: column;
        text-align: left;
        margin-bottom: 0;
    }
    .toggle-image {
        width: 450px;
        height: 600px;
        mask: url(#userpic-mask);
        -webkit-mask: url(#userpic-mask);
        mask-type: alpha;
        -webkit-mask-type: alpha;
    }
    .toggle-wrapper {
        width: fit-content;
        margin: 0;
        padding: 18px 24px;
        border-radius: 30px;
    }
    .toggle-wrapper > label {
        width: fit-content;
        max-width: none;
        padding: 0;
    }
    .greeting {
        margin-bottom: 16px;
    }
    .greeting svg {
        height: 56px;
        width: auto;
    }
    .brand-logos {
        width: 350px;
        height: auto;
    }
    
    .link-text {
        display: inline-block;
    }

    .cta {
        padding: 6px 15px;
        background-color: #0033FF;
        border-radius: 100px;
    }
    
    .header {
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0 auto;
        z-index: 10;
        padding: 0;
    }

    .link-text {
        display: inline-block;
    }

    .header-links {
        gap: 32px;
    }

    .header-link svg {
        height: 18px;
        width: 18px;
        position: relative;
        left: 1px;
        top: -1px;
    }
}

@media (min-width: 1200px) {
    .toggle-container {
        max-width: 960px;
        gap: 70px;
    }
    .greeting svg {
        height: 62px;
        width: auto;
    }
    .brand-logos {
        width: 415px;
        height: auto;
    }
}

/* Chromatic aberration effect */
@keyframes chromaticMove {
    0% {
        filter: blur(0.75px)
               drop-shadow(16px 5px 0 rgba(0, 255, 0,0.5)) 
               drop-shadow(-16px -5px 0 rgba(255,0,0,0.3));
    }
    25% {
        filter: blur(0.5px)
               drop-shadow(-5px -1px 0 rgba(0, 255, 0,0.5)) 
               drop-shadow(5px 1px 0 rgba(255,0,0,0.3));
    }
    55% {
        filter: blur(0.3px)
               drop-shadow(0 0 0 rgba(0, 255, 0,0.5)) 
               drop-shadow(0 0 0 rgba(255,0,0,0.3));
    }
    100% {
        filter: none;
    }
}

/* Container for the whole content to apply the effect */
.content-wrapper {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    animation: fadeInUp .5s ease-out .2s both;
}

.content-wrapper.chromatic-shift {
    animation: chromaticMove 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}