/* style.css */

/* Global Reset & Theme Variables */
:root {
    --hell-bg: #000000;
    --neon-orange: #ff5500;
    --neon-crimson: #cc0000;
    --glass-bg: rgba(20, 0, 0, 0.4);
    --glass-border: rgba(255, 85, 0, 0.2);
    --text-light: #ffffff;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hell-bg);
    font-family: 'Courier New', Courier, monospace; /* Placeholder for a gothic/cinematic font */
    overflow: hidden; /* Prevents scrolling */
    color: var(--text-light);
}

/* =========================================
   Persistent Navigation (Glassmorphism)
   ========================================= */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 100; /* Keeps it above everything */
}

.nav-brand {
    font-weight: bold;
    color: var(--neon-orange);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-greeting {
    opacity: 0.8;
}

/* =========================================
   Cinematic Video Engine
   ========================================= */
#video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background-color: var(--hell-bg);
    
    /* Hardware acceleration fix for tablet blur transitions */
    filter: blur(0px) brightness(1);
    -webkit-filter: blur(0px) brightness(1);
    transition: filter 2.5s ease-in-out, -webkit-filter 2.5s ease-in-out;
    will-change: filter;
}
.cinematic-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* CRITICAL: Ensures video is never cropped or zoomed */
    object-fit: contain; 
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none; /* Prevents videos from stealing clicks */
}

.cinematic-layer.active {
    opacity: 1;
}

/* =========================================
   UI & Interactive Overlays
   ========================================= */
#ui-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50; /* Above video, below nav */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Lets clicks pass through where there are no UI elements */
}
.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Enter Hell / Blow Button (Smaller, mobile optimized) */
.glowing-btn {
    pointer-events: auto;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--neon-orange);
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--neon-crimson);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 10px var(--neon-crimson), inset 0 0 5px var(--neon-crimson);
    transition: all 0.3s ease;
    max-width: 80vw;
    text-align: center;
    white-space: normal; /* Allows text to wrap safely on tiny screens */
}
.glowing-btn:hover, .glowing-btn:active {
    background: var(--neon-crimson);
    color: var(--text-light);
    box-shadow: 0 0 30px var(--neon-orange), inset 0 0 20px var(--neon-orange);
    text-shadow: 0 0 5px #fff;
}

/* =========================================
   Premium Glassmorphic Timer
   ========================================= */
#life-timer {
    position: absolute;
    top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 1.5s ease-in-out;
}

/* Timer Scaling (Smaller) */
.timer-label {
    font-size: 0.7rem;
    color: var(--neon-orange);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(255, 85, 0, 0.5);
    opacity: 0.9;
}
.timer-grid {
    display: flex;
    gap: 8px; /* Reduced gap */
}
.time-block {
    background: rgba(15, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 85, 0, 0.2);
    border-radius: 6px;
    padding: 10px 12px; /* Smaller padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px; /* Smaller width */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(204, 0, 0, 0.1);
}
.time-block span {
    font-size: 1.4rem; /* Smaller numbers */
    font-weight: bold;
    color: var(--text-light);
    text-shadow: 0 0 10px var(--neon-crimson);
    margin-bottom: 2px;
}
.time-block small {
    font-size: 0.55rem;
}


/* =========================================
   Cinematic Blur & Finale Layer
   ========================================= */
.blur-background {
    filter: blur(15px) brightness(0.3) !important;
    -webkit-filter: blur(15px) brightness(0.3) !important;
}

#finale-layer {
    position: fixed; /* Changed from absolute to fix tablet collapse bug */
    top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 2s ease-in-out;
    pointer-events: auto; /* Allows clicking the envelope */
    z-index: 60; /* Ensures it stays above other UI elements */
}.glowing-text {
    font-size: 1.8rem;
    color: var(--text-light);
    text-shadow: 0 0 15px var(--neon-orange), 0 0 30px var(--neon-crimson);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 50px;
    text-align: center;
}

#envelope-wrapper {
    position: relative;
    width: 280px;
    height: 180px;
    cursor: pointer;
    perspective: 1000px;
    z-index: 65; 
    background: rgba(0,0,0,0); /* Forces a solid touch target for Safari */
    -webkit-tap-highlight-color: transparent;
    /* Added transition so it slides down smoothly */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1s ease; 
}
.envelope {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.envelope-back {
    position: absolute;
    width: 100%; height: 100%;
    background: #110000;
    border: 1px solid #440000;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    z-index: 1;
}

.cards-container {
    position: absolute;
    width: 90%; height: 90%;
    top: 5%; left: 5%;
    z-index: 2;
}

/* Card Core Structure */
.letter-card {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(20, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-light);
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.9), inset 0 0 10px rgba(255, 85, 0, 0.1);
    top: 0; left: 0;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s, filter 0.6s;
}

