/* ==========================================================================
   OUTDOOR X 2027 — CUSTOM BRAND STYLESHEET & ANIMATIONS
   Brand Palette:
   Sand: #EAC891 | Olive: #8A8635 | Terracotta: #D06224 | Rust: #8B2B03
   Earth: #623415 | Obsidian: #131208 | Blaze: #FF6C26 | Leaf: #3C8000 | Amber: #EBA406
   ========================================================================== */

:root {
    --ox-sand: #EAC891;
    --ox-sand-light: #F7E4C4;
    --ox-sand-dark: #D8B273;
    --ox-cream: #FFFDF9;
    --ox-olive: #8A8635;
    --ox-terracotta: #D06224;
    --ox-rust: #8B2B03;
    --ox-earth: #623415;
    --ox-obsidian: #131208;
    --ox-blaze: #FF6C26;
    --ox-leaf: #3C8000;
    --ox-amber: #EBA406;
    --tlf-merlot: #2B0D18;
    --tlf-burgundy: #58182B;
    --tlf-gold: #D4AF37;
    --tlf-cream: #F9F4EF;
}

html {
    scroll-behavior: smooth;
    font-family: 'Montserrat', sans-serif;
    background-color: #EAC891;
    color: #131208;
}

/* Waterlily / Brush Script Display Font Accent */
.font-waterlily {
    font-family: 'Kaushan Script', 'Caveat', cursive;
}

/* Editorial Serif for The Lifestyle Fair ("An Event Within An Event") */
.font-editorial {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* Topographic Contour Background Pattern (Sand Canvas: Dark lines on #EAC891) */
.bg-topo-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23131208' stroke-width='1.1' stroke-opacity='0.11'%3E%3Cpath d='M-50 450 Q 120 320 300 410 T 650 380'/%3E%3Cpath d='M-50 470 Q 130 340 310 430 T 650 400'/%3E%3Cpath d='M-50 490 Q 140 360 320 450 T 650 420'/%3E%3Cpath d='M-50 510 Q 150 380 330 470 T 650 440'/%3E%3Cpath d='M-50 530 Q 160 400 340 490 T 650 460'/%3E%3Cpath d='M-50 550 Q 170 420 350 510 T 650 480'/%3E%3Cpath d='M-50 200 Q 180 90 380 180 T 650 130'/%3E%3Cpath d='M-50 220 Q 190 110 390 200 T 650 150'/%3E%3Cpath d='M-50 240 Q 200 130 400 220 T 650 170'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
}

/* Retain Light Topo Pattern for Inverted Obsidian Sections / Dark TLF cards */
.bg-topo-pattern-light {
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23EAC891' stroke-width='1.1' stroke-opacity='0.14'%3E%3Cpath d='M-50 450 Q 120 320 300 410 T 650 380'/%3E%3Cpath d='M-50 470 Q 130 340 310 430 T 650 400'/%3E%3Cpath d='M-50 490 Q 140 360 320 450 T 650 420'/%3E%3Cpath d='M-50 510 Q 150 380 330 470 T 650 440'/%3E%3Cpath d='M-50 530 Q 160 400 340 490 T 650 460'/%3E%3Cpath d='M-50 550 Q 170 420 350 510 T 650 480'/%3E%3Cpath d='M-50 200 Q 180 90 380 180 T 650 130'/%3E%3Cpath d='M-50 220 Q 190 110 390 200 T 650 150'/%3E%3Cpath d='M-50 240 Q 200 130 400 220 T 650 170'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
}

/* Geometric Triangle Header Ribbon (Exact motif from 2027 Proposal PDFs) */
.bg-tribal-triangles {
    background-image: url("data:image/svg+xml,%3Csvg width='240' height='60' viewBox='0 0 240 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 30,0 15,28' fill='%238A8635'/%3E%3Cpolygon points='30,0 60,0 45,28' fill='%23D06224'/%3E%3Cpolygon points='15,28 45,28 30,56' fill='%23131208'/%3E%3Cpolygon points='60,0 90,0 75,28' fill='%23EAC891'/%3E%3Cpolygon points='90,0 120,0 105,28' fill='%238A8635'/%3E%3Cpolygon points='75,28 105,28 90,56' fill='%23D06224'/%3E%3Cpolygon points='120,0 150,0 135,28' fill='%23131208'/%3E%3Cpolygon points='150,0 180,0 165,28' fill='%23FF6C26'/%3E%3Cpolygon points='135,28 165,28 150,56' fill='%23EAC891'/%3E%3Cpolygon points='180,0 210,0 195,28' fill='%238A8635'/%3E%3Cpolygon points='210,0 240,0 225,28' fill='%23D06224'/%3E%3Cpolygon points='195,28 225,28 210,56' fill='%23131208'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 240px 60px;
}

/* Scroll-Driven Hero Frame Zoom & Parallax */
.hero-viewport {
    position: relative;
    overflow: hidden;
}

.hero-bg-scale {
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Goodwood-Style Bold Slanted "X" Accent Badge */
.x-skew-badge {
    transform: skewX(-10deg);
}
.x-skew-badge > * {
    transform: skewX(10deg);
}

/* YourApps Portal Action Button Styling (Consistent with outdoorx.yourapps.co.za) */
.btn-yourapps-primary {
    background: linear-gradient(135deg, #FF6C26 0%, #D06224 100%);
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 25px -5px rgba(255, 108, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-yourapps-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -6px rgba(255, 108, 38, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    filter: brightness(1.06);
}

.btn-yourapps-portal {
    background: #131208;
    border: 1.5px solid #131208;
    color: #EAC891;
    font-weight: 700;
    transition: all 0.25s ease;
}
.btn-yourapps-portal:hover {
    background: #FF6C26;
    color: #FFFFFF;
    border-color: #FF6C26;
    transform: translateY(-1px);
}

/* Infinite Hosted Brands Ticker Animation */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marqueeScroll 38s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* Polaroid Card Pinboard Effect (from Proposal Page 7) */
.polaroid-card {
    background: #FAF6F0;
    padding: 12px 12px 36px 12px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.polaroid-card:hover {
    transform: rotate(0deg) scale(1.04) translateY(-6px) !important;
    z-index: 20;
    box-shadow: 0 25px 50px rgba(255, 108, 38, 0.3);
}

/* Reveal on Scroll Animation Classes */
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Dropdown Menu Hover Transition */
.nav-dropdown-group:hover .nav-dropdown-menu,
.nav-dropdown-group:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}