/* ==========================================================================
   Fused Poly World Limited - Global Stylesheet (Premium Dark)
   ========================================================================== */

/* --- 1. Global Resets & Base --- */
:root {
    --fp-purple: #7e22ce;
    --fp-dark: #4c1d95;
    --fp-light: #a855f7;
}

html {
    scroll-behavior: smooth;
    background-color: #0a0a0a; /* zinc-950 */
}

/* Custom Hexagon Pattern Background */
.bg-hex-pattern {
    background-image: url("https://www.transparenttextures.com/patterns/cubes.png"); /* Subtle geometric pattern */
    opacity: 0.15; /* Keeps it subtle */
}

/* Dark Overlay adjustment for lightness */
.overlay-gradient {
    background: linear-gradient(to top, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.2));
}
html {
    scroll-behavior: smooth;
    background-color: #0a0a0a; /* zinc-950 */
}

/* Custom Text Selection Highlight */
::selection {
    background-color: var(--fp-light);
    color: #ffffff;
}

/* --- 2. Dark Mode Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #27272a; /* zinc-800 */
    border-radius: 9999px; /* Curvy Scrollbar */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--fp-purple);
}

/* --- 3. GSAP Initial Animation States --- */
/* Elements are hidden via CSS first to prevent FOUC */
.hero-reveal, 
.stat-reveal, 
.reveal-content, 
.service-card, 
.form-container {
    opacity: 0;
    visibility: hidden; 
}

/* --- 4. Form Overrides --- */
/* Removes the default arrows from number inputs for a cleaner UI */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

/* --- 5. 3D Box Flipping Engine --- */
.perspective-container {
    perspective: 1200px;
}

.flip-box {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}

.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem; /* Curvy boxes */
}

.flip-front {
    /* The Box State */
    background: linear-gradient(135deg, var(--fp-purple), var(--fp-dark));
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.flip-back {
    /* The Letter State */
    background: transparent;
    transform: rotateY(180deg);
}

/* 3D Box Engine */
.perspective-container { perspective: 1200px; }
.flip-box { position: relative; transform-style: preserve-3d; will-change: transform; }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 1rem; }
.flip-front { background: linear-gradient(135deg, var(--fp-purple), var(--fp-dark)); border: 1px solid rgba(255,255,255,0.1); }
.flip-back { background: transparent; transform: rotateY(180deg); }