@keyframes registerPulseDesktop {
    0% {
        transform: scale(1.115);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.115);
    }
}

.glow-button {
    animation: registerPulseDesktop 1s ease-in-out infinite;
    display: block;
    position: relative;
    width: 100%;
    cursor: pointer;
}

.glow-button:hover {
    animation-play-state: paused;
    transform: scale(1.08);
}

.glow-button:active {
    transform: scale(0.95);
}

/* Mobile and Tablet responsive improvements */
@media (max-width: 1279px) {
    .mobile-layout {
        background-attachment: scroll !important;
    }
}

/* iPad Mini specific styles */
@media only screen and (min-device-width: 744px) and (max-device-width: 768px),
only screen and (min-width: 744px) and (max-width: 768px) {
    .mobile-layout {
        background-attachment: scroll !important;
    }

    /* Text image for iPad Mini */
    .mobile-layout .mobile-text-image {
        max-width: 42rem !important;
    }

    /* Model images stacking for iPad Mini */
    .mobile-layout .max-h-\[200px\].relative.z-10 {
        margin-top: 2rem;
        max-height: 300px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 330px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 330px !important;
    }
}

/* iPad Air and smaller tablets */
@media only screen and (min-device-width: 768px) and (max-device-width: 834px),
only screen and (min-width: 768px) and (max-width: 834px) {
    .mobile-layout {
        background-attachment: scroll !important;
    }

    /* Optimize form for iPad */
    .mobile-layout form {
        max-width: 100%;
    }

    /* Better spacing for iPad */
    .mobile-layout .max-h-\[350px\] {
        margin-top: 30px;
        max-height: 320px;
    }

    /* Model images stacking for iPad Air */
    .mobile-layout .max-h-\[200px\].relative.z-10 {
        max-height: 280px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 310px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 340px !important;
    }

    /* Title image for iPad Air */
    .mobile-layout .max-h-\[32px\] {
        max-height: 40px !important;
    }

    /* Form container max-width for iPad */
    .mobile-layout .max-w-\[20\.5rem\] {
        max-width: 30rem !important;
    }

    /* Social icons for iPad Air */
    .mobile-layout .max-h-\[22px\] {
        max-height: 33px !important;
    }

    /* Text image for iPad Air */
    .mobile-layout .mobile-text-image {
        max-width: 48rem !important;
    }

    /* Model images stacking for mobile */
    .mobile-layout .max-h-\[200px\].relative.z-10 {
        margin-top: 2rem;
        max-height: 350px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 390px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 390px !important;
    }
}

/* iPad Mini 768x1024 specific - override iPad Air for this size */
@media only screen and (device-width: 768px) and (device-height: 1024px),
only screen and (width: 768px) and (height: 1024px),
only screen and (device-width: 1024px) and (device-height: 768px),
only screen and (width: 1024px) and (height: 768px) {
    .mobile-layout .mobile-text-image {
        max-width: 32rem !important;
    }

    .mobile-layout .max-h-\[200px\].relative.z-10 {
        max-height: 280px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 300px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 300px !important;
    }
}

/* iPad Pro specific styles */
@media only screen and (min-device-width: 835px) and (max-device-width: 1024px),
only screen and (min-width: 835px) and (max-width: 1024px) {
    .mobile-layout {
        background-attachment: scroll !important;
    }

    /* Optimize form for iPad Pro */
    .mobile-layout form {
        max-width: 100%;
    }

    /* Larger model image for iPad Pro */
    .mobile-layout .max-h-\[350px\] {
        max-height: 500px !important;
    }

    /* Model images stacking for iPad Pro */
    .mobile-layout .max-h-\[200px\].relative.z-10 {
        max-height: 450px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 500px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 540px !important;
    }

    /* Larger title image for iPad Pro */
    .mobile-layout .max-h-\[32px\] {
        max-height: 50px !important;
    }

    /* Form container max-width for iPad Pro */
    .mobile-layout .max-w-\[20\.5rem\] {
        max-width: 40rem !important;
    }

    /* Social icons for iPad Pro */
    .mobile-layout .max-h-\[22px\] {
        max-height: 36px !important;
    }

    /* Text image for iPad Pro */
    .mobile-layout .mobile-text-image {
        max-width: 60rem !important;
    }

    /* Model images stacking for mobile */
    .mobile-layout .max-h-\[200px\].relative.z-10 {
        max-height: 500px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 540px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 540px !important;
    }
}

