/* ============================================
   ZAMBALA — Landing Page
   ============================================ */

/* --- Custom Fonts --- */
@font-face {
    font-family: 'Runalto';
    src: url('../assets/fonts/Runalto/Runalto.woff2') format('woff2'),
         url('../assets/fonts/Runalto/Runalto.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Larken';
    src: url('../assets/fonts/Larken/Larken%20Regular.woff2') format('woff2'),
         url('../assets/fonts/Larken/Larken%20Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Larken Light';
    src: url('../assets/fonts/Larken/Larken%20Light.woff2') format('woff2'),
         url('../assets/fonts/Larken/Larken%20Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artinosy';
    src: url('../assets/fonts/Artinosy/Artinosy.woff2') format('woff2'),
         url('../assets/fonts/Artinosy/Artinosy.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../assets/fonts/Nunito/Nunito%20Regular.woff2') format('woff2'),
         url('../assets/fonts/Nunito/Nunito%20Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito SemiBold';
    src: url('../assets/fonts/Nunito/Nunito%20SemiBold.woff2') format('woff2'),
         url('../assets/fonts/Nunito/Nunito%20SemiBold.ttf') format('truetype');
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito Bold';
    src: url('../assets/fonts/Nunito/Nunito%20Bold.woff2') format('woff2'),
         url('../assets/fonts/Nunito/Nunito%20Bold.ttf') format('truetype');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a, button, span {
    font-weight: normal;
}

:root {
    --cream: #EBE0C1;
    --cream-light: #F3EFDE;
    --gold: #EBBD69;
    --emerald: #173A2E;
    --palm-shadow: #172722;
    --dark-overlay: rgba(0, 0, 0, 0.15);
    --font-heading: 'Runalto', Georgia, serif;
    --font-subheading: 'Larken Light', Georgia, serif;
    --font-body: 'Nunito', 'Helvetica Neue', sans-serif;
    --font-accent: 'Artinosy', cursive;
    --transition-speed: 1s;
    --transition-ease: ease-in-out;

    /* === Type Scale ===
       Fluid via clamp(min, vw-formula, max). One ladder, used everywhere.
       Tuned for 375px (mobile) → 1440px (desktop). Mirrored in canggu.css. */
    --type-display:  clamp(36px, 4.5vw + 19px, 80px);
    --type-h1:       clamp(30px, 3vw + 19px, 56px);
    --type-h2:       clamp(26px, 2.2vw + 18px, 42px);
    --type-h3:       clamp(22px, 1.2vw + 18px, 32px);
    --type-sub:      clamp(18px, 0.5vw + 16px, 22px);
    --type-body:     16px;
    --type-meta:     clamp(14px, 0.1vw + 13.6px, 15px);
    --type-eyebrow:  clamp(11px, 0.1vw + 10.6px, 12px);

    /* === Line-Height Scale === — mirrored in canggu.css */
    --lh-flush:  1;
    --lh-tight:  1.1;
    --lh-snug:   1.2;
    --lh-sub:    1.4;
    --lh-body:   1.7;

    /* === Letter-Spacing Scale === — mirrored in canggu.css */
    --ls-display:  -0.03em;
    --ls-heading:  -0.015em;
    --ls-body:      0;
    --ls-eyebrow:   0.1em;

    /* === Spacing Scale === — mirrored in canggu.css */
    --space-xxs: 4px;
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  40px;
    --space-xl:  clamp(48px, 4vw + 32px, 64px);
    --space-2xl: clamp(64px, 6vw + 40px, 96px);
    --space-3xl: clamp(96px, 8vw + 60px, 140px);
    --gutter:    var(--space-lg);
    --max-w:     1440px;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    background: #1a1a1a;
    cursor: none;
    opacity: 0;
    animation: pageIn 0.8s ease 0.2s forwards;
}

@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Custom Cursor --- */
.custom-cursor {
    position: fixed;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(235, 224, 193, 0.3);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out;
}

/* --- Split Container --- */
.split-container {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
}

/* --- Seam Line --- */
.seam-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* --- Panels --- */
.panel {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    transition: flex var(--transition-speed) var(--transition-ease);
}

/* Hover states — applied via JS */
.split-container:hover .panel.active {
    flex: 3;
}

.split-container:hover .panel.inactive {
    flex: 1;
}

/* --- Panel Background (image / video) --- */
.panel-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.panel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.panel-video {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide native video play button on iOS */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none;
}

/* --- Dark Overlay --- */
.panel-overlay {
    position: absolute;
    inset: 0;
    background: var(--dark-overlay);
    z-index: 2;
    transition: background var(--transition-speed) var(--transition-ease);
}

.panel-right .panel-overlay {
    background: rgba(0, 0, 0, 0.25);
}

.panel-left.active .panel-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.panel-right.active .panel-overlay {
    background: rgba(0, 0, 0, 0.25);
}

.panel.inactive .panel-overlay {
    background: rgba(0, 0, 0, 0.35);
}

/* --- Panel Content --- */
.panel-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: var(--space-lg) var(--space-lg) var(--space-3xl);
    color: var(--cream);
}

/* --- Logo area --- */
.panel-logo {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.mobile-palm {
    display: none;
}

.panel-right .panel-logo {
    justify-content: flex-end;
}

.logo-icon {
    width: 73px;
    height: 48px;
    opacity: 0.9;
    transition: opacity 0.4s ease;
}

.logo-mark {
    width: 34px;
    height: 48px;
    opacity: 0.9;
    transition: opacity 0.4s ease;
}

.panel:hover .logo-icon,
.panel:hover .logo-mark {
    opacity: 1;
}

/* --- Typography --- */
.panel-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wordmark — always dead centre */
.heading-logo {
    width: 298px;
    height: auto;
    margin-bottom: 0;
    display: block;
    opacity: 0;
    transform: translateY(12px);
    animation: contentIn 1s cubic-bezier(0.25, 0.1, 0.26, 1) 0.6s forwards;
}

/* CTA hidden until hover */
.panel-cta {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

/* Tagline element stays at opacity 1; the per-word spans inside drive the reveal. */
.panel-text .tagline {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Word-split — per-word fade + rise, triggered by .panel.active (desktop hover)
   or .is-visible on the tagline element (mobile load). */
.tagline[data-words] .word {
    display: inline-block;
    vertical-align: baseline;
    line-height: inherit;
}
.tagline[data-words] .word > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform, opacity;
}
.panel.active .tagline[data-words] .word > span,
.tagline[data-words].is-visible .word > span {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .tagline[data-words] .word > span {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.panel-cta {
    transition-delay: 0.2s;
}

/* Corner logos animate in on load */
.panel-logo {
    opacity: 0;
    animation: contentIn 1s cubic-bezier(0.25, 0.1, 0.26, 1) 0.3s forwards;
}

/* Hover on panel — reveal tagline and CTA */
.panel.active .panel-text .tagline,
.panel.active .panel-cta {
    opacity: 1;
    transform: translateY(0);
}

.panel.active .panel-text .tagline {
    transition-delay: 0.1s;
}

.panel.active .panel-cta {
    transition-delay: 0.2s;
}

/* Hide on inactive panel */
.panel.inactive .heading-logo,
.panel.inactive .panel-text .tagline,
.panel.inactive .panel-cta,
.panel.inactive .panel-logo {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0s;
    animation: none;
}

@keyframes contentIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tagline {
    font-family: var(--font-subheading);
    font-size: var(--type-sub);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    color: #EBE0C1;
    letter-spacing: var(--ls-body);
    text-align: center;
    white-space: nowrap;
    margin-top: var(--space-lg);
}

.panel-right .tagline {
    text-align: center;
}

/* --- CTA Button --- */
.panel-cta {
    width: 100%;
    text-align: center;
    margin-top: var(--space-2xl);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 42px;
    border: 1px solid #EBE0C1;
    color: #EBE0C1;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: var(--type-eyebrow);
    font-style: normal;
    line-height: normal;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    text-align: center;
    transition: all 0.4s ease;
    background: transparent;
}

.btn-outline:hover {
    background: var(--cream);
    color: #1a1a1a;
}

/* --- Placeholder backgrounds (remove when real assets are added) --- */
.panel-left .panel-bg {
    background: linear-gradient(135deg, #2d3a2e 0%, #1a2418 40%, #3d4a3e 100%);
}

.panel-right .panel-bg {
    background: linear-gradient(135deg, #5a8a7a 0%, #c4a96a 50%, #3a7a8a 100%);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* --- Large Desktop (1440px+) --- */
@media screen and (min-width: 1441px) {
    .heading-logo {
        width: 353px;
    }

    .tagline {
        font-size: var(--type-sub);
    }

    .btn-outline {
        width: 220px;
        height: 44px;
        font-size: var(--type-eyebrow);
    }
}

/* --- Standard Desktop (1024px – 1440px) — default styles apply --- */

/* --- Tablet Landscape (768px – 1024px) --- */
@media screen and (max-width: 1024px) {
    .heading-logo {
        width: 242px;
    }

    .tagline {
        font-size: var(--type-sub);
    }

    .btn-outline {
        width: 180px;
        height: 40px;
        font-size: var(--type-eyebrow);
    }

    .panel-content {
        padding: var(--space-md) var(--space-md) var(--space-3xl);
    }

    .logo-icon {
        width: 56px;
        height: auto;
    }

    .logo-mark {
        width: 26px;
        height: auto;
    }
}

/* --- Tablet Portrait (768px) --- */
@media screen and (max-width: 768px) {
    .split-container {
        flex-direction: column;
    }

    .panel-content {
        padding: var(--space-md) var(--space-md) var(--space-xl);
        align-items: center;
    }

    .panel-logo {
        text-align: left;
        justify-content: space-between;
    }

    .panel-left .mobile-palm {
        display: block;
    }

    .panel-right .panel-logo {
        visibility: hidden;
    }

    .heading-logo {
        width: 223px;
        margin-bottom: var(--space-md);
    }

    .tagline {
        font-size: var(--type-sub);
    }

    .panel-cta {
        margin-top: var(--space-xl);
    }

    .tagline {
        margin-top: var(--space-sm);
    }

    .btn-outline {
        width: 160px;
        height: 38px;
    }

    /* Disable expand on mobile — stack instead */
    .split-container:hover .panel.active {
        flex: 1;
    }
    .split-container:hover .panel.inactive {
        flex: 1;
    }

    /* Show text by default on mobile/tablet — no hover available */
    .panel-text .heading-logo,
    .panel-text .tagline,
    .panel-cta {
        opacity: 1 !important;
        transform: translateY(0) !important;
        animation: none;
    }

    /* Hide custom cursor on touch devices */
    .custom-cursor {
        display: none;
    }

    /* Video fills panel properly when stacked */
    .panel-video {
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }
}

/* --- Mobile (480px and below) --- */
@media screen and (max-width: 480px) {
    .panel-content {
        padding: var(--space-sm) var(--space-sm) var(--space-xl);
    }

    .heading-logo {
        width: 186px;
        margin-bottom: var(--space-sm);
    }

    .tagline {
        font-size: var(--type-sub);
        white-space: normal;
    }

    .panel-cta {
        margin-top: var(--space-lg);
    }

    .btn-outline {
        width: 140px;
        height: 36px;
        font-size: var(--type-eyebrow);
    }

    .logo-icon {
        width: 47px;
        height: auto;
    }

    .logo-mark {
        width: 20px;
        height: auto;
    }
}

/* ============================================
   Cookie consent banner (landing page version)
   ============================================ */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #EBE0C1;
    color: #172722;
    padding: 24px 40px;
    box-shadow: 0 -2px 24px rgba(23, 39, 34, 0.12);
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.cookie-banner-visible { transform: translateY(0); }
.cookie-banner-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner-title {
    font-family: 'Larken', Georgia, serif;
    font-size: 16px;
    color: #173A2E;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}
.cookie-banner-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #172722;
    margin: 0;
}
.cookie-banner-desc a { color: #173A2E; text-decoration: underline; }
.cookie-banner-buttons { display: flex; gap: 16px; flex-shrink: 0; }
.cookie-btn {
    height: 36px;
    padding: 0 24px;
    border: 1px solid #173A2E;
    border-radius: 200px;
    background: transparent;
    color: #173A2E;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}
.cookie-btn-primary { background: #173A2E; color: #EBE0C1; }
.cookie-btn:hover { opacity: 0.88; }
.cookie-btn:focus-visible { outline: 2px solid #173A2E; outline-offset: 3px; }
@media (max-width: 640px) {
    .cookie-banner { padding: 16px; }
    .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 16px; }
    .cookie-banner-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .cookie-btn { width: 100%; padding: 0 8px; }
}