/* 

 * SANTIS EDITORIAL DESIGN SYSTEM v2.0

 * Concept: "Quiet Luxury" - Atmosphere, Grain, Cinematic Typography

 * 

 * 1. Base Variables & Typography

 * 2. Grain & Atmosphere Layers

 * 3. Bento Grid Engine

 * 4. Card Animations (Santis Physics)

 * 5. Utility & Motion Classes

 */



/* --- 1. DESIGN SYNC (Mapping to Global V3 Variables) --- */

:root {

    /* Map Editorial Local Vars to Global V3 for backward compatibility */

    --santis-bg: var(--color-bg-light);

    /* Was #EAE9E5 */

    --santis-ink: var(--color-charcoal);

    /* Was #1A1A1A */

    --santis-stone: var(--color-stone);

    /* Was #4A4A4A */

    --santis-accent: var(--color-bronze);

    /* Was #8E7F70 */



    /* Physics remain custom */

    --ease-santis: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

}



/* 1. TYPOGRAPHY (Editorial Override) */

body.editorial-mode {

    background-color: var(--santis-bg);

    color: var(--santis-ink);

    /* Grain overlay handles texture */

    overflow-x: hidden;

}



.editorial-title {

    font-family: 'Playfair Display', serif;

    /* Or similar serif */

    font-weight: 500;

    letter-spacing: -0.02em;

    line-height: 1.1;

}



.editorial-sub {

    font-family: 'Inter', sans-serif;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-size: 0.85rem;

    color: var(--santis-stone);

}



/* 2. GRAIN & ATMOSPHERE */

.santis-grain-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 9000;

    opacity: 0.04;

    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");

    mix-blend-mode: multiply;

}



/* 3. BENTO GRID ENGINE */

.editorial-grid-engine {

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 4vw;

    box-sizing: border-box;

}



.main-grid {

    display: grid;

    /* 12 col grid for desktop flexibility */

    grid-template-columns: repeat(12, 1fr);

    gap: 24px;

    grid-auto-rows: minmax(300px, auto);

}



/* Card Base (V3 Refined) */

.bento-card {

    position: relative;

    border-radius: var(--radius-card);

    /* 6px */

    overflow: hidden;

    background: #D8D6D1;

    /* Placeholder gray */

    transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo);

    isolation: isolate;

    cursor: pointer;

    text-decoration: none;

    color: inherit;

    display: block;



    /* V3 Luxury Border & Shadow */

    border: 1px solid rgba(255, 255, 255, 0.05);

    /* Glass edge */

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);

    /* Soft lift */

}



.bento-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 1.2s var(--ease-out-expo), filter 0.6s ease;

    display: block;

}



/* Layout Variations (Classes from JSON) */

.g-col-6 {

    grid-column: span 6;

}



.g-col-4 {

    grid-column: span 4;

}



.g-col-3 {

    grid-column: span 3;

}



.g-col-8 {

    grid-column: span 8;

}



.g-col-12 {

    grid-column: span 12;

}



/* Aspect Ratios */

.ratio-square {

    aspect-ratio: 1 / 1;

}



.ratio-portrait {

    aspect-ratio: 4 / 5;

}



.ratio-landscape {

    aspect-ratio: 16 / 9;

}



.ratio-panoramic {

    aspect-ratio: 21 / 9;

}



/* 4. SANTIS PHYSICS (Hover Effects) */

@media (hover: hover) {

    .bento-card:hover {

        transform: translateY(-4px) scale(1.005);

        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);

        z-index: 2;

    }



    .bento-card:hover img {

        transform: scale(1.08);

        /* Slow zoom */

        filter: contrast(1.05);

    }

}



/* 5. TYPOGRAPHY OVERLAY (Inside Card) */

.card-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 32px;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);

    color: white;

    transform: translateY(10px);

    opacity: 0.9;

    transition: transform 0.5s var(--ease-out-expo), opacity 0.5s ease;

}



.bento-card:hover .card-overlay {

    transform: translateY(0);

    opacity: 1;

}



.card-title {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    margin: 0 0 8px 0;

    font-weight: 400;

}



.card-subtitle {

    font-family: 'Inter', sans-serif;

    font-size: 0.8rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    opacity: 0.8;

}



/* 6. UTILITIES */

.reveal-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 1s ease, transform 1s var(--ease-out-expo);

}



.reveal-visible {

    opacity: 1;

    transform: translateY(0);

}



/* Stagger Delays */

.reveal-delay-1 {

    transition-delay: 0.1s;

}



.reveal-delay-2 {

    transition-delay: 0.2s;

}



.reveal-delay-3 {

    transition-delay: 0.3s;

}



