/* ============================================
   VTIX Landing Page - Shared Styles
   Extraído de novo/index.html
   ============================================ */

/* Font Configuration */
body { 
    font-family: 'Inter', sans-serif; 
}

/* ============================================
   GLASS EFFECTS
   ============================================ */
.glass-panel {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================
   CURVE SEPARATORS
   ============================================ */
.curve-separator {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='60' viewBox='0 0 20 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 1C18 1 1 15 1 30C1 45 18 59 18 59' stroke='%23CBD5E1' stroke-width='0.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 40px;
}

.curve-separator-right { 
    transform: scaleX(-1); 
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Carousel Animation */
.carousel-track {
    animation: vertical-scroll 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes vertical-scroll {
    0%, 25% { transform: translateY(0); }
    33.33%, 58.33% { transform: translateY(-33.33%); }
    66.66%, 91.66% { transform: translateY(-66.66%); }
    100% { transform: translateY(0); }
}

/* Floating Phone Animation */
@keyframes float-phone {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(-1deg); }
}

.animate-float-phone {
    animation: float-phone 6s ease-in-out infinite;
}

/* ============================================
   BORDER GRADIENT EFFECT
   ============================================ */
[style*="--border-gradient"]::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: var(--border-radius-before, inherit);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: var(--border-gradient);
    pointer-events: none;
}

/* ============================================
   3D TRANSFORM UTILITIES
   ============================================ */
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }