@charset "utf-8";
<!-- Inline Styles (Animations) -->
    <style>
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fadeInUp 0.8s ease-out forwards; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .animate-marquee { display: flex; width: max-content; animation: marquee 30s linear infinite; }
        @keyframes rotateGlass { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .animate-spin-slow { animation: rotateGlass 12s linear infinite; }
        .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); }
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .reveal.active { opacity: 1; transform: translateY(0); }
	
	
    .btn-spotlight::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: radial-gradient(circle 100px at var(--x) var(--y), rgba(255,255,255,0.4), transparent);
        opacity: 0; transition: opacity 0.4s;
    }
    .btn-spotlight:hover::before { opacity: 1; }

    .reveal-stagger-container [data-reveal-child] {
        opacity: 0; transform: translateY(30px);
        animation: reveal-up 1s cubic-bezier(0.2, 1, 0.4, 1) forwards;
    }
    .reveal-stagger-container div[data-magnetic-text] {
        opacity: 0; transform: translateY(30px);
        animation: reveal-up 1s cubic-bezier(0.2, 1, 0.4, 1) forwards;
        animation-delay: 0.1s;
    }
    .reveal-stagger-container p { animation-delay: 0.2s; }
    .reveal-stagger-container div.grid { animation-delay: 0.3s; }
    .reveal-stagger-container a { animation-delay: 0.4s; }

    @keyframes reveal-up { to { opacity: 1; transform: translateY(0); } }

    /* Анімація для мобільного фону */
    .mobile-bg-animate {
        background-image: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 40%);
        animation: pulse-bg 10s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse-bg {
        0%, 100% { background-size: 100% 100%; opacity: 0.7; }
        50% { background-size: 150% 150%; opacity: 1; }
    }
 
    
    [data-magnetic-button] {
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    
    .interactive-word {
        @apply relative font-bold text-st-primary cursor-default border-b border-st-accent/30;
    }
    .interactive-word::after {
        content: attr(data-tooltip);
        @apply absolute bottom-full left-0 mb-2 px-3 py-1 bg-st-primary text-st-accent text-[9px] font-black uppercase tracking-widest opacity-0 invisible transition-all duration-300 transform translate-y-1;
    }
    .interactive-word:hover::after {
        @apply opacity-100 visible translate-y-0;
    }
    
    /* Адаптив для великих текстів */
    @media (max-width: 768px) {
        #about-studio h2 { font-size: 3rem; }
    }


    /* Адаптив для сітки */
    @media (max-width: 1024px) {
        #advantages .grid {
            border-right: 1px solid rgba(26, 60, 52, 0.1);
        }
    }

 </style>