/* ==========================================================================
   1. THEME VARIABLES & BASE CONFIG
   ========================================================================== */
:root {
    /* Light Theme (Default) */
    --bg-primary: #D3D3D3;
    --bg-secondary: #D3D3D3;
    --text-primary: #444444; /* Lighter Charcoal (Headings) */
    --text-secondary: #4A4A4A; /* Soft Gray (Body) */
    --accent: #B0B0B0; /* Soft silver */
    --accent-hover: #999999;
    --divider: #E5E5E5; /* Faint gray */
    --overlay: rgba(0, 0, 0, 0.7);
    --navbar-bg: rgba(211, 211, 211, 0.85);
    --modal-bg: var(--bg-primary);
    --hero-outline: var(--accent);
    --hero-manifesto: var(--accent);
    --img-filter: grayscale(100%) contrast(1.05);

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-color: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    --overlay-bg: rgba(255, 255, 255, 0.95); /* Increased opacity for contrast */
    --overlay-text: #1A1A1A;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1A1A1A;
    --text-primary: #FFFFFF; /* Pure White */
    --text-secondary: #CCCCCC; /* Soft Silver */
    --accent: #D4D4D4; /* Luminous silver */
    --accent-hover: #FFFFFF;
    --divider: #2D2D2D; /* Dark charcoal */
    --overlay: rgba(0, 0, 0, 0.9);
    --navbar-bg: rgba(18, 18, 18, 0.85);
    --modal-bg: var(--bg-secondary);
    --hero-outline: var(--accent);
    --hero-manifesto: var(--accent);
    --img-filter: grayscale(100%) contrast(1.1) brightness(0.9);
    --overlay-bg: rgba(20, 20, 20, 0.95); /* Increased opacity for contrast */
    --overlay-text: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #121212;
        --bg-secondary: #1A1A1A;
        --text-primary: #FFFFFF;
        --text-secondary: #CCCCCC;
        --accent: #D4D4D4;
        --accent-hover: #FFFFFF;
        --divider: #2D2D2D;
        --overlay: rgba(0, 0, 0, 0.9);
        --navbar-bg: rgba(18, 18, 18, 0.85);
        --modal-bg: var(--bg-secondary);
        --hero-outline: var(--accent);
        --hero-manifesto: var(--accent);
        --img-filter: grayscale(100%) contrast(1.1) brightness(0.9);
        --overlay-bg: rgba(20, 20, 20, 0.95);
        --overlay-text: #FFFFFF;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
* { font-family: 'Montserrat', sans-serif !important; } /* Montserrat Mandate */

body {
    background-color: var(--bg-primary);
    color: var(--text-secondary); /* Global Body Color */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem; /* Standardized High-Fashion Scale */
    font-weight: 300;
    line-height: 1.8; /* Airy but readable */
    letter-spacing: 0.02em;
    overflow-x: hidden;
    transition: var(--transition-color);
}

@media (max-width: 768px) {
    body { font-size: 0.85rem; }
}

/* Global Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--text-primary);
    font-weight: 700; /* Bold for Titles */
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   0. PRELOADER & GRAIN
   ========================================================================== */
.preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-primary);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    /* Emergency Failsafe: Auto-hide if JS crashes */
    animation: preloaderFailsafe 1s ease 4s forwards;
}

@keyframes preloaderFailsafe {
    to { opacity: 0; visibility: hidden; }
}

.preloader-text {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--text-primary);
    overflow: hidden;
}

.char {
    display: inline-block;
    opacity: 0; transform: translateY(100%); /* Initial state for GSAP */
}

/* Utilitários */
.section { padding: 10rem 2rem; max-width: 1200px; margin: 0 auto; }
.bg-beige { background-color: var(--bg-secondary); width: 100vw; margin-left: calc(-50vw + 50%); }
.container { max-width: 1200px; margin: 0 auto; position: relative; }

/* Collection Page Layout & Theme */
body.collection-page {
    /* background-color: #1A1A1A; Removed to allow global theme persistence */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.collection-page main {
    flex: 1;
}

/* ==========================================================================
   2. NAVEGAÇÃO & THEME TOGGLE
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0; width: 100%; z-index: 1000;
    padding: 2rem 0; /* Generous initial padding */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: background, backdrop-filter, padding, border-color;
}

