/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    /* Base layer - Deep navy */
    background-color: #0F172A;
    /* Layer 4 - Subtle tech grid texture */
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23ffffff' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E");
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Keyframes for subtle drifting animation */
@keyframes drift-slow {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(10%, 15%) scale(1.1);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes drift-reverse {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-15%, -10%) scale(0.9);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* Animated background blobs */
.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    will-change: transform;
}

.bg-blob-indigo {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.6) 0%, rgba(99, 102, 241, 0.2) 50%, transparent 100%);
    animation: drift-slow 25s ease-in-out infinite;
}

.bg-blob-cyan {
    background: radial-gradient(circle, rgba(34, 211, 238, 0.5) 0%, rgba(34, 211, 238, 0.2) 50%, transparent 100%);
    animation: drift-reverse 30s ease-in-out infinite;
}

/* Floating objects around chameleon */
@keyframes orbit-1 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(30px, -40px);
    }
    50% {
        transform: translate(60px, -20px);
    }
    75% {
        transform: translate(30px, 20px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes orbit-2 {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-50px, -30px);
    }
    66% {
        transform: translate(-20px, 50px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes orbit-3 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-40px, -60px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.floating-obj {
    position: absolute;
    z-index: 5;
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.3));
    will-change: transform;
}

.floating-obj-1 {
    animation: orbit-1 24s ease-in-out infinite;
    top: 15%;
    left: -10%;
}

.floating-obj-2 {
    animation: orbit-2 30s ease-in-out infinite;
    top: 60%;
    right: -15%;
}

.floating-obj-3 {
    animation: orbit-3 36s ease-in-out infinite;
    bottom: 10%;
    left: 5%;
}

/* Circular orbit animations for countries */
@keyframes orbit-circle-1 {
    0% {
        transform: rotate(0deg) translateX(120px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(120px) rotate(-360deg);
    }
}

@keyframes orbit-circle-2 {
    0% {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }
    100% {
        transform: rotate(-360deg) translateX(150px) rotate(360deg);
    }
}

@keyframes orbit-circle-3 {
    0% {
        transform: rotate(0deg) translateX(180px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(180px) rotate(-360deg);
    }
}

@keyframes orbit-circle-4 {
    0% {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
    }
    100% {
        transform: rotate(-360deg) translateX(100px) rotate(360deg);
    }
}

.country-flag {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    will-change: transform;
    transform-origin: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.country-flag-1 { animation: orbit-circle-1 20s linear infinite; }
.country-flag-2 { animation: orbit-circle-2 25s linear infinite; }
.country-flag-3 { animation: orbit-circle-3 30s linear infinite; }
.country-flag-4 { animation: orbit-circle-4 18s linear infinite; }
.country-flag-5 { animation: orbit-circle-1 22s linear infinite reverse; }
.country-flag-6 { animation: orbit-circle-2 28s linear infinite reverse; }
.country-flag-7 { animation: orbit-circle-3 35s linear infinite reverse; }
.country-flag-8 { animation: orbit-circle-4 16s linear infinite reverse; }
.country-flag-9 { animation: orbit-circle-1 24s linear infinite; }
.country-flag-10 { animation: orbit-circle-2 26s linear infinite reverse; }
.country-flag-11 { animation: orbit-circle-3 32s linear infinite; }
.country-flag-12 { animation: orbit-circle-4 19s linear infinite reverse; }

/* Language switcher balls */
.lang-ball {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.lang-ball:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.lang-ball.active {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glow-shadow {
    filter: drop-shadow(0 0 60px rgba(99, 102, 241, 0.8)) 
            drop-shadow(0 0 100px rgba(99, 102, 241, 0.5))
            drop-shadow(0 0 140px rgba(34, 211, 238, 0.4))
            drop-shadow(0 0 200px rgba(34, 211, 238, 0.2));
}

.ps3-wave {
    position: relative;
    overflow: visible;
}
.ps3-wave::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(15, 23, 42, 0.0) 0%,
        rgba(99, 102, 241, 0.10) 25%,
        rgba(34, 211, 238, 0.10) 50%,
        rgba(139, 92, 246, 0.10) 75%,
        rgba(15, 23, 42, 0.0) 100%);
    background-size: 200% 200%;
    animation: ps3Gradient 8s ease-in-out infinite alternate;
    border-radius: 24px;
    filter: blur(6px);
}
@keyframes ps3Gradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.tilt-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 400ms ease, box-shadow 400ms ease;
    will-change: transform;
}
.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-6deg) translateZ(0);
    box-shadow: 0 25px 80px rgba(99, 102, 241, 0.25);
}
.tilt-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: radial-gradient(120px 80px at -20% -20%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
                linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 1;
}
.tilt-card:hover::after {
    opacity: 1;
    animation: shineSweep 2.8s ease-in-out infinite;
}
@keyframes shineSweep {
    0% { background-position: -40% -40%, 0% 0%; }
    50% { background-position: 120% 120%, 100% 100%; }
    100% { background-position: -40% -40%, 0% 0%; }
}

.chameleon-glow-wrapper {
    position: relative;
}

.chameleon-glow-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, rgba(34, 211, 238, 0.075) 40%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

.gradient-text {
    background: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-button {
    background: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%);
    transition: all 0.3s ease;
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
}

/* ============================================
   HERO SECTION ANIMATIONS - Deep Immersion
   ============================================ */

/* Breathing Card Effect - медленная пульсация карточки */
@keyframes breathing-card {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3),
                    0 0 80px rgba(34, 211, 238, 0.2);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 25px 80px rgba(99, 102, 241, 0.4),
                    0 0 120px rgba(34, 211, 238, 0.3);
    }
}

