/* Global styles */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logo styles */
.logo-container {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
}

.logo-container img {
    filter: drop-shadow(0 0 0.5rem rgba(168, 85, 247, 0.2));
    transition: all 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform-origin: center;
    transform: scale(1);
}

.logo-container:hover img {
    filter: drop-shadow(0 0 0.75rem rgba(168, 85, 247, 0.3));
    transform: scale(1.02);
}

.logo-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(168, 85, 247, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Video container styles */
.video-container {
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.video-container .aspect-video {
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Store button styles */
.store-button {
    position: relative;
    display: inline-block;
}

.store-button>div {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.store-button.app-store>div:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.store-button.google-play>div {
    backdrop-filter: blur(12px);
}

.store-button.google-play:hover>div {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Hero section styles */
.space-y-8>*+* {
    margin-top: 2rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(45deg, #60A5FA, #A855F7, #EC4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Card hover effects */
.bg-white\/5 {
    transition: transform 0.3s ease, background-color 0.3s ease;
    backdrop-filter: blur(12px);
}

.bg-white\/5:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Page load animations */
.loaded .fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Text highlight effect */
::selection {
    background: rgba(168, 85, 247, 0.4);
    color: white;
}

/* Promotional code styles */
code {
    font-family: 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.05em;
}

/* Gift codes styles */
.code-item {
    position: relative;
    transition: all 0.3s ease;
}

.code-item code {
    position: relative;
    display: block;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: all;
    backdrop-filter: blur(4px);
}

.code-item code:hover {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.code-item code::after {
    content: 'Click to copy';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: all 0.3s ease;
}

.code-item code:hover::after {
    opacity: 1;
    transform: translate(-4px, -50%);
}

.code-item.copied code {
    background-image: linear-gradient(to right, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
}

.code-item.copied code::after {
    content: 'Copied!';
    color: #A855F7;
    animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-4px, -50%);
    }

    20% {
        opacity: 1;
        transform: translate(-4px, -50%);
    }

    80% {
        opacity: 1;
        transform: translate(-4px, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-4px, -50%);
    }
}

/* Rounded number styles */
.rounded-full {
    position: relative;
    overflow: hidden;
}

.rounded-full::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rounded-full:hover::after {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .logo-container {
        padding: 0.75rem;
    }

    .logo-container img {
        max-width: 200px;
    }

    .video-container {
        margin: 0 -1rem;
    }

    .video-container .aspect-video {
        border-radius: 0;
    }

    .store-button>div {
        padding: 0.75rem 1rem;
    }

    .store-button i {
        width: 1.5rem;
        height: 1.5rem;
    }

    .store-button .text-xl {
        font-size: 1rem;
    }

    .store-button .text-xs {
        font-size: 0.65rem;
    }

    .text-4xl {
        font-size: 2rem;
    }

    .text-2xl {
        font-size: 1.5rem;
    }

    .text-xl {
        font-size: 1.25rem;
    }

    .space-y-8>*+* {
        margin-top: 1.5rem;
    }

    .space-y-6>*+* {
        margin-top: 1rem;
    }

    .code-item code {
        font-size: 0.875rem;
        padding: 0.75rem;
    }

    .code-item code::after {
        display: none;
    }

    .rounded-full {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.75rem;
    }
}

/* Video guide card styles */
.video-guide-card {
    transition: all 0.3s ease;
}

.video-guide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
        0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

.video-guide-card .aspect-video {
    transition: transform 0.3s ease;
}

.video-guide-card:hover .aspect-video {
    transform: scale(1.02);
}