/**
 * Syncaption Landing Page — Main Stylesheet
 * Imports design system and provides utilities
 */

@import 'base/variables.css';
@import 'base/reset.css';
@import 'layout.css';
@import 'components.css';

/* =============================================
   View Transitions — smooth page navigation
   ============================================= */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 180ms ease both syncaption-fade-out;
}

::view-transition-new(root) {
    animation: 180ms ease both syncaption-fade-in;
}

/* Keep navbar and footer stable during page transitions */
::view-transition-old(site-navbar),
::view-transition-new(site-navbar) {
    animation: none;
}

@keyframes syncaption-fade-out {
    to { opacity: 0; }
}

@keyframes syncaption-fade-in {
    from { opacity: 0; }
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

/* =============================================================================
   Gradient Text — Gold Accent
   ============================================================================= */

.gradient-text {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title-gradient {
    background: linear-gradient(90deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-radial-gradient {
    background: radial-gradient(circle at center, var(--text-primary) 20%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================================================
   Accent Underline (for single word highlight)
   ============================================================================= */

.accent-text {
    color: var(--accent-primary);
    -webkit-text-fill-color: var(--accent-primary);
}

.accent-underline {
    position: relative;
    display: inline;
}

.accent-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-primary);
    opacity: 0.4;
    border-radius: 1px;
}