/* ============================================================
 * MAGALS GARAGE — SHARED STYLES (Performance Optimized)
 * Extracted from inline <style> blocks for cross-page caching.
 * ============================================================ */

/* ============================================================
 * CRITICAL CSS — Above-the-fold essentials
 * Inlined via <style> in <head> for instant render:
 *   body { background-color: #050505; color: #e5e2e1; font-family: 'Manrope', sans-serif; }
 * ============================================================ */

/* Material Symbols baseline */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
 * TONAL ARCHITECTURE (design.md §2)
 * "Never flat black. Surface tones must breathe."
 * Background system: #131313 charcoal → #0a0502 amber-void → #050505 deep black
 * ============================================================ */
:root {
    --mg-surface:      #131313;
    --mg-surface-mid:  #0c0804;
    --mg-surface-deep: #050505;
    --mg-accent:       #E48F22;
}

body {
    background-color: var(--mg-surface-deep);
    color: #e5e2e1;
    font-family: 'Manrope', sans-serif;
    position: relative;
    overscroll-behavior: none;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        var(--mg-surface)      0%,
        var(--mg-surface-mid)  55%,
        var(--mg-surface-deep) 100%
    );
    will-change: transform; /* GPU-accelerated layer */
}

.editorial-title {
    letter-spacing: -0.02em;
    line-height: 1.1;
}

::selection {
    background-color: rgba(228, 143, 34, 0.3);
    color: white;
}

/* Story wrapper sits on transparent — inherits the body gradient */
.story-to-instagram-wrapper {
    background: transparent;
    position: relative;
}

.story-to-instagram-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(228, 143, 34, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Hero Animation Section sizing */
.hero-animation-container {
    height: 100vh;
}

#hero-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Infinite marquee animation */
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
#marquee-track:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    #marquee-track { animation: none; }
}

/* === Service Card LED System === */
.servico-card .led-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #E48F22 30%, #ffb86c 50%, #E48F22 70%, transparent 100%);
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: center;
    transition: opacity 350ms ease-out, transform 350ms ease-out, box-shadow 350ms ease-out;
    border-radius: 2px 2px 0 0;
    z-index: 20;
    will-change: transform, opacity;
}
.servico-card:hover .led-bar,
.servico-card.ativo .led-bar {
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 18px 4px rgba(228, 143, 34, 0.55), 0 0 40px 8px rgba(228, 143, 34, 0.2);
}
.servico-card {
    transition: box-shadow 350ms ease-out, transform 350ms ease-out;
    will-change: transform;
}
.servico-card:hover,
.servico-card.ativo {
    box-shadow: 0 0 0 1px rgba(228,143,34,0.25), 0 20px 50px rgba(0,0,0,0.5), 0 0 60px rgba(228,143,34,0.08) !important;
    transform: translateY(-4px);
}

/* Subtle text glow for key branding words */
.text-glow-amber {
    text-shadow: 0 0 15px rgba(228, 143, 34, 0.4), 0 0 30px rgba(228, 143, 34, 0.2);
}

/* ============================================================
 * PERFORMANCE HINTS
 * will-change on animated elements, contain on isolated sections
 * ============================================================ */
.reel-card {
    will-change: transform;
    contain: layout style;
}

/* Hero poster fallback while frames load */
.hero-poster-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.5s ease-out;
}
.hero-poster-fallback.loaded {
    opacity: 0;
    pointer-events: none;
}
