/* ==========================================================================
   Magna Dollar - Premium Reference Layout (Skyscraper Reflection Theme)
   ========================================================================== */

:root {
    --primary-gold: #e2ba5e;
    --primary-gold-glow: rgba(226, 186, 94, 0.4);
    --primary-gold-dark: #c09b45;
    --bg-overlay: rgba(10, 15, 26, 0.55); /* Darkened overlay to ensure perfect contrast */
    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --transition-base: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    height: 100%;
    background-color: #111625; /* Blends the browser chrome with the top of the video */
    overflow-y: auto; /* Fallback to scrolling on very short screens */
}

body {
    background-color: #05070a;
    color: var(--text-white);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

/* Skyscraper Facade Background Wrapper */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: -webkit-fill-available; /* Stretch fully behind Safari/Chrome address bars */
    z-index: 1;
    background-image: url('../assets/video_fallback.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reflective Glass Color Grading Overlay */
.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(12, 23, 33, 0.4) 0%,
        rgba(10, 15, 26, 0.65) 50%,
        rgba(5, 8, 15, 0.85) 100%
    );
    backdrop-filter: saturate(1.2) contrast(1.1);
    -webkit-backdrop-filter: saturate(1.2) contrast(1.1);
}

/* Top Centered Header */
.reference-header {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 1rem 1rem;
}

.logo-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.header-logo-svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

.logo-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: var(--text-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.brand-subtitle {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 4px;
    color: var(--primary-gold);
    margin-top: 0.15rem;
}

/* Centered Layout Main Content - Positioned in the lower third to keep background clear */
.reference-main {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 2rem 1.5rem 6dvh; /* Pushes content into the lower-third zone dynamically */
    width: 100%;
}

.hero-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 850px;
    width: 100%;
}

/* Reference Main Headline - Premium, highly readable luxury serif typography */
.reference-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.95); /* Increased text opacity */
    letter-spacing: 0.2px;
    margin-bottom: 0;
}

/* Regulatory Footer styling matching reference location */
.reference-footer {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 2.5dvh 1.5rem; /* Dynamic vertical padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.disclaimer-text {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.copyright-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Media Queries & Responsiveness
   ========================================================================== */

/* Tablets / Medium Viewports */
@media (max-width: 768px) and (min-width: 501px) {
    .reference-main {
        padding-bottom: 5rem;
    }
    
    .reference-title {
        font-size: 2.8rem;
        line-height: 1.25;
    }
}

/* Mobile Screens (500px and below) */
@media (max-width: 767px) {
    .hero-bg-wrapper {
        background-image: url('../assets/phone_video_fallback.webp');
    }

    .reference-header {
        padding: calc(6dvh + env(safe-area-inset-top)) 1rem 1dvh; /* Increased top safe area spacing */
    }

    .brand-title {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }

    .brand-subtitle {
        font-size: 0.55rem;
        letter-spacing: 3px;
    }

    .reference-main {
        padding: 1rem 1rem 4dvh; /* Fluid padding bottom adjusts to viewport height */
    }

    .reference-title {
        font-size: 2.2rem;
        line-height: 1.25;
        max-width: 330px; /* Forces text to wrap into 3 balanced lines at a larger size */
        margin-left: auto;
        margin-right: auto;
        br {
            display: none; /* Let text wrap naturally */
        }
    }

    .reference-footer {
        padding: 1.5rem 1rem calc(6dvh + env(safe-area-inset-bottom)); /* Safe area inset bottom prevents copyright overlap with home indicator/search bar */
        gap: 0.25rem;
    }

    .disclaimer-text {
        font-size: 0.75rem;
    }

    .copyright-text {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   Height-Based Viewport Scroll Locking
   ========================================================================== */

/* Lock scroll on desktop/tablets when viewport height is at least 500px */
@media (min-width: 768px) and (min-height: 500px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }
}

/* Lock scroll on mobile screens when viewport height is at least 460px */
@media (max-width: 767px) and (min-height: 460px) {
    html, body {
        height: 100%;
        height: -webkit-fill-available;
        overflow: hidden;
        touch-action: none; /* Disable touch dragging/elastic scroll */
    }
}