.hero-card-wrapper {
    animation: breathing-card 8s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(34, 211, 238, 0.1) 100%);
    position: relative;
    transition: all 0.3s ease;
}

/* 3D Parallax Effect for Simon */
.hero-parallax-container {
    perspective: 1200px;
    transform-style: preserve-3d;
    position: relative;
}

.simon-image {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    will-change: transform;
    transform-origin: center center;
    cursor: pointer;
}

/* Parallax effect при наведении на контейнер - Симон выдвигается вперед быстрее фона */
.hero-parallax-container:hover {
    transform: translateZ(0);
}

.hero-parallax-container:hover .simon-image {
    transform: translateZ(30px) translateY(-10px) scale(1.08);
    filter: drop-shadow(0 0 70px rgba(99, 102, 241, 0.8)) 
            drop-shadow(0 0 110px rgba(99, 102, 241, 0.5))
            drop-shadow(0 0 150px rgba(34, 211, 238, 0.4))
            drop-shadow(0 0 210px rgba(34, 211, 238, 0.2));
}

/* Анимация качания чемодана при наведении на Симона */
@keyframes suitcase-sway {
    0%, 100% {
        transform: translateZ(30px) translateY(-10px) scale(1.08) rotateZ(0deg);
    }
    25% {
        transform: translateZ(30px) translateY(-10px) scale(1.08) rotateZ(-3deg) translateX(-5px);
    }
    75% {
        transform: translateZ(30px) translateY(-10px) scale(1.08) rotateZ(3deg) translateX(5px);
    }
}

.simon-image:hover {
    animation: suitcase-sway 0.8s ease-in-out;
    filter: drop-shadow(0 0 80px rgba(99, 102, 241, 0.9)) 
            drop-shadow(0 0 120px rgba(99, 102, 241, 0.6))
            drop-shadow(0 0 160px rgba(34, 211, 238, 0.5))
            drop-shadow(0 0 220px rgba(34, 211, 238, 0.3)) !important;
}

/* Shimmer Effect для кнопки "Stay Connected" - бегущий блик каждые 3 секунды */
@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(300%) skewX(-15deg);
        opacity: 0;
    }
}

.stay-connected-btn {
    position: relative;
    background: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%);
    overflow: hidden;
}

.stay-connected-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.stay-connected-btn:hover::before {
    animation-duration: 1.2s;
}

.stay-connected-btn span.relative {
    position: relative;
    z-index: 2;
}

