/*
    Theme Name: Creosoft
    Version: 1.0
    Author Name: Ashishya Barik
*/

/* Core Styling Rules */
[x-cloak] { 
    display: none !important; 
}

.perspective-1000 {
    perspective: 1000px;
}

/* Initial state: flat/straight. Hover state: Elegant structural tilt matching the snapshot layout */
.tilt-card {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
}

.group:hover .tilt-card {
    transform: rotateX(12deg) rotateY(-18deg) rotateZ(4deg);
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0f1115;
}

::-webkit-scrollbar-thumb {
    background: #ff0100;
    border-radius: 5px;
    border: 2px solid #0f1115;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
}

/* Custom Selection Styles */
::selection {
    background-color: #ff0100;
    color: #ffffff;
}

html { 
    scroll-behavior: smooth; 
}

/* Premium Ambient Abstract Mesh Gradients */
.mesh-gradient-hero {
    background-color: #0f1115;
    background-image: 
        radial-gradient(at 10% 20%, rgba(255, 1, 0, 0.15) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(58, 61, 65, 0.4) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(15, 17, 21, 1) 0px, transparent 100%);
}

.mesh-gradient-light {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 1, 0, 0.03) 0px, transparent 40%),
        radial-gradient(at 100% 100%, rgba(58, 61, 65, 0.05) 0px, transparent 40%);
}

.mesh-gradient-dark {
    background-color: #0f1115;
    background-image: 
        radial-gradient(at 100% 0%, rgba(255, 1, 0, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(58, 61, 65, 0.3) 0px, transparent 50%);
}

/* Continuous Ticker animation for automatic brand loop */
@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-ticker {
    display: flex;
    width: max-content;
    animation: ticker 20s linear infinite;
}