/*
 * TrophyTally Scrollytelling CSS
 * 
 * IMPORTANT: Replace --seq-bg with the exact hex from your frame backgrounds.
 * Use an eyedropper tool on the corner of ezgif-frame-001.png to get the exact color.
 * The current value is sampled from the dark corners of the provided frames.
 *
 * PRODUCTION NOTES (WhiteNoise):
 * - Ensure collectstatic runs before deployment
 * - Verify manifest URLs work with WhiteNoise's CompressedManifestStaticFilesStorage
 */

:root {
    /* REPLACE THIS with eyedropped hex from your frames' background corners */
    --seq-bg: #080808;
    
    /* Accent colors matching TrophyTally brand */
    --accent-glow: rgba(100, 180, 255, 0.4);
    --accent-primary: #0d6efd;
}

/* ============================================
   TRANSPARENT NAVBAR (homepage only)
   ============================================ */
body.has-hero-nav #main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: transparent;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Hide navbar completely on mobile landscape during scrollytelling */
@media (max-height: 500px) and (orientation: landscape) {
    body.has-hero-nav:not(.scrollytelling-complete) #main-navbar {
        opacity: 0;
        pointer-events: none;
    }
    
    body.has-hero-nav.scrollytelling-complete #main-navbar {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.3s ease;
    }
}

body.has-hero-nav #main-navbar.navbar-scrolled {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

body.has-hero-nav #main-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.has-hero-nav #main-navbar .btn-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

body.has-hero-nav #main-navbar .btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

body.has-hero-nav #main-navbar .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Add padding to body to account for fixed navbar on other pages */
body:not(.has-hero-nav) #main-navbar {
    background: #0d0d0d;
}

/* Remove main padding on homepage so hero is flush */
body.has-hero-nav main,
body.has-hero-nav main.py-4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Ensure scrollytelling starts at absolute top */
body.has-hero-nav .scrollytelling-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure body background matches hero */
body.has-hero-nav {
    background-color: var(--seq-bg);
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--seq-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}

.loading-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

/* ============================================
   FALLBACK HERO (reduced motion / load failure)
   ============================================ */
.fallback-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center bottom, #1a1a1a 0%, var(--seq-bg) 70%);
}

.fallback-hero.d-none {
    display: none !important;
    height: 0;
    min-height: 0;
    overflow: hidden;
}

/* ============================================
   SCROLLYTELLING CONTAINER
   ============================================ */
.scrollytelling-container {
    position: relative;
    /* 400vh gives room to scroll through the animation */
    height: 400vh;
    background-color: var(--seq-bg);
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile Safari */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--seq-bg);
}

/* ============================================
   VIDEO (hidden, used as source)
   ============================================ */
#trophy-video {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* ============================================
   CANVAS
   ============================================ */
#trophy-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   TEXT OVERLAYS
   ============================================ */
.overlay-text {
    position: absolute;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
    max-width: 90%;
}

.overlay-text.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Intro - centered */
.overlay-intro {
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overlay-intro h1 {
    font-size: clamp(2.5rem, 8vw, 5rem);
    margin-bottom: 0.5rem;
}

.overlay-intro .lead {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: rgba(255, 255, 255, 0.8);
}

/* Left aligned */
.overlay-left {
    text-align: left;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    max-width: 45%;
}

/* Right aligned */
.overlay-right {
    text-align: right;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    max-width: 45%;
}

/* CTA - centered */
.overlay-cta {
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================
   GLOW TEXT EFFECT (subtle, readable)
   ============================================ */
.glow-text {
    text-shadow: 
        0 0 30px var(--accent-glow),
        0 0 60px rgba(100, 180, 255, 0.15);
}

/* ============================================
   AFTER SCROLL SECTION
   ============================================ */
.after-scroll {
    background: linear-gradient(to bottom, var(--seq-bg) 0%, #111 100%);
    min-height: 50vh;
}

/* ============================================
   SCROLL CTA BUTTON
   ============================================ */
.scroll-cta-btn {
    padding: 0.875rem 2.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.scroll-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.3);
}

/* ============================================
   REDUCED MOTION - show static content
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .scrollytelling-container {
        height: auto;
        min-height: 100vh;
    }
    
    .sticky-wrapper {
        position: relative;
    }
    
    #trophy-canvas {
        position: relative;
        height: 60vh;
    }
    
    .overlay-text {
        position: relative;
        opacity: 1;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
        padding: 2rem;
        text-align: center;
        max-width: 100%;
    }
    
    .overlay-left,
    .overlay-right {
        text-align: center;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .overlay-left,
    .overlay-right {
        max-width: 90%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .overlay-intro h1 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 1.5rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

/* ============================================
   HIDE NORMAL PAGE ELEMENTS DURING SCROLL
   ============================================ */
.scrollytelling-active .navbar,
.scrollytelling-active footer {
    /* Keep them but they'll scroll away naturally */
}