/* Scrollbar Hide for Category Tabs */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Pulse animation for skeleton loader */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Jungle 3D Parallax for Steps section */
.jungle-parallax {
    position: relative;
    overflow: visible;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.jungle-card,
.jungle-simon,
.jungle-leaf {
    transition: transform 400ms ease-out;
    will-change: transform;
}

.jungle-card {
    position: relative;
    z-index: 20;
}

.jungle-simon {
    position: absolute;
    bottom: 100%;
    right: -220px;
    width: 600px;
    max-width: none;
    z-index: 40;
}

.jungle-leaf {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.jungle-leaf-back {
    opacity: 0.4;
    filter: blur(2px);
    z-index: 5;
}

.jungle-leaf-front {
    z-index: 50;
}

.jungle-leaf-back-left {
    bottom: -80px;
    left: -140px;
    width: 260px;
}

.jungle-leaf-back-right {
    top: -140px;
    right: -120px;
    width: 220px;
}

.jungle-leaf-front-left {
    bottom: -120px;
    left: -120px;
    width: 280px;
}

.jungle-leaf-front-right {
    top: -120px;
    right: -160px;
    width: 260px;
}

.jungle-leaf-float-slow {
    animation: leaf-float 14s ease-in-out infinite;
}

.jungle-leaf-float-fast {
    animation: leaf-float 18s ease-in-out infinite;
}

@keyframes leaf-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

/* ============================================
   STEPS SECTION - Tech Guide Styling
   ============================================ */

/* Animated Flow Line - Signal Animation */
.flow-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: flow-dash 3s ease-in-out infinite;
}

.flow-arrow {
    opacity: 0;
    animation: flow-arrow 3s ease-in-out infinite;
}

@keyframes flow-dash {
    0% {
        stroke-dashoffset: 400;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -400;
    }
}

@keyframes flow-arrow {
    0%, 40% {
        opacity: 0;
    }
    50%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Step Icon Animation on Card Hover */
.tilt-card:hover .step-icon-container {
    transform: scale(1.1);
    animation: icon-pulse 0.6s ease-in-out;
}

@keyframes icon-pulse {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* ============================================
   FEATURES SECTION - Premium Styling
   ============================================ */

/* Reveal Animation - Cards slide up on scroll */
.reveal-card {
    opacity: 0;
    transform: translateY(40px);
    animation: reveal-up 0.8s ease-out forwards;
    animation-play-state: paused;
}

@keyframes reveal-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Glow Effect - Radial gradient following mouse */
.feature-card {
    position: relative;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-4px);
}

/* Individual Glow Colors for each card */
.feature-glow-cyan {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(34, 211, 238, 0.2),
        rgba(59, 130, 246, 0.15),
        transparent 40%
    );
}

.feature-glow-purple {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(139, 92, 246, 0.2),
        rgba(99, 102, 241, 0.15),
        transparent 40%
    );
}

.feature-glow-blue {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.2),
        rgba(37, 99, 235, 0.15),
        transparent 40%
    );
}

/* Gradient Border on Hover using pseudo-element */
.feature-card-cyan,
.feature-card-purple,
.feature-card-blue {
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: border-color 0.3s ease;
}

.feature-card-cyan::before,
.feature-card-purple::before,
.feature-card-blue::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.feature-card-cyan::before {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.6), rgba(59, 130, 246, 0.6));
}

.feature-card-purple::before {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(99, 102, 241, 0.6));
}

.feature-card-blue::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.6));
}

.feature-card-cyan:hover::before,
.feature-card-purple:hover::before,
.feature-card-blue:hover::before {
    opacity: 1;
}

.feature-card-cyan:hover {
    border-color: transparent;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.feature-card-purple:hover {
    border-color: transparent;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.feature-card-blue:hover {
    border-color: transparent;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Icon Drop Shadow with Color */
.feature-icon-cyan svg {
    filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.6)) 
            drop-shadow(0 0 25px rgba(59, 130, 246, 0.4));
}

.feature-icon-purple svg {
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6)) 
            drop-shadow(0 0 25px rgba(99, 102, 241, 0.4));
}

.feature-icon-blue svg {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)) 
            drop-shadow(0 0 25px rgba(37, 99, 235, 0.4));
}

/* ============================================
   OPTIMIZED TAILWIND CLASSES (via @apply)
   Reduce HTML volume by extracting repeating patterns
   ============================================ */

/* Country Card - used 20+ times */
.country-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: all 0.3s;
}

.country-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Buy Button - used 10+ times */
.buy-button {
    margin-top: auto;
    width: 100%;
    background: linear-gradient(135deg, #6366F1 0%, #22D3EE 100%);
    color: white;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    transition: all 0.3s;
}

@media (min-width: 768px) {
    .buy-button {
        font-size: 1rem;
    }
}

.buy-button:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
    transform: translateY(-2px);
}

/* Plan Chip - used 30+ times */
.plan-chip {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: rgb(229, 231, 235);
    transition: all 0.3s;
}

.plan-chip:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Step Card - used 3 times */
.step-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    min-height: 380px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
    .step-card {
        padding: 4rem;
    }
}

/* Tab Button - used 3 times */
.tab-button {
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .tab-button {
        font-size: 1rem;
    }
}

.tab-button-active {
    background-color: rgb(6, 182, 212);
    color: white;
}

.tab-button-inactive {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(156, 163, 175);
}

.tab-button-inactive:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Feature Card Base - used 3 times */
.feature-card-base {
    position: relative;
    border-radius: 1rem;
    padding: 2rem;
    background: rgba(17, 18, 37, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

@media (min-width: 768px) {
    .feature-card-base {
        padding: 2.5rem;
    }
}