/* Explain: Styles for interactive UI components like buttons, cards, and animations. */
.btn-neon {
    background: rgba(0, 240, 255, 0.05);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-neon:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 25px var(--primary-color), inset 0 0 15px var(--primary-color);
}

.card-cyber {
    background: var(--surface-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-cyber:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 12px 40px 0 rgba(0, 240, 255, 0.15);
}

.service-reveal {
    opacity: 0;
    transform: translate3d(0, 3rem, 0) scale(0.96);
    filter: blur(10px);
    transition: opacity 0.8s ease var(--reveal-delay, 0ms), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), filter 0.8s ease var(--reveal-delay, 0ms), box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-reveal.service-reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.service-card-cyber.service-reveal-visible:hover {
    transform: translate3d(0, -0.5rem, 0) scale(1.02);
}

.service-card-cyber::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(115deg, transparent 35%, rgba(0, 240, 255, 0.18) 50%, transparent 65%);
    opacity: 0;
    transform: translateY(-85%) rotate(8deg);
    transition: transform 0.9s ease, opacity 0.5s ease;
    pointer-events: none;
}

.service-card-cyber.service-reveal-visible::before,
.service-card-cyber:hover::before {
    opacity: 1;
    transform: translateY(85%) rotate(8deg);
}

.service-card-cyber::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    border: 1px solid rgba(0, 240, 255, 0.08);
    box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.08);
    pointer-events: none;
}

.service-icon-pulse {
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    animation: service-icon-pulse 2.8s ease-in-out infinite;
}

@keyframes service-icon-pulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    }

    50% {
        box-shadow: 0 0 24px rgba(0, 240, 255, 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .service-icon-pulse {
        animation: none;
    }
}

.store-flip-card {
    min-height: 360px;
    perspective: 1400px;
}

.store-flip-card-inner {
    position: relative;
    min-height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.store-flip-card:hover .store-flip-card-inner,
.store-flip-card:focus-within .store-flip-card-inner,
.store-flip-card.is-flipped .store-flip-card-inner {
    transform: rotateY(180deg);
}

.store-flip-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: 360px;
    flex-direction: column;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.store-flip-card-front {
    transform: rotateY(0deg);
}

.store-flip-card-back {
    transform: rotateY(180deg);
    box-shadow: inset 0 0 32px rgba(0, 240, 255, 0.08);
}

.store-flip-card:hover .store-flip-card-face,
.store-flip-card.is-flipped .store-flip-card-face {
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow: 0 0 34px rgba(0, 240, 255, 0.14);
}

.billing-panel {
    display: none;
}

.billing-panel.is-active {
    display: block;
}

.billing-toggle {
    color: var(--text-muted);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.billing-toggle.is-active {
    background: var(--primary-color);
    color: #020617;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.28);
}

.store-status.is-success,
#cartMessage.is-success {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(0, 240, 255, 0.08);
    color: var(--primary-color);
}

.store-status.is-error,
#cartMessage.is-error {
    border-color: rgba(255, 0, 60, 0.45);
    background: rgba(255, 0, 60, 0.08);
    color: #fb7185;
}

@media (max-width: 767px) {
    #hero-warp .sticky {
        min-height: 100svh;
    }

    #warp-phase-3 {
        width: min(100%, 92vw);
        transform: translateZ(-5000px) scale(0.78) !important;
    }

    #warp-phase-3 h1 {
        font-size: clamp(2.25rem, 10vw, 3.25rem);
        line-height: 1.08;
        margin-bottom: 1rem;
    }

    #warp-phase-3 p {
        max-width: 20rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    #warp-phase-3 .btn {
        min-height: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    main > section {
        text-align: center;
    }

    main > section h1,
    main > section h2,
    main > section h3,
    main > section h4,
    main > section p {
        text-align: center;
    }

    main > section p {
        margin-left: auto;
        margin-right: auto;
    }

    #about .space-y-6,
    #services .card-cyber,
    #testimonials .card-cyber {
        align-items: center;
        text-align: center;
    }

    #store article,
    #store .store-flip-card-face {
        text-align: center;
    }

    #store article {
        align-items: stretch;
    }

    #store article > .relative,
    #store article > .grid,
    #store .store-flip-card,
    #store .store-flip-card-inner,
    #store .store-flip-card-face {
        width: 100%;
    }

    #store .store-flip-card,
    #store .store-flip-card-inner {
        min-height: 0;
        perspective: none;
    }

    #store .store-flip-card-inner {
        transform: none !important;
    }

    #store .store-flip-card-face {
        position: relative;
        inset: auto;
        min-height: 0;
        align-items: stretch;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        transform: none !important;
    }

    #store .store-flip-card-back {
        display: none;
    }

    #store .store-flip-card.is-flipped .store-flip-card-front {
        display: none;
    }

    #store .store-flip-card.is-flipped .store-flip-card-back {
        display: flex;
    }

    #store .store-flip-card-front > .relative.z-10.mb-4.inline-flex {
        margin-left: auto;
        margin-right: auto;
    }

    #about .space-y-6 > .w-16 {
        margin-left: auto;
        margin-right: auto;
    }

    #about .pt-4,
    #store .flex.w-full.flex-col,
    #contact .space-y-8 .flex,
    #store .store-flip-card-back .mt-3.flex {
        justify-content: center;
    }

    #contact .space-y-8 .flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #store .mb-5.flex {
        flex-direction: column;
        justify-content: center;
    }

    #store .store-flip-card-back .mb-4.flex {
        align-items: center;
        text-align: center;
    }

    #store .store-flip-card-back .billing-toggle-group {
        width: 100%;
    }

    main > section form label,
    main > section input,
    main > section textarea,
    main > section select {
        text-align: center;
    }
}

@media (hover: none) {
    .store-flip-card:hover .store-flip-card-inner,
    .store-flip-card:focus-within .store-flip-card-inner {
        transform: none;
    }

    .store-flip-card.is-flipped .store-flip-card-inner {
        transform: rotateY(180deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-flip-card-inner {
        transition: none;
    }

    .store-flip-card:hover .store-flip-card-inner,
    .store-flip-card:focus-within .store-flip-card-inner,
    .store-flip-card.is-flipped .store-flip-card-inner {
        transform: none;
    }

    .store-flip-card-face {
        position: relative;
        transform: none;
    }

    .store-flip-card-back {
        margin-top: 1rem;
    }
}

.text-glow {
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

.heading-glow {
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.4), 0 0 40px rgba(112, 0, 255, 0.4);
}

.earth-spin-side {
    animation: earth-side-spin 18s linear infinite;
    transform-style: preserve-3d;
    will-change: transform;
}

@keyframes earth-side-spin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}