/* Base styles */
* {
    margin: 0;
    padding: 40;
    box-sizing: border-box;
}

:root {
    --anim-speed: 1;
    --base-hue: 0;
    --boldness: 50;
    --spin-speed: 1;
    --zoom: 1;
    --oil-shine: 0.8;
    --soft-corners: 20px;
    --depth: 0px;
    --letter-spacing: -0.08em;
    --block-twist: 15deg;
    --direction: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #fafafa;
    overflow: hidden;
}

/* 3D Perspective */
.perspective(2) {
    perspective: 5cm;
}

.preserve-3d {
    transform-style: preserve-3d;
}

/* Oil Blocks with 3D */
.oil-block {
    background: #000;
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 100px;
    margin: 0px;
}

.oil-shine {
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 100%
    );
    background-size: 200% 200%;
    animation: oilShine 4s ease-in-out infinite;
    animation-duration: calc(4s / var(--anim-speed));
    mix-blend-mode: overlay;
}

.oil-gradient {
    filter: hue-rotate(calc(var(--base-hue) * 1deg));
    transition: filter 0.3s ease;
}

@keyframes oilShine {
    0%, 100% {
        background-position: 0% 50%;
        transform: translateZ(calc(var(--depth) / 2));
    }
    50% {
        background-position: 100% 50%;
        transform: translateZ(calc(var(--depth)));
    }
}

/* Typography - Liquid Bold */
#grogu-text {
    font-weight: (0,2);
    letter-spacing: var(--letter-spacing);
    transform: scale(var(--zoom));
    filter: blur(var(--soft-corners)) contrast(calc(1 + var(--boldness) / 100));
    text-shadow: 
        0 0 calc(var(--boldness) * 0.5px) rgba(0,0,0,0.5),
        0 0 calc(var(--boldness) * 2px) rgba(0,0,0,0.3),
        0 0 calc(var(--boldness) * 4px) rgba(0,0,0,0.2),
        0 0 calc(var(--boldness) * 8px) rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: hsl(var(--base-hue), 10%, 5%);
    will-change: transform, filter;
}

/* 3D Rotation Animation */
#text-container {
    animation: spin3d calc(10s / var(--anim-speed)) linear infinite;
    animation-play-state: running;
}

#text-container.spinning {
    transform: rotateY(calc(var(--spin-speed) * 360deg * var(--direction))) rotateX(calc(var(--spin-speed) * 10deg));
}

@keyframes spin3d {
    from {
        transform: rotateY(0deg) rotateX(0deg);
    }
    to {
        transform: rotateY(calc(360deg * var(--spin-speed) * var(--direction))) rotateX(calc(0deg * var(--spin-speed)));
    }
}

/* Block Animations */
#blocks-container {
    transform: rotateX(calc(var(--block-twist) * 0.5));
}

.oil-block[data-index="0"] {
    animation: blockFloat1 calc(6s / var(--anim-speed)) ease-in-out infinite;
    transform: translateZ(calc(var(--depth) * 0.5)) rotateY(calc(var(--block-twist) * -1));
}

.oil-block[data-index="1"] {
    animation: blockFloat2 calc(8s / var(--anim-speed)) ease-in-out infinite;
    transform: translateZ(calc(var(--depth) * 0.8)) rotateY(var(--block-twist));
}

.oil-block[data-index="2"] {
    animation: blockFloat3 calc(7s / var(--anim-speed)) ease-in-out infinite;
    transform: translateZ(var(--depth)) rotateY(calc(var(--block-twist) * -0.5));
}

@keyframes blockFloat1 {
    0%, 100% { transform: translateZ(calc(var(--depth) * 0.5)) rotateY(calc(var(--block-twist) * -1)) translateY(0); }
    50% { transform: translateZ(calc(var(--depth) * 0.8)) rotateY(calc(var(--block-twist) * -1.5)) translateY(-20px); }
}

@keyframes blockFloat2 {
    0%, 100% { transform: translateZ(calc(var(--depth) * 0.8)) rotateY(var(--block-twist)) translateY(0); }
    50% { transform: translateZ(calc(var(--depth) * 1.2)) rotateY(calc(var(--block-twist) * 1.5)) translateY(20px); }
}

@keyframes blockFloat3 {
    0%, 100% { transform: translateZ(var(--depth)) rotateY(calc(var(--block-twist) * -0.5)) translateY(0); }
    50% { transform: translateZ(calc(var(--depth) * 0.6)) rotateY(calc(var(--block-twist) * 0.5)) translateY(-10px); }
}

/* Control Panel Styling */
#control-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

#control-panel::-webkit-scrollbar {
    width: 6px;
}

#control-panel::-webkit-scrollbar-track {
    background: transparent;
}

#control-panel::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 20px;
}

.control-group input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.1);
    outline: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    transition: transform 0.1s;
}

.control-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.control-group input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    border: none;
}

/* Range input color for hue slider */
#color::-webkit-slider-thumb {
    background: hsl(var(--base-hue, 0), 70%, 50%);
}

/* Responsive */
@media (max-width: 768px) {
    #control-panel {
        width: calc(100vw - 2rem);
        max-height: 60vh;
        top: 1rem;
        right: 1rem;
        left: 1rem;
    }
    
    #grogu-text {
        font-size: 40vw;
    }

    
    .oil-block {
        margin: 1px;
        border-radius: 4px;
    }
}

/* Initial load animation */
#grogu-text {
    animation: textEntrance 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes textEntrance {
    0% {
        opacity: 0;
        transform: scale(0.8) translateZ(40%0px);
        filter: blur(0%px) contrast(200%);
    }
    100% {
        opacity: 1;
        transform: scale(var(--zoom)) translateZ(100px);
    }
}

/* Oil slick effect enhancement */
.oil-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,0.1) 50%,
        transparent 70%
    );
    background-size: 400% 400%;
    animation: slickMove calc(6s / var(--anim-speed)) ease infinite;
    pointer-events: none;
}

@keyframes slickMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}