/* Active Scroll State */
.navbar.scrolled {
    padding: 1rem 0; /* Shrink height */
    background: var(--navbar-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Dark Mode Scrolled State */
[data-theme="dark"] .navbar.scrolled {
    background: rgba(26, 26, 26, 0.7);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-content {
    max-width: 1400px; margin: 0 auto; /* Wider container for desktop */
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 60px; /* Generous horizontal padding */
    height: 100%; /* Ensure full height for alignment */
}

@media (max-width: 768px) {
    .nav-content { padding: 0 2rem; }
}

.logo {
    font-family: var(--font-primary);
    font-weight: 500; font-size: 0.8rem;
    text-decoration: none; 
    color: #FFFFFF;
    letter-spacing: 0.15em;
    transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0; /* GSAP handles reveal */
}

.navbar.scrolled .logo {
    color: var(--text-primary);
}
[data-theme="dark"] .navbar.scrolled .logo {
    color: #E0E0E0; /* Soft Silver */
}

.nav-links { display: flex; list-style: none; gap: 2.5rem; }
.nav-links a { 
    font-family: var(--font-secondary);
    text-decoration: none; 
    color: #FFFFFF;
    font-size: 0.7rem; text-transform: uppercase; font-weight: 400;
    letter-spacing: 0.2em; 
    transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    opacity: 0; /* GSAP handles reveal */
}

.navbar.scrolled .nav-links a {
    color: var(--text-primary);
}
[data-theme="dark"] .navbar.scrolled .nav-links a {
    color: #E0E0E0;
}

/* Custom Underline Hover Animation */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0; height: 1px;
    bottom: -5px; left: 50%;
    background-color: currentColor;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%; left: 0;
}

/* Prism Theme Toggle (Header) */
.theme-toggle-prism {
    background: none; border: none; cursor: pointer;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; /* Initial White */
    transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    position: relative;
    opacity: 0.7; /* Subtle idle state */
    margin-left: 2rem;
}

.theme-toggle-prism:hover {
    opacity: 1;
}

.navbar.scrolled .theme-toggle-prism {
    color: var(--text-primary);
}
[data-theme="dark"] .navbar.scrolled .theme-toggle-prism {
    color: #E0E0E0;
}

.icon-sun, .icon-moon {
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

/* Light Mode Default: Sun Visible, Moon Hidden */
[data-theme="light"] .icon-sun { transform: translateY(0); opacity: 1; }
[data-theme="light"] .icon-moon { transform: translateY(20px); opacity: 0; }

/* Dark Mode: Moon Visible, Sun Hidden */
[data-theme="dark"] .icon-sun { transform: translateY(-20px); opacity: 0; }
[data-theme="dark"] .icon-moon { transform: translateY(0); opacity: 1; }

/* Entrance Animation handled by GSAP */
.theme-toggle-prism {
    opacity: 0; /* GSAP handles reveal */
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Transparent Header Mode for Story Section */
.navbar.transparent-mode {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.navbar.transparent-mode .logo,
.navbar.transparent-mode .nav-links a,
.navbar.transparent-mode .theme-toggle-prism {
    color: #FFFFFF !important;
}

.navbar.transparent-mode .menu-toggle .bar {
    background-color: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.menu-toggle { display: none; }


/* ==========================================================================
   3. HERO PREMIUM
   ========================================================================== */
.hero-premium {
    position: relative; /* Standard Flow */
    top: 0; left: 0;
    width: 100%; height: 100vh; /* Full Viewport Height */
    z-index: 0; /* Z-Index Audit */
    background-color: var(--bg-primary); /* Theme Match for Continuity */
    display: flex; align-items: flex-end; justify-content: flex-start; /* Bottom-Left Alignment */
    overflow: hidden;
    padding: 0 60px 80px 60px; /* Consistent with header padding */
}

/* Background Wrapper for Parallax & Zoom */
.hero-bg-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; /* Z-Index Audit */
    overflow: hidden;
}

.hero-bg-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    /* Initial state set by GSAP (blur, scale) */
    will-change: transform, filter, opacity; /* Performance Optimization */
    backface-visibility: hidden;
    transform: translateZ(0); /* GPU Force */
}

/* Fake Blur Optimization Layer */
.hero-bg-blur {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0;
    filter: blur(15px); /* Static Blur (Cheap) */
    z-index: 0; /* Sits on top of hero-bg-img (-1) */
    pointer-events: none;
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Atmosphere: Radial Gradient Overlay */
.hero-overlay-radial {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 20%, rgba(0,0,0,0.9) 100%);
    opacity: 0; /* Animated by GSAP */
    z-index: 2; pointer-events: none;
}

/* Film Grain Overlay */
.hero-grain {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.07; pointer-events: none; z-index: 2;
    mix-blend-mode: overlay;
}

/* Content Wrapper */
.hero-content-wrapper {
    position: relative; z-index: 1; /* Z-Index Audit */
    text-align: left;
    max-width: 800px;
    display: none; /* Visual Hygiene: Remove text overlay */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.hero-main-title h1 {
    font-family: var(--font-primary);
    font-size: 1.8rem; /* Refined, smaller scale */
    font-weight: 700; line-height: 1.1;
    color: #FFFFFF;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
    text-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Subtle lift */
}

.font-light {
    font-weight: 300;
}

.font-bold {
    font-weight: 700; /* Bolder weight for 'Fenster' */
}

.serif.outline {
    -webkit-text-stroke: 0; /* Remove outline style */
    color: #FFFFFF; font-style: normal; position: relative; z-index: 1;
    font-weight: 400;
}

/* Rising Veil Animation */
.hero-word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.2em; /* Increased to prevent clipping of descenders */
    margin-right: 0.4em; /* Intentional gap between words */
}

.hero-word {
    display: inline-block;
    transform: translateY(100%);
    /* GSAP handles animation */
    will-change: transform;
}

.hero-word-wrapper:nth-child(2) {
    margin-left: 0;
}

.hero-manifesto {
    margin-top: 0; display: block; overflow: hidden; /* For mask */
}

.hero-manifesto p {
    font-family: var(--font-secondary); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; 
    color: #FFFFFF;
    font-weight: 300; /* Light weight */
    transform: translateY(100%);
    /* GSAP handles animation */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.scroll-indicator {
    position: absolute; bottom: 4rem; right: 4rem; /* Bottom Right */
    left: auto; transform: none;
    display: flex; flex-direction: column; pointer-events: none;
    align-items: center; gap: 1rem; z-index: 20;
}
.scroll-indicator span {
    font-family: var(--font-secondary); font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase;
    color: #FFFFFF; writing-mode: vertical-rl; text-orientation: mixed;
    opacity: 0; /* GSAP handles reveal */
}

.scroll-line {
    width: 1px; height: 60px;
    background-color: rgba(255,255,255,0.3);
    position: relative; overflow: hidden;
}
.scroll-line::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #FFFFFF;
    transform: translateY(-100%);
    animation: scrollLineAnim 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

@keyframes scrollLineAnim {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes heroZoomOut {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

/* ==========================================================================
   3.5 ARTIST MANIFESTO
   ========================================================================== */
.section-manifesto {
    padding: 10rem 10vw 2rem; /* Reduced bottom padding */
    background-color: var(--bg-primary);
    transition: var(--transition-color);
    text-align: left;
    will-change: transform, opacity; /* Performance Hygiene */
}

[data-theme="dark"] .section-manifesto {
    background-color: #1A1A1A; /* Deep anthracite */
}

.manifesto-content {
    max-width: 900px; /* Expanded Editorial Width */
    margin: 0; /* Left align */
}

.manifesto-content p {
    font-family: var(--font-secondary);
    font-size: 0.9rem; /* Standardized */
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.manifesto-content h2 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: left;
}

/* Scrollytelling Animation */
.scrolly-text {
    opacity: 0.2;
    filter: blur(2px);
    transform: translateY(20px);
    transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.scrolly-text.in-view {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
}

.manifesto-content .highlight {
    color: var(--accent);
    font-weight: 400;
}

@media (max-width: 768px) {
    .section-manifesto {
        padding: 6rem 5vw; /* 90% Width Mobile Layout */
    }
}

/* ==========================================================================
   4. COLEÇÃO EDITORIAL
   ========================================================================== */
.section-editorial { 
    padding: 2rem 2rem 12rem; /* Reduced top padding */
    background-color: var(--bg-secondary);
    position: relative; 
    overflow: hidden;
    transition: var(--transition-color); 
}

/* Grain Overlay for Section */
.section-editorial::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02; pointer-events: none; z-index: 0;
}

/* Ensure content sits above grain */
.section-editorial .container { position: relative; z-index: 1; }

/* Dark mode override */
[data-theme="dark"] .section-editorial { 
    background-color: var(--bg-secondary); 
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
}
[data-theme="dark"] .section-editorial::before { opacity: 0.05; }

.editorial-header { margin-bottom: 8rem; max-width: 650px; }

.eyebrow {
    text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.65rem;
    color: var(--accent); display: block; margin-bottom: 1rem;
    transition: color 0.5s ease;
}

.editorial-title {
    font-family: var(--font-primary); font-size: 1.8rem;
    font-weight: 700; line-height: 1.1; margin-bottom: 2rem; color: var(--text-primary);
    letter-spacing: -0.02em;
    transition: color 0.5s ease;
}

.editorial-manifesto {
    font-family: var(--font-secondary); font-size: 0.9rem; line-height: 1.8;
    color: var(--text-secondary); max-width: 500px;
}
.grid-colecao { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2rem; /* Vertical gap increased for offset feel */
    margin-bottom: 12rem;
    padding: 0 2rem;
}

.obra-card {
    cursor: pointer; 
    position: relative;
    display: flex; 
    flex-direction: column;
    /* Asymmetrical Rhythm: Offset even items */
    perspective: 1000px; /* Enable 3D space */
    transition: transform 0.1s linear; /* For magnetic effect */
}

.grid-colecao .obra-card:nth-child(even) {
    margin-top: 4rem; /* Static offset */
}

.obra-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4; /* Portrait aspect ratio for gallery feel */
    overflow: hidden;
    background-color: var(--bg-secondary);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
    z-index: 1;
}

.obra-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.1s linear; /* For Loupe zoom source */
}

/* Metadata Styling */
.obra-info {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: difference; /* Ensure visibility over any image */
}

[data-theme="dark"] .obra-info {
    background: rgba(31, 27, 24, 0.9);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.obra-title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: #FFFFFF; /* Difference blend mode handles contrast */
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.obra-meta {
    display: none; /* Keep it minimal */
}

/* Responsive */
@media (max-width: 1024px) {
    .grid-colecao { grid-template-columns: repeat(2, 1fr); gap: 6rem 3rem; }
    .grid-colecao .obra-card:nth-child(even) { margin-top: 3rem; }
}

@media (max-width: 768px) {
    /* 1. The 'Magazine' Layout (Asymmetric Stack) */
    .grid-colecao { 
        grid-template-columns: 1fr; 
        padding: 0 1.5rem; 
    }
    
    .grid-colecao .obra-card:nth-child(even) { margin-top: 0; }
    
    /* Zigzag Rhythm */
    .grid-colecao .obra-card:nth-child(odd) {
        margin-right: 10%; /* Align Left */
    }
    .grid-colecao .obra-card:nth-child(even) {
        margin-left: 15%; /* Align Right */
    }

    /* 2. Center-Focus Interaction Base State */
    .obra-image-wrapper { 
        transform: scale(0.92); /* Start slightly smaller */
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    /* Active Focus State (Applied by JS) */
    .obra-card.mobile-focus .obra-image-wrapper {
        transform: scale(1.05);
        box-shadow: 0 20px 50px -10px rgba(0,0,0,0.2);
    }

    /* 5. Minimalist Labels */
    .obra-info { 
        opacity: 0; transform: translateY(20px); /* Hidden initially */
        position: relative; top: auto; left: auto; mix-blend-mode: normal; text-align: left; margin-top: 1rem; 
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .obra-card.mobile-focus .obra-info { opacity: 1; transform: translateY(0); }
    .obra-title { color: var(--text-primary); font-size: 1.2rem; text-shadow: none; font-style: italic; font-family: var(--font-primary); }
}

.cta-full-collection { text-align: center; margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--divider); transition: border-color 0.5s ease; }

.btn-editorial {
    font-family: var(--font-secondary); text-decoration: none; color: var(--text-primary); font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 4px;
    display: inline-flex; align-items: center; gap: 2rem; transition: var(--transition);
}
.btn-editorial:hover { gap: 3rem; color: var(--accent); }
.btn-editorial svg { stroke: var(--text-primary); transition: stroke 0.5s ease; }
.btn-editorial:hover svg { stroke: var(--accent); }


/* ==========================================================================
   5. MODAL DE DETALHES
   ========================================================================== */
/* Cinematic Modal */
.modal {
    display: none; /* Toggled to flex via JS */
    position: fixed; z-index: 99999; /* Layering Fix: Top of stack */
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: var(--bg-primary); /* Solid background for immersion */
    opacity: 0; visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    padding: 0;
    overflow: hidden; /* Desktop default */
    align-items: stretch; justify-content: center;
}
[data-theme="dark"] .modal {
    background-color: rgba(18, 16, 14, 0.9);
}

.modal.active {
    display: flex;
    opacity: 1; visibility: visible;
}

/* Modal Content (The Book/Card) */
/* Removed .modal-content wrapper styles to allow full-screen layout */

/* Layout Split */
.modal-body {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
}
@media (min-width: 992px) {
    .modal-body { flex-direction: row; }
}

/* Image Section (65%) */
.modal-img-container {
    width: 100%; height: 50%;
    position: relative; overflow: hidden;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 992px) {
    .modal-img-container { width: 60%; height: 100%; }
}

.modal-img-container img {
    width: auto; height: 100%; max-width: 100%; object-fit: contain;
    transform-origin: top left;
    /* Transition handled by JS for FLIP, or CSS for simple open */
    will-change: transform;
}

/* Text Section (35%) */
.modal-detalhes {
    width: 100%; height: 50%;
    padding: 3rem;
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
}
@media (min-width: 992px) {
    .modal-detalhes { width: 40%; height: 100%; padding: 6rem; }
}

/* Typography & Elements */
.modal-detalhes h2 {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--text-primary);
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.separador {
    width: 40px; height: 1px; background: var(--accent);
    margin-bottom: 2rem;
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Description Text */
.modal-detalhes p {
    font-size: 0.9rem; line-height: 1.8; color: var(--text-secondary);
    margin-bottom: 1rem;
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal-preco {
    font-family: var(--font-primary); font-size: 1.2rem; color: var(--text-primary);
    margin-top: auto; /* Push to bottom */
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Close Button */
.close-btn {
    position: absolute; top: 2rem; right: 2rem;
    color: var(--text-primary);
    cursor: pointer; z-index: 10;
    opacity: 0;
    transition: color 0.3s ease, transform 0.3s ease;
    width: auto; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    background: none;
}

.close-btn:hover {
    color: var(--accent);
    transform: rotate(90deg);
}
.close-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; }

/* Staggered Animations */
.modal.active .modal-detalhes h2 {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.4s;
}

.modal.active .separador,
.modal.active .modal-detalhes p,
.modal.active .modal-preco {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.5s;
}

.modal.active .close-btn {
    opacity: 1;
    transition-delay: 0.6s;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Closing State */
.modal.closing {
    opacity: 0;
    visibility: hidden;
}


/* ==========================================================================
   6. SECÇÃO SOBRE & FOOTER
   ========================================================================== */
.section-sobre {
    padding: 12rem 2rem;
    overflow: hidden;
    background-color: var(--bg-secondary);
    transition: var(--transition-color);
}
.sobre-editorial-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 8rem; align-items: start; }
.sobre-visual .image-wrapper { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 3/4; 
    background: var(--bg-primary); 
    transition: background-color 0.5s ease; 
}
@supports not (aspect-ratio: 3/4) {
    .sobre-visual .image-wrapper { padding-bottom: 133.33%; height: 0; }
}
.img-artista {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 2s var(--transition), filter 0.5s ease;
}

.reveal-mask { 
    /* Remove Masks */
    -webkit-clip-path: none !important;
    clip-path: none !important;
    will-change: clip-path;
}
.image-overlay-texture { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; }

.sobre-conteudo { padding-top: 2rem; }
.nome-artista {
    font-family: var(--font-primary); font-size: 1.8rem; line-height: 1;
    margin-bottom: 3rem; letter-spacing: -2px; color: var(--text-primary); font-weight: 700;
    transition: color 0.5s ease;
}

.sobre-bio {
    /* Editorial Columnar Flow */
    column-gap: 3rem;
}
@media (min-width: 1024px) {
    .sobre-bio { column-count: 2; }
}

.sobre-bio p {
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-secondary); 
    margin-bottom: 1.5rem;
    max-width: none; 
    font-weight: 300; 
    break-inside: avoid;
    transition: color 0.5s ease, opacity 1s cubic-bezier(0.2, 0, 0.2, 1), transform 1s cubic-bezier(0.2, 0, 0.2, 1);
}

.sobre-bio strong {
    font-weight: 500;
    color: var(--text-primary);
}

/* Paragraph Staggering */
.sobre-bio p.reveal:nth-child(1) { transition-delay: 0.1s; }
.sobre-bio p.reveal:nth-child(2) { transition-delay: 0.2s; }
.sobre-bio p.reveal:nth-child(3) { transition-delay: 0.3s; }
.sobre-bio p.reveal:nth-child(4) { transition-delay: 0.4s; }
.sobre-bio p.reveal:nth-child(5) { transition-delay: 0.5s; }
.sobre-bio p.reveal:nth-child(6) { transition-delay: 0.6s; }
.sobre-bio p.reveal:nth-child(7) { transition-delay: 0.7s; }
.sobre-bio p.reveal:nth-child(8) { transition-delay: 0.8s; }
.sobre-bio p.reveal:nth-child(9) { transition-delay: 0.9s; }

.footer-artistica { 
    padding: 12rem 2rem 4rem; 
    text-align: center; 
    background-color: var(--bg-secondary);
    border-top: 1px solid rgba(0,0,0,0.05); 
    position: relative; 
    overflow: hidden;
    transition: var(--transition-color); 
}

/* Grain Overlay for Footer */
.footer-artistica::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02; pointer-events: none; z-index: 0;
}

/* Dark mode override */
[data-theme="dark"] .footer-artistica { background-color: var(--bg-secondary); border-top-color: var(--divider); }
[data-theme="dark"] .footer-artistica::before { opacity: 0.05; }

.footer-container { position: relative; z-index: 1; }

.footer-name { 
    font-family: var(--font-primary); font-weight: 700; font-size: 1rem; letter-spacing: 8px; 
    text-transform: uppercase; margin-bottom: 1.5rem; color: var(--text-primary); 
    transition: color 0.5s ease; 
}
.footer-tagline { 
    font-family: var(--font-secondary); font-weight: 300; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-secondary); opacity: 0.8; transition: color 0.5s ease; 
}

.footer-social { display: flex; justify-content: center; gap: 2rem; margin: 3rem 0 5rem; flex-wrap: wrap; }
.social-link { 
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--text-primary); opacity: 0.6; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    padding: 10px; /* Larger touch target */
}
.social-link:hover { color: var(--accent); opacity: 1; transform: translateY(-2px); }
.social-link svg { width: 24px; height: 24px; stroke-width: 1px; stroke: currentColor; transition: stroke 0.3s ease; }
.footer-bottom { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-bottom p { color: #999; font-size: 0.7rem; letter-spacing: 1px; transition: color 0.5s ease; }
.footer-credits { text-transform: uppercase; font-size: 0.6rem; opacity: 0.7; }

.admin-trigger {
    font-family: var(--font-secondary);
    font-size: 9px;
    color: var(--text-primary);
    opacity: 0.05; /* Almost invisible */
    text-decoration: none; text-transform: uppercase; letter-spacing: 2px;
    margin-top: 1rem; display: inline-block; transition: opacity 0.4s ease;
}
.admin-trigger:hover { opacity: 0.6; }

/* ==========================================================================
   7. CURRICULUM VITAE
   ========================================================================== */
.section-cv {
    padding: 8rem 2rem;
    background-color: #D3D3D3; /* Gallery Gray (Light Mode) */
    transition: var(--transition-color);
}

.section-cv .container { max-width: 900px; margin: 0 auto; }

.cv-header {
    display: flex; flex-wrap: wrap; gap: 2rem;
}

/* ==========================================================================
   7.1 INTERACTIVE VERTICAL TIMELINE
   ========================================================================== */
.cv-timeline-container {
    position: relative;
    margin-top: 2rem; /* Adjusted for 4rem total gap (2rem h2 margin + 2rem) */
    padding-bottom: 6rem;
}

.cv-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px; /* Ultra-thin */
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0%, 
        var(--text-primary) 15%, 
        var(--text-primary) 85%, 
        rgba(0,0,0,0) 100%
    );
    transform: translateX(-50%) scaleY(0); /* Initial state for GSAP */
    transform-origin: top;
    z-index: 0;
    opacity: 0.2; /* The "Whisper" Line */
}

/* Era Blocks */
.cv-era-block {
    margin-bottom: 8rem;
    position: relative;
}

.cv-era-header {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.4rem; /* Delicate Editorial Scale */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    margin-bottom: 4rem;
    text-align: center;
    background-color: #D3D3D3; /* Mask match */
    padding: 1rem 0;
    z-index: 10;
    position: relative;
    /* Ghost State */
    opacity: 0.15;
    filter: blur(2px);
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.cv-era-header.is-focused {
    opacity: 1;
    filter: blur(0);
}

.sticky-header {
    position: relative; /* Disable sticky to avoid overlap */
    top: auto;
}

/* Milestone Node */
.cv-milestone {
    display: grid;
    grid-template-columns: 1fr 40px 1fr; /* Left | Marker | Right */
    align-items: center;
    margin-bottom: 4rem;
    opacity: 0.15; /* Default Ghost State */
    filter: blur(2px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative; /* Ensure z-index works */
}

.cv-milestone.is-focused {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: scale(1.02);
}

/* Alternating Rhythm */
.cv-milestone:nth-child(odd) .milestone-date { text-align: right; grid-column: 1; }
.cv-milestone:nth-child(odd) .milestone-content { text-align: left; grid-column: 3; }

.cv-milestone:nth-child(even) .milestone-date { text-align: left; grid-column: 3; order: 3; }
.cv-milestone:nth-child(even) .milestone-content { text-align: right; grid-column: 1; order: 1; }

/* Marker */
.milestone-marker {
    width: 12px; height: 12px;
    background: #D3D3D3; /* Match Section BG */
    border: 1px solid var(--text-secondary);
    border-radius: 50%;
    position: absolute;
    left: 50%; top: 0; /* Align to spine center */
    transform: translateX(-50%);
    z-index: 2;
    transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.cv-milestone.is-focused .milestone-marker {
    background: #000000; /* Black in Light Mode */
    border-color: #000000;
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 0 0 4px #D3D3D3; /* Halo effect match */
}

[data-theme="dark"] .cv-milestone.is-focused .milestone-marker {
    background: #FFFFFF; /* White in Dark Mode */
    border-color: #FFFFFF;
}

/* Typography */
.milestone-date {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 0.8rem; /* Standardized Metadata Size */
    letter-spacing: 0.1em;
    color: #999; /* Muted Gray */
    text-transform: uppercase;
    padding: 0 2rem;
}

.milestone-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem; /* Standardized Body Size */
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.milestone-title:hover {
    background: transparent !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.milestone-desc {
    font-family: var(--font-secondary);
    font-weight: 300; /* Standardized body weight */
    font-size: 0.9rem;
    line-height: 1.8; /* Global Line Height Match */
    letter-spacing: 0.01em;
    color: #1A1A1A; /* High Contrast for Legibility */
}

.milestone-content {
    padding: 0 2rem;
}

/* Dark Mode Overrides for CV */
[data-theme="dark"] .section-cv,
[data-theme="dark"] .cv-era-header,
[data-theme="dark"] .milestone-marker {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .cv-milestone.is-focused .milestone-marker {
    box-shadow: 0 0 0 4px var(--bg-primary);
}

[data-theme="dark"] .milestone-desc {
    color: var(--text-secondary);
}

/* Mobile Adaptation */
@media (max-width: 768px) {
    .cv-milestone {
        grid-template-columns: 20px 1fr; /* Marker | Content */
        gap: 1rem;
        margin-bottom: 3rem;
    }
    
    /* Reset Alternating Rhythm for Mobile */
    .cv-milestone:nth-child(odd) .milestone-date,
    .cv-milestone:nth-child(even) .milestone-date {
        grid-column: 2; text-align: left; order: -1; /* Date on top */
        padding: 0; font-size: 0.8rem; color: var(--accent); margin-bottom: 0.25rem;
    }
    
    .cv-milestone:nth-child(odd) .milestone-content,
    .cv-milestone:nth-child(even) .milestone-content {
        grid-column: 2; text-align: left; order: 1;
        padding: 0;
    }
    
    .milestone-marker {
        grid-column: 1; grid-row: 1 / span 3; /* Span full height */
        margin: 0; align-self: start; top: 5px; left: 10px; /* Align with spine on mobile */
        transform: translateX(-50%);
    }
    
    .cv-spine {
        left: 10px; /* Center of 20px column */
        transform: translateX(-50%) scaleY(0);
    }
}

@media print {
    .navbar, .footer-artistica, .theme-switch-wrapper, .menu-toggle, .scroll-indicator, .cta-full-collection, .hero-premium {
        display: none !important; }
    .section-cv { padding: 2rem 0 !important; }
    body { background: white !important; color: black !important; }
    .cv-milestone { opacity: 1 !important; filter: none !important; display: block !important; margin-bottom: 2rem !important; }
    .timeline-spine-svg { display: none !important; }
    .milestone-marker { display: none !important; }
    .milestone-date { font-weight: bold !important; }
}

/* ==========================================================================
   8. ANIMATIONS (KEYFRAMES)
   ========================================================================== */
@keyframes mobileHeroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobileHeroSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mobileHeroFReveal { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
@keyframes mobileScrollLine { 
    0% { transform: scaleY(0); transform-origin: top; } 
    45% { transform: scaleY(1); transform-origin: top; }
    55% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes risingVeil {
    from { transform: translateY(110%); }
    to { transform: translateY(0); }
}

/* ==========================================================================
   7. ANIMAÇÕES & RESPONSIVIDADE
   ========================================================================== */
.reveal { opacity: 1 !important; transform: none !important; transition: var(--transition); } /* Opacity Reset */
.reveal.active { opacity: 1 !important; transform: none !important; }

.reveal-timeline { opacity: 1 !important; transform: none !important; } /* Opacity Reset */
.reveal-timeline.active { opacity: 1 !important; transform: none !important; }

@media (max-width: 992px) {
    .sobre-container, .modal-body { grid-template-columns: 1fr; flex-direction: column; gap: 3rem; }
    .sobre-editorial-container { grid-template-columns: 1fr; gap: 4rem; }
    .sobre-visual { max-width: 500px; margin: 0 auto; }
    .hero-main-title h1 { font-size: 1.8rem; }
    .modal-content { padding: 2rem; overflow-y: auto; max-height: 90vh; }
    .nav-links { display: none; }

    .menu-toggle {
        display: flex; flex-direction: column; justify-content: space-between;
        width: 30px; height: 21px; background: transparent; border: none; cursor: pointer;
    }
    .bar {
        width: 100%; height: 2px; 
        background-color: #FFFFFF; /* Force White on Hero */
        box-shadow: 0 1px 4px rgba(0,0,0,0.3); /* Legibility Shadow */
        transition: 0.3s;
    }
    .navbar.scrolled .menu-toggle .bar {
        background-color: var(--text-primary); /* Revert to theme color on scroll */
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    /* --- 1. Fluid Typography & Hero Scaling --- */
    .hero-premium { 
        height: 90vh; /* Increased Vertical Real Estate */
        flex-direction: column; 
        align-items: flex-start;
        justify-content: flex-end; /* Align content to bottom */
        padding: 0;
        background-color: var(--bg-primary); /* 1. Background Sync */
        overflow: hidden; /* Handle scaling */
        position: relative;
    }

    .hero-bg-wrapper {
        /* Center the image */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-main-title h1 {
        font-size: 1.5rem; line-height: 1.1;
        margin-bottom: 0.5rem;
        color: #FFFFFF; /* Pure White on Image */
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    .hero-manifesto {
        margin-top: 10px;
        margin-bottom: 0;
    }

    .hero-manifesto p {
        font-size: 0.75rem; max-width: 100%; line-height: 1.5; letter-spacing: 0.1em;
        padding: 0;
        color: #FFFFFF; /* Pure White on Image */
        text-align: left;
        animation-delay: 0.5s;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .hero-bg-img, .hero-bg-blur {
        width: 90vw; /* 1. Dimensional Adjustment */
        height: 80vh; /* Framed height */
        object-fit: contain; /* 2. Image Rendering */
        object-position: center;
        transform: none; /* Reset scale for framed look */
        position: static; /* Flex centering */
    }

    /* Dynamic Header Contrast (Mobile Hero Only) */
    .navbar:not(.scrolled) .logo,
    .navbar:not(.scrolled) .theme-toggle-prism {
        color: #1A1A1A !important;
    }
    
    [data-theme="dark"] .navbar:not(.scrolled) .logo,
    [data-theme="dark"] .navbar:not(.scrolled) .theme-toggle-prism {
        color: #FFFFFF !important;
    }

    .navbar:not(.scrolled) .menu-toggle .bar {
        background-color: #1A1A1A !important;
        box-shadow: none;
    }

    [data-theme="dark"] .navbar:not(.scrolled) .menu-toggle .bar {
        background-color: #FFFFFF !important;
    }

    .hero-word-wrapper { display: block; margin-right: 0; margin-bottom: 0.5rem; }
    
    .serif.outline {
        display: inline-block;
    }

    /* Ensure signature weights apply on mobile */
    .font-light { font-weight: 300; }
    .font-bold { font-weight: 700; }
    
    .hero-content-wrapper {
        position: absolute; /* Float over image */
        bottom: 0; left: 0;
        width: 100%;
        height: auto;
        padding: 0 25px 180px 25px; /* Push text up to clear left-aligned scroll indicator */
        text-align: left;
        background-color: transparent;
        z-index: 2;
        pointer-events: auto;
    }

    /* Override text color for the stack layout (now on bg-primary) */
    .hero-main-title h1 {
        color: #FFFFFF;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    /* --- 2. Navigation & Gestures --- */
    .navbar .nav-content {
        padding: 25px 25px; /* Hygiene padding */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-toggle {
        display: flex;
        z-index: 1002;
        margin-left: 20px; /* 20px gap */
    }

    /* Hamburger Animation */
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* Full-screen Overlay Menu */
    .nav-links {
        display: flex; /* Override display: none from 992px query */
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: var(--bg-primary);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        padding: 2rem;
        transform: translateY(-100%);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1001;
        visibility: hidden; /* Hide when closed */
    }

    .nav-links.active {
        transform: translateY(0);
        visibility: visible;
    }

    .nav-links a {
        font-size: 1.5rem;
        opacity: 1;
        color: var(--text-primary);
    }

    /* Footer Admin Link - Touch Target */
    .admin-trigger {
        padding: 15px;
        margin-top: 1.5rem;
        display: inline-block;
    }

    /* --- 3. Gallery & Interaction --- */
    .grid-colecao {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    /* Mobile Card State (No Hover) */
    .obra-card {
        margin-bottom: 2rem;
    }

    .obra-image-wrapper {
        box-shadow: none;
    }

    /* Always show metadata on mobile */
    .obra-info {
        position: relative;
        opacity: 1;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        padding: 1rem 0 0 0;
        pointer-events: auto;
        border: none;
    }

    .obra-title {
        font-size: 1.2rem;
    }

    /* Disable hover effects */
    .obra-card:hover .obra-image-wrapper {
        transform: none;
        box-shadow: none;
    }
    
    .obra-card:active .obra-image-wrapper {
        transform: scale(0.98);
        transition: transform 0.2s ease;
    }

    /* --- 4. Modal Optimization --- */
    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        width: 100%;
        height: 90vh;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
        transform: none;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal.active .modal-content {
        transform: translateY(0);
    }

    .modal-body {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-img-container {
        width: 100%;
        height: 45vh;
        flex-shrink: 0;
    }

    .modal-detalhes {
        width: 100%;
        height: auto;
        padding: 2rem;
        padding-bottom: 6rem;
    }

    .modal-detalhes h2 {
        font-size: 1.5rem;
    }

    /* Close Button - Thumb Reachable */
    .close-btn {
        top: auto;
        bottom: 2rem;
        right: 50%;
        transform: translateX(50%);
        background: var(--bg-primary);
        border: 1px solid var(--divider);
        border-radius: 50%;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        opacity: 1;
        color: var(--text-primary);
        z-index: 20;
    }

    /* --- 5. Performance & Whitespace --- */
    .section-editorial, 
    .section-sobre, 
    .footer-artistica, .section-cv {
        padding: 6rem 20px; /* Consistent safe area */
    }

    .sobre-editorial-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .sobre-visual .image-wrapper {
        aspect-ratio: 4/5;
    }

    .nome-artista {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .footer-social {
        gap: 2rem;
        margin: 4rem 0 6rem;
    }

    /* Scroll Indicator Positioning */
    .scroll-indicator {
        position: absolute;
        bottom: 40px; left: 25px; right: auto; /* Move to Left */
        z-index: 20;
        align-items: flex-start; /* Align to left margin */
    }
    .scroll-indicator span { color: #1A1A1A; font-size: 10px; letter-spacing: 0.3em; opacity: 0.6; }
    .scroll-line { background-color: rgba(26,26,26,0.3); height: 40px; }
    .scroll-line::after { background-color: #1A1A1A; }
}

/* ==========================================================================
   8. THEME TOGGLE
   ========================================================================== */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin-left: 2rem;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--divider);
    transition: .4s;
    border-radius: 26px;
}

.slider:before { /* The knob */
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-primary);
    border: 1px solid var(--divider);
    border-radius: 50%;
    transition: .4s cubic-bezier(0.16, 1, 0.3, 1);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.slider svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--accent);
    transition: color 0.4s ease;
}

.slider .sun {
    left: 5px;
}

.slider .moon {
    right: 5px;
}

/* ==========================================================================
   9. ADMIN PANEL STYLES
   ========================================================================== */
.admin-container {
    max-width: 800px; margin: 8rem auto; padding: 2rem;
}
.admin-header { margin-bottom: 3rem; text-align: center; }
.admin-form {
    background: var(--bg-secondary); padding: 3rem; border-radius: 4px;
    border: 1px solid var(--divider); margin-bottom: 4rem;
}
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); }
.form-control {
    width: 100%; padding: 1rem; background: var(--bg-primary); font-family: var(--font-secondary);
    border: 1px solid var(--divider); color: var(--text-primary);
    font-size: 1rem;
}
.btn-primary {
    background: var(--text-primary); color: var(--bg-primary);
    padding: 1rem 2rem; border: none; cursor: pointer;
    text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;
    width: 100%; transition: opacity 0.3s;
}
.btn-primary:hover { opacity: 0.8; }
.admin-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem; border-bottom: 1px solid var(--divider);
    background: var(--bg-secondary); margin-bottom: 1rem;
}
.btn-delete { color: #e74c3c; background: none; border: none; cursor: pointer; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 1px; }

/* ==========================================================================
   10. NARRATIVE BRIDGE (FERRARI 125 S)
   ========================================================================== */
.section-story {
    padding: 10rem 8vw; /* 8vw Horizontal Safety Padding */
    background-color: var(--bg-primary);
    text-align: left;
}

.story-content {
    max-width: 900px; /* 75-80% Desktop Width Logic */
    margin: 0; /* Left Align */
}

.story-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.8rem;
    color: #333333; /* Dark Charcoal */
    margin-bottom: 2rem;
}

.story-body p {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.story-metadata {
    margin-top: 3rem;
    border-top: 1px solid var(--divider);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meta-row {
    display: flex;
    gap: 2rem;
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-key {
    font-weight: 600;
    color: #333333;
    min-width: 180px;
}

.meta-val {
    color: var(--text-secondary);
}

/* Dark Mode Overrides */
[data-theme="dark"] .story-title,
[data-theme="dark"] .meta-key {
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .section-story {
        padding: 6rem 5vw;
    }
    .meta-row {
        flex-direction: column;
        gap: 0.2rem;
        margin-bottom: 1rem;
    }
    .meta-key {
        min-width: auto;
        opacity: 0.7;
    }
}

/* ==========================================================================
   11. COLLECTION PAGE OVERHAUL
   ========================================================================== */

/* Sticky Filter Bar */
.filter-container {
    position: sticky;
    top: 80px; /* Below navbar */
    z-index: 90;
    background: transparent; /* Transparent as requested */
    padding: 1rem 0;
    mix-blend-mode: difference; /* Ensure visibility on light/dark */
}

/* Editorial Card Layout */
.collection-item {
    position: relative;
    margin-bottom: 4rem;
    break-inside: avoid; /* For Masonry if using columns */
    cursor: pointer;
}

.img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #222; /* Placeholder color */
}

.img-wrapper img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    width: 100%; height: auto; display: block;
}

/* Rarity Marker */
.rarity-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    font-family: var(--font-secondary);
    font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    backdrop-filter: blur(4px);
    border-radius: 2px;
    opacity: 1 !important; transition: opacity 0.4s ease; /* Opacity Reset */
}

/* Story Preview Overlay (Hover) */
.story-preview-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.story-excerpt {
    font-family: var(--font-primary);
    font-size: 1.1rem; font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.6;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

/* Hover State */
@media (hover: hover) {
    .collection-item:hover .story-preview-overlay { opacity: 1; }
    .collection-item:hover .story-excerpt { transform: translateY(0); }
    .collection-item:hover img { transform: scale(1.05); }
    .collection-item:hover .rarity-badge { opacity: 1; }
}

/* Broken Image Fallback */
.img-wrapper.fallback {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    display: flex; align-items: center; justify-content: center;
    min-height: 300px;
}
.img-wrapper.fallback::after {
    content: 'CF'; /* Artist Logo/Initials */
    font-family: var(--font-primary);
    font-size: 3rem; color: rgba(255,255,255,0.1);
}

/* ==========================================================================
   12. SHARED ELEMENT EDITORIAL MODAL
   ========================================================================== */
.modal-editorial-layout {
    display: flex;
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden; /* Desktop default */
}

/* Left: Expanded Image (60%) */
.modal-img-wrapper {
    width: 60%; height: 100%;
    position: relative; /* Sticky context handled by flex */
    background: transparent; /* Eliminating Black Bars */
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    z-index: 0;
}

.modal-img-wrapper img {
    width: auto; height: auto; 
    max-width: 100%; max-height: 100%; 
    object-fit: contain; 
    display: block; margin: auto;
    will-change: transform;
}

/* Right: Editorial Content Panel (40%) */
.modal-text-panel {
    width: 40%; height: 100%;
    height: 100vh;
    background: var(--bg-primary); /* Solid on Desktop */
    display: flex; flex-direction: column;
    transform: translateX(100%); /* Initial state for slide-in */
    opacity: 0;
    overflow-y: auto !important; /* Enable internal scrolling */
    padding: 10vh 5vw; /* Asymmetric Typography */
    scrollbar-width: none; /* Firefox */
    z-index: 10;
    overscroll-behavior: contain; /* Prevent scroll chaining */
    touch-action: pan-y; /* Allow touch scroll */
    pointer-events: auto;
}

.modal-story-content { 
    margin-bottom: 6rem; /* Separation from specs */
    /* Removed overflow/padding properties as parent handles scroll now */
}
/* Hide Scrollbar Chrome/Safari */
.modal-text-panel::-webkit-scrollbar { display: none; }

.editorial-title-large {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary); margin-bottom: 3rem;
    line-height: 1.2; /* Legibility Breath */
    letter-spacing: -0.02em;
}

/* Fix for Light Mode Text Visibility in Modal */
.modal-text-panel .narrative-paragraph {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 0.9rem; /* Standardized */
    line-height: 1.8; /* Legibility Standard */
    letter-spacing: 0.01em; /* Critical Text Fix */
    word-spacing: normal; /* Critical Text Fix */
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.modal-story-content {
    margin-bottom: 6rem; /* Separation from specs */
}

/* Gallery Label Spec Sheet */
.gallery-label-spec {
    border-top: 1px solid var(--divider);
    padding-top: 2rem;
    margin-top: auto; /* Push to bottom if content is short */
    font-family: var(--font-secondary);
    font-size: 0.8rem; /* Refined Size */
    color: #333333; /* Dark Charcoal */
    text-align: left;
}

.spec-row {
    display: flex; justify-content: space-between;
    display: flex; justify-content: flex-start;
    margin-bottom: 0.5rem;
    text-transform: uppercase; letter-spacing: 1px;
    flex-wrap: wrap; /* Allow stacking for long labels */
    gap: 0.5rem;
}
.spec-key { opacity: 0.6; }
.spec-val { color: #333333; opacity: 1; text-align: right; margin-left: auto; }
.spec-val { color: #333333; opacity: 1; text-align: left; margin-left: 0; }

/* Dark Mode Override for Spec Sheet */
[data-theme="dark"] .gallery-label-spec, [data-theme="dark"] .spec-val {
    color: var(--text-secondary);
}

/* Smart Close Button (Fixed Top-Right) */
.close-btn {
    position: fixed;
    top: 2rem; right: 2rem;
    width: 50px; height: 50px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 100000;
    opacity: 0; /* Animated in */
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.close-btn:hover { transform: scale(1.1) rotate(90deg); }
.close-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; }

@media (max-width: 992px) {
    /* 1. Mobile Architecture: Vertical Narrative */
    .modal {
        display: block !important; /* Allow flow (Override flex) */
        overflow-y: auto; /* Native mobile scroll on main container */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: auto; /* Allow full native touch control */
    }

    /* 1. Mobile Architecture: Vertical Narrative */
    .modal-editorial-layout { 
        display: block; 
        height: auto;
        min-height: 100vh;
        position: relative;
    }

    /* Sticky Hero Image */
    .modal-img-wrapper { 
        width: 100%; 
        height: auto; /* Allow natural height */
        min-height: 60vh;
        position: relative; /* Scroll naturally */
        z-index: 0;
        padding: 0;
        background: var(--bg-secondary);
    }
    
    .modal-img-wrapper img {
        width: 100%; height: 100%;
        object-fit: contain; /* Ensure full artwork visibility */
        object-position: center;
        display: block;
    }

    /* The 'Glass' Text Sheet */
    .modal-text-panel { 
        width: 100%; 
        height: auto; 
        min-height: 50vh;
        margin-top: -2rem; /* Slight overlap */
        padding: 15vh 8vw 10vh 8vw; /* Safety Margins */
        transform: none !important; /* Remove slide-in, use opacity */
        background: rgba(242, 242, 242, 0.85); /* Light Mode Glass */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        position: relative; 
        z-index: 10;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
        overflow: visible !important;
    }
    
    [data-theme="dark"] .modal-text-panel {
        background: rgba(18, 18, 18, 0.85); /* Dark Mode Glass */
        border-top: 1px solid rgba(255,255,255,0.05);
    }

}

/* ==========================================================================
   13. HOMEPAGE EDITORIAL GALLERY (ASYMMETRICAL)
   ========================================================================== */
/* 1. The "Fluid Masonry" Layout */
#grid-destaque {
    display: grid;
    grid-template-columns: 1fr; /* Mobile Default */
    gap: 4rem 2rem;
    padding: 0 5%;
    align-items: start; /* Essential for masonry offset */
}

@media (min-width: 768px) {
    #grid-destaque {
        /* Adaptive Grid: Handles any orientation */
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2vw; /* Tighter Dense Masonry */
    }
    
    /* Asymmetric Staggering: Offset right column */
    .artwork-card:nth-child(even) {
        margin-top: 5vh; /* Reduced offset for cohesion */
    }
}

/* 1. Desktop Artwork Alignment (Perfect Grid) */
@media (min-width: 1024px) {
    .artwork-card:nth-child(even) {
        margin-top: 0; /* Remove Stagger for Clean Grid */
    }
    #grid-destaque {
        gap: 3rem; /* Uniform Professional Gutter */
    }
}

.artwork-card {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 1; /* Emergency Visibility Fix: Default to visible */
    visibility: visible;
}

.artwork-image-container {
    position: relative;
    width: 100%;
    height: auto; /* Respect Aspect Ratio */
    overflow: visible; /* Allow magnetic pull to not be clipped */
    background-color: var(--bg-secondary);
    /* Remove Masks */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    clip-path: none !important;
}

.artwork-image-container img {
    width: 100%; height: auto; display: block;
    object-fit: contain; /* Ensure no cropping */
    transition: transform 0.1s ease-out; /* Smooth magnetic feel */
}