/* Ensure form inputs are properly sized on mobile */
@media (max-width: 640px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        font-size: 12px !important;
        /* Prevents zoom on iOS */
    }

    /* Model images stacking for mobile */
    .mobile-layout .max-h-\[200px\].relative.z-10 {
        margin-top: 2rem;
        max-height: 200px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9 {
        max-height: 240px !important;
    }

    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 240px !important;
    }

    /* Text image for mobile */
    .mobile-layout .mobile-text-image {
        max-width: 20rem !important;
    }
}

/* iPhone Pro (390x844) specific */
@media only screen and (device-width: 390px) and (device-height: 844px),
only screen and (width: 390px) and (height: 844px),
only screen and (device-width: 844px) and (device-height: 390px),
only screen and (width: 844px) and (height: 390px) {
    .mobile-layout .mobile-text-image {
        max-width: 25rem !important;
    }

    .mobile-layout .max-h-\[200px\].relative.z-10 {
        margin-top: 0rem;
        max-height: 180px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9,
    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 210px !important;
    }
}

/* iPhone Pro Max (430x932) specific */
@media only screen and (device-width: 430px) and (device-height: 932px),
only screen and (width: 430px) and (height: 932px),
only screen and (device-width: 932px) and (device-height: 430px),
only screen and (width: 932px) and (height: 430px) {
    .mobile-layout .mobile-text-image {
        max-width: 25rem !important;
    }

    .mobile-layout .max-h-\[200px\].relative.z-10 {
        margin-top: 1.75rem;
        max-height: 190px !important;
    }

    .mobile-layout .max-h-\[220px\].absolute.z-9,
    .mobile-layout .max-h-\[240px\].absolute.z-9 {
        max-height: 220px !important;
    }
}

/* Background layer - full width */
.desktop-layout::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/background-desktop.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
}

/* Prevent desktop layout from shrinking - maintain fixed size for 1920x1080 */
.desktop-layout {
    min-width: 1920px;
    width: 1920px;
    position: relative;
    background: transparent !important;
}

/* Center by default when screen is 1920px or wider */
@media (min-width: 1920px) {
    .desktop-layout {
        margin: 0 auto;
    }
}

/* Align to right - hide left side when screen is smaller than 1920px */
@media (max-width: 1919px) {
    .desktop-layout {
        margin-left: auto;
        margin-right: 0;
        /* Force align to right - hide left side when screen is smaller */
    }

    /* Ensure body scrolls from right to left */
    body {
        direction: ltr;
    }

    /* Force scroll to start from right side */
    html {
        direction: ltr;
    }
}

/* Fixed width for desktop layout containers */
.desktop-layout .flex.flex-row.items-start {
    width: 1920px;
}

.desktop-layout .flex.flex-row.items-start>div:first-child {
    width: 1280px !important;
    /* 65% of 1920px */
    flex-shrink: 0;
}

.desktop-layout .flex.flex-row.items-start>div:last-child {
    width: 640px !important;
    /* 35% of 1920px */
    flex-shrink: 0;
}

/* Fixed width for bottom section - content layer */
.desktop-layout .flex.flex-row.fixed.bottom-0.z-10 {
    width: 1920px !important;
    max-width: 1920px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-shrink: 0;
}

/* Align bottom content to right - hide left side when screen is smaller than 1920px */
@media (max-width: 1919px) {
    .desktop-layout .flex.flex-row.fixed.bottom-0.z-10 {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }
}

/* Fixed bottom layer image - fit full screen width */
.desktop-layout .fixed.bottom-0.z-0 {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
}

.desktop-layout .fixed.bottom-0.z-0>div {
    width: 100% !important;
}

.desktop-layout .fixed.bottom-0.z-0 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}

/* Fixed width for bottom content divs */
.desktop-layout .desktop-bottom-text {
    width: 1000px !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
    /* 60% of 1920px */
    flex-shrink: 0;
}

.desktop-layout .desktop-bottom-social {
    width: 536px !important;
    min-width: 536px !important;
    max-width: 536px !important;
    /* 20% of 1920px */
    flex-shrink: 0;
}

.desktop-layout .desktop-bottom-coin {
    width: 384px !important;
    min-width: 384px !important;
    max-width: 384px !important;
    /* 20% of 1920px */
    flex-shrink: 0;
}

/* Enable horizontal scroll when viewport is smaller than desktop layout */
@media (min-width: 1280px) {
    body {
        overflow-x: auto;
    }
}