/* RESPONSIVE */

@media (max-width: 1024px) {

    .main-grid {

        grid-template-columns: repeat(6, 1fr);

    }



    .g-col-4,

    .g-col-3 {

        grid-column: span 3;

    }



    /* 2 per row */

    .g-col-6,

    .g-col-8 {

        grid-column: span 6;

    }



    /* Full width */

}



@media (max-width: 768px) {

    .editorial-grid-engine {

        padding: 0 20px;

    }



    .main-grid {

        display: flex;

        flex-direction: column;

        gap: 32px;

    }



    .bento-card {

        aspect-ratio: 4/5 !important;

        /* Force portrait on mobile for impact */

        max-height: 60vh;

    }



    /* Mobile Snap Scroll (Active Module) */

    .main-grid {

        display: grid;

        grid-auto-flow: column;

        grid-auto-columns: 85%;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        padding-bottom: 20px;

        gap: 16px;

        /* Reduced gap for mobile */

        /* Hide scrollbar */

        -ms-overflow-style: none;



        /* IE and Edge */

        /* Hide scrollbar Firefox */

        @supports (scrollbar-width: none) {

            scrollbar-width: none;

        }

    }



    .main-grid::-webkit-scrollbar {

        display: none;

        /* Chrome, Safari and Opera */

    }



    .bento-card {

        scroll-snap-align: center;

        /* Ensure aspect ratio handles content */

        aspect-ratio: 4/5;

        width: 100%;

    }

}



/* 7. CINEMATIC HERO (Video Background) */

.cinematic-hero {

    position: relative;

    width: 100%;

    height: 90vh;

    /* Fullscreen impact */

    min-height: 600px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #000;

    /* Preload bg */

}



.hero-video-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.hero-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.7;

    /* Dim video slightly */

}



.hero-fallback-img {

    display: none;

    /* Shown via JS or CSS media query */

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Gradient Overlay for Text Readability */

.hero-gradient-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);

    z-index: 2;

}



.cinematic-hero .santis-grain-overlay {

    z-index: 3;

    /* Grain on top of video */

}



.hero-content {

    position: relative;

    z-index: 10;

    color: #fff;

    max-width: 800px;

}



.nv-kicker {

    display: block;

    font-family: 'Inter', sans-serif;

    font-size: 0.85rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 24px;

}



.hero-title {

    font-family: 'Playfair Display', serif;

    font-size: 5rem;

    line-height: 1.1;

    font-weight: 500;

    margin-bottom: 24px;

    letter-spacing: -0.02em;

}



.hero-subtitle {

    font-family: 'Inter', sans-serif;

    font-size: 1.1rem;

    font-weight: 300;

    color: rgba(255, 255, 255, 0.9);

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.6;

}



/* Scroll Indication */

.scroll-indicator {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    opacity: 0.7;

    animation: bounce 2s infinite;

}



.mouse-icon {

    display: block;

    width: 26px;

    height: 42px;

    border: 2px solid rgba(255, 255, 255, 0.6);

    border-radius: 14px;

    position: relative;

}



.mouse-icon::after {

    content: '';

    position: absolute;

    top: 6px;

    left: 50%;

    margin-left: -2px;

    width: 4px;

    height: 4px;

    background: #fff;

    border-radius: 50%;

    animation: scrollWheel 2s infinite;

}



@keyframes scrollWheel {

    0% {

        transform: translateY(0);

        opacity: 1;

    }



    100% {

        transform: translateY(12px);

        opacity: 0;

    }

}



@keyframes bounce {



    0%,

    20%,

    50%,

    80%,

    100% {

        transform: translateX(-50%) translateY(0);

    }



    40% {

        transform: translateX(-50%) translateY(10px);

    }



    60% {

        transform: translateX(-50%) translateY(5px);

    }

}



/* Animation Utilities */

.slide-up-1 {

    animation: fadeInUp 1s ease 0.2s backwards;

}



.slide-up-2 {

    animation: fadeInUp 1s ease 0.4s backwards;

}



.slide-up-3 {

    animation: fadeInUp 1s ease 0.6s backwards;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 768px) {

    .cinematic-hero {

        height: 80vh;

        min-height: 500px;

    }



    .hero-title {

        font-size: 3.2rem;

        line-height: 1.15;

    }



    .hero-subtitle {

        font-size: 1rem;

        padding: 0 20px;

    }



    /* MOBILE POWER SAVING & PERFORMANCE */

    /* Hide video completely from layout on mobile primarily for battery/data */

    .hero-video {

        display: none !important;

    }



    .hero-fallback-img {

        display: block !important;

    }

}