/* Card Internal Layout (For Scrolling) */
.card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.letter-card h3 {
    margin: 0 0 10px 0;
    color: var(--neon-orange);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* The Scrollable Area */
.card-text-container {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    padding-right: 5px;
    margin-bottom: 12px; /* Leaves room for the indicator */
    opacity: 0.9;
}

/* Custom Scrollbar for Hell Theme */
.card-text-container::-webkit-scrollbar { width: 4px; }
.card-text-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.card-text-container::-webkit-scrollbar-thumb { background: var(--neon-crimson); border-radius: 4px; }

/* Scroll & Tap Indicator */
/* Scroll & Tap Indicator (Minimized) */
.scroll-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.45rem;
    color: var(--neon-orange);
    letter-spacing: 0.5px;
    animation: bounce 1.5s infinite;
    pointer-events: none;
    opacity: 0.6; /* Makes it look like a subtle watermark */
}
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -4px); }
}

/* =========================================
   Stacking & Swiping Animations
   ========================================= */
.envelope-front {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(40, 5, 5, 0.85);
    border: 1px solid rgba(200, 0, 0, 0.3);
    border-radius: 4px;
    clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%);
    z-index: 20;
}

.envelope-flap {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(50, 10, 10, 0.95);
    clip-path: polygon(0 0, 100% 0, 50% 55%);
    transform-origin: top;
    transition: transform 0.6s ease-in-out;
    z-index: 21;
}

.envelope.open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1; 
}

.envelope-cta {
    position: absolute;
    width: 100%; text-align: center; bottom: -30px;
    color: var(--neon-orange); font-size: 0.7rem; letter-spacing: 2px;
    animation: pulse 2s infinite;
}

/* The Card Deck Positions - Scaled up by 25% */
.card-pos-hidden { transform: translateY(0) scale(0.5); z-index: 2; opacity: 0; pointer-events: none; }
.card-pos-1 { transform: translateY(-200px) scale(1.35); z-index: 10; opacity: 1; filter: brightness(1); pointer-events: auto; }
.card-pos-2 { transform: translateY(-185px) scale(1.25); z-index: 9; opacity: 0.8; filter: brightness(0.6); pointer-events: none; }
.card-pos-3 { transform: translateY(-170px) scale(1.15); z-index: 8; opacity: 0.5; filter: brightness(0.3); pointer-events: none; }

/* The Swipe Away Action */
.card-discarded {
    transform: translate(150%, -100px) rotate(25deg) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Gallery CTA Placement - Perfectly Centered */
#gallery-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    transition: opacity 1s ease;
}



/* =========================================
   Apple-Standard Fidget Spinner Gallery
   ========================================= */
#gallery-layer {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    
    /* High-End Frosted Glassmorphism */
    background: rgba(30, 5, 5, 0.2); 
    backdrop-filter: blur(35px); 
    -webkit-backdrop-filter: blur(35px);
    
    z-index: 100;
    transition: opacity 1s ease;

    /* CRITICAL FIX: This allows the gallery to register your touches */
    pointer-events: auto; 
}

/* Hide scrollbar for clean UI & Add iOS smooth touch */
.gallery-scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain; /* Prevents bouncing out of container */
    scrollbar-width: none; /* Firefox */
    
    /* CRITICAL FIX: Forces Apple's native momentum scroll on tablets */
    -webkit-overflow-scrolling: touch; 
}
.gallery-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/iOS */
}
/* Magnetic Item */
.gallery-item {
    width: 100%;
    height: 100vh; /* Full screen per item */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    
    /* The magic kinetic transition */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s, opacity 0.6s;
    transform: scale(0.75);
    filter: blur(8px) brightness(0.4);
    opacity: 0.5;
}

/* Active State Triggered by JS */
.gallery-item.active-snap {
    transform: scale(1);
    filter: blur(0px) brightness(1);
    opacity: 1;
}

.gallery-img {
    max-width: 90vw;
    max-height: 75vh;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 20px rgba(255, 85, 0, 0.2);
}

.gallery-instruction {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--neon-orange);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: pulse 2s infinite;
    pointer-events: none;
}