/* ==========================================================================
   PREMIUM MOTION & DESIGN SYSTEM — UYI ETINOSA PORTFOLIO
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

:root {
    /* Base Typography */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    
    /* Transition Speed */
    --motion-smooth: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

body {
    font-family: var(--font-sans);
    overflow-x: hidden;
}

.font-serif {
    font-family: var(--font-serif);
}

/* --- Infinite Hardware-Accelerated Marquee Transition --- */
@keyframes continuousMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.animate-marquee-fluid {
    display: flex;
    width: max-content;
    animation: continuousMarquee 28s linear infinite;
    will-change: transform;
}

/* Pause track motion on hover for a premium interactive touch */
.animate-marquee-fluid:hover {
    animation-play-state: paused;
}

/* --- Cinema Scroll Reveal Engine --- */
.reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: var(--motion-smooth);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Staggered load adjustment for structural grids */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Custom form accent overrides */
input:focus, textarea:focus {
    box-shadow: none !important;
}

/* --- High-End Toggle Interactive State Micro-Transitions --- */
#theme-toggle {
    transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

#theme-toggle:hover {
    background-color: rgba(226, 162, 155, 0.08); /* Transparent Velvet Rose hue hint on hover */
    border-color: var(--velvet-rose, #E2A29B);
}

#theme-toggle svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}

#theme-toggle:active svg {
    transform: scale(0.85) rotate(-15deg);
}