/* Ultra-Minimalist Premium Apple Theme for maegik.labs */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark: #000000;
    --text-main: #ffffff;
    --accent-orange: #ff5500;
    --font-heading: 'Space Grotesk', 'Outfit', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-dark);
    font-family: var(--font-heading);
    color: var(--text-main);
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Background Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    display: block;
}

/* Centered Container */
.cover-container {
    position: relative;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    pointer-events: none;
    perspective: 1200px;
}

/* Brand Title — maegik.labs */
.brand-title {
    pointer-events: auto;
    font-family: var(--font-heading);
    font-size: clamp(3.8rem, 11.5vw, 9.8rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.25;
    padding-bottom: 0.15em;
    padding-top: 0.05em;
    display: inline-block;
    text-align: center;
    position: relative;
    cursor: default;
    transform-style: preserve-3d;
    will-change: transform, filter;
    
    /* Smooth Apple-style entrance animation */
    opacity: 0;
    animation: appleEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.1s;

    /* Metallic Silver to Warm Orange Gradient Fill */
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f2f4f8 35%,
        #ffffff 60%,
        rgba(255, 140, 40, 0.95) 88%,
        rgba(255, 85, 0, 1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Multi-layered soft drop shadow */
    filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 50px rgba(255, 85, 0, 0.16))
            drop-shadow(0 0 90px rgba(100, 60, 240, 0.1));
            
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glowing Dot Accent */
.dot-accent {
    -webkit-text-fill-color: var(--accent-orange);
    color: var(--accent-orange);
    filter: drop-shadow(0 0 16px rgba(255, 85, 0, 0.8));
    animation: dotBreath 4s ease-in-out infinite alternate;
}

@keyframes dotBreath {
    0% { filter: drop-shadow(0 0 12px rgba(255, 85, 0, 0.6)); }
    100% { filter: drop-shadow(0 0 28px rgba(255, 85, 0, 1)); }
}

/* Subtle Hover Scale */
.brand-title:hover {
    filter: drop-shadow(0 25px 55px rgba(0, 0, 0, 0.98))
            drop-shadow(0 0 70px rgba(255, 85, 0, 0.3))
            drop-shadow(0 0 120px rgba(100, 60, 240, 0.18));
    transform: scale(1.015);
}

/* Entrance Animation Keyframes */
@keyframes appleEntrance {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .brand-title {
        letter-spacing: -0.03em;
    }
}