/**
 * Cinematic Presentation Engine 2.1 - The Master Class
 * Focused on Contrast, High-End Lighting, and Subtle Floor Physics
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --border: 240 5.9% 90%;
    
    --shadow-cinematic: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --border: 240 3.7% 19.9%;
    
    --shadow-cinematic: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 40px 100px rgba(0, 0, 0, 0.4);
}

* { 
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-color: hsl(var(--border)); 
}

body { 
    background-color: hsl(var(--background)); 
    color: hsl(var(--foreground));
    transition: background-color 0.8s ease;
    -webkit-font-smoothing: antialiased;
}

/* --- THE STUDIO STAGE --- */
.stage-lighting {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #020202;
}

.stage-lighting::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    filter: blur(60px);
}

/* --- RENDER ENGINE --- */
.render-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mockup-wrapper {
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.5));
}

/* Browser 2.1 - High Contrast & Chrome Details */
.browser-frame {
    background: #111;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}

.browser-header {
    height: 3.5rem;
    background: linear-gradient(to bottom, #1a1a1a, #111);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: relative;
}

.browser-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.6rem;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
}

.browser-url {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.5rem;
    padding: 0.4rem 2rem;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}

/* Laptop 2.2 - MacBook Ultra Style */
.laptop-frame {
    width: min(90vw, 1000px);
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.5rem 1.5rem 0.5rem 0.5rem;
    padding: 1.5% 1.5% 2% 1.5%;
    position: relative;
    box-shadow: var(--shadow-cinematic);
}

.laptop-screen {
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.9);
}

.laptop-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}

.laptop-bottom {
    width: 110%;
    height: 1.25rem;
    margin-left: -5%;
    background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%);
    border-radius: 0 0 1.5rem 1.5rem;
    position: relative;
    transform: perspective(1000px) rotateX(-15deg);
    margin-top: -2px;
    z-index: -1;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.6),
        inset 0 1px 1px rgba(255,255,255,0.1);
}

/* Phone 2.2 - Pro Frame Style */
.phone-frame {
    width: min(85vw, 320px);
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3.5rem;
    padding: 12px;
    position: relative;
    box-shadow: 
        var(--shadow-cinematic),
        0 0 0 1px rgba(255,255,255,0.05);
}

.phone-screen {
    width: 100%;
    background: #000;
    border-radius: 2.8rem;
    overflow: hidden;
    position: relative;
}

.phone-island {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 1.5rem;
    background: #000;
    border-radius: 1rem;
    z-index: 50;
    box-shadow: inset 0 0 4px rgba(255,255,255,0.1);
}

/* --- THE REFLECTION HUB --- */
.mirror-wrap {
    position: relative;
    margin-top: 0.5rem;
}

.mirror-reflection {
    transform: scaleY(-0.6) translateY(0);
    opacity: 0.1;
    filter: blur(3px) contrast(1.1);
    mask-image: linear-gradient(to top, transparent 10%, black 90%);
    pointer-events: none;
    overflow: hidden; /* Prevent iframe content leaks in mirror */
}

/* --- STUDIO COCKPIT REDESIGN --- */
.cockpit-bar {
    position: fixed;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,20,20,0.8);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.6rem;
    border-radius: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 1000;
}

.cockpit-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 1.25rem;
}

.cockpit-btn.active {
    background: #fff;
    color: #000;
    transform: scale(1.1);
}

.cockpit-btn:not(.active):hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.cockpit-divider {
    width: 1px;
    height: 2rem;
    background: rgba(255,255,255,0.1);
    margin: auto 0.5rem;
}

/* --- UTILS --- */
.hidden { display: none !important; }
.reveal {
    animation: reveal-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveal-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.scale-reveal {
    animation: scale-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scale-reveal {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}