/* universe.css - Global Design Engine */
.diary-card {
    box-shadow: 0 0 50px rgba(240, 160, 20, 0.1);
    transform: translateY(20px);
    animation: slideUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideUp {
    to { transform: translateY(0); }
}

.person-card { cursor: pointer; } /* Shows the user they can click! */
.site-logo {
    position: fixed;
    top: 1.5rem;
    left: 2rem;
    width: 80px; /* Adjust this to change the size */
    z-index: 1100; /* Higher than the nav so it's always visible */
    transition: var(--transition);
}

.site-logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(240, 160, 20, 0.2));
}

.site-logo:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}
:root {
    --bg: #050505;
    --text: #f0ece0;
    --accent: rgba(240, 160, 20, 0.6);
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-main: 'DM Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-heading: 'Bebas Neue', sans-serif;
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

#cursor {
    width: 20px; height: 20px;
    border: 1px solid var(--text);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
}

.bg-grad {
    position: fixed; inset: 0; z-index: -1;
    background: 
        radial-gradient(circle at 20% 30%, rgba(120, 60, 180, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(200, 80, 40, 0.05) 0%, transparent 50%);
}

.universe-nav {
    position: fixed; top: 2rem; left: 50%;
    transform: translateX(-50%);
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    display: flex; 
    gap: 1.5rem; /* Reduced gap to fit all 7 links comfortably */
    z-index: 1000;
}



.universe-nav a {
    color: var(--text); text-decoration: none;
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 2px; text-transform: uppercase;
    opacity: 0.5; transition: var(--transition);
}

.universe-nav a:hover, .universe-nav a.active {
    opacity: 1; text-shadow: 0 0 10px var(--text);
}

.portal-card, .exp-card, .location-entry {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 2rem;
    transition: var(--transition);
    text-decoration: none; color: inherit;
    display: block; margin-bottom: 1rem;
}

.portal-card:hover, .location-entry:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--accent);
    transform: translateY(-5px);
}
.video-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    margin-bottom: 2rem;
    overflow: hidden;
    position: relative;
    transition: var(--transition);
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9; /* Standard widescreen look */
    background: #000;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes it fill the whole box like a movie */
    opacity: 0.5; /* Starts a bit dark to keep the "no-noise" vibe */
    transition: var(--transition);
}

.video-card:hover video {
    opacity: 1; /* Brightens up when you hover! */
    transform: scale(1.02);
}

.video-overlay {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    pointer-events: none; /* Allows clicks to go through to the video */
}

#thingVideo {
    opacity: 0.4; /* Starts dark and mysterious */
    transition: var(--transition);
    cursor: pointer;
}

.video-container:hover #thingVideo {
    opacity: 0.6; /* Glows slightly on hover to show it's clickable */
}
.video-card {
    max-width: 600px; /* The "Normal" resting size */
    margin: 2rem auto; /* Centers it on the page */
    transition: max-width 0.8s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth expansion */
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass);
}

.video-card.playing {
    max-width: 900px; /* The "Medium" expanded size when playing */
    border-color: var(--accent);
}
#play-hint {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
}
/* The Card starts small */
.video-card {
    max-width: 500px; /* Small resting size */
    margin: 4rem auto; 
    background: var(--glass);
    border: 1px solid var(--glass-border);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

/* The Card expands when playing */
.video-card.playing {
    max-width: 850px; /* Medium playing size */
    border-color: var(--accent);
    box-shadow: 0 0 40px rgba(240, 160, 20, 0.1);
}

/* Fix the text size at the bottom left */
.video-overlay h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem !important; /* Smaller text so it doesn't overlap */
    transition: 0.5s;
}

.video-card.playing .video-overlay h2 {
    font-size: 2.2rem !important; /* Grows slightly when playing */
}
#thingVideo {
    filter: grayscale(100%) brightness(0.6); /* Makes the cover photo B&W and Moody */
    transition: all 0.8s ease;
}

.video-card.playing #thingVideo {
    filter: grayscale(0%) brightness(1); /* Brings back Color and Light when playing! */
}
.earth-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    margin-bottom: 4rem;
    padding: 1rem;
    transition: var(--transition);
}

.location-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 21/9; /* Cinematic ultra-wide look */
}

.location-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.2) contrast(1.1); /* Gives it a slightly "Documentary" tint */
    transition: var(--transition);
}

.location-coords {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0,0,0,0.7);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 0.4rem 0.8rem;
    letter-spacing: 2px;
}

.location-info {
    padding: 2rem 1rem;
}

.location-tag {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.6rem;
    letter-spacing: 3px;
}

.location-name {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin: 0.5rem 0;
}

.earth-card:hover img {
    transform: scale(1.05);
    filter: sepia(0) contrast(1.2);
}
.book-section {
    display: flex; justify-content: center; align-items: center;
    padding: 5rem 0; perspective: 2000px; /* Gives the 3D depth */
}

.book {
    width: 400px; height: 550px;
    position: relative; transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

.page {
    position: absolute; inset: 0;
    background: #111; /* Dark paper feel */
    border: 1px solid var(--glass-border);
    padding: 3rem;
    backface-visibility: hidden; /* Hides the back of the page when flipped */
    transform-origin: left;
    transition: transform 0.8s ease-in-out;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}

.page-content {
    display: flex; flex-direction: column; height: 100%;
}

.page h2 { font-family: var(--font-heading); color: var(--accent); margin-bottom: 1.5rem; }

/* When a page is "flipped" */
.page.flipped {
    transform: rotateY(-160deg); /* The angle of the turn */
}

.cover { background: var(--glass); border-left: 5px solid var(--accent); }
/* The Shelf where the book sits */
.library-shelf {
    min-height: 600px; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.book {
    width: 350px;
    height: 500px;
    position: relative;
    transform-style: preserve-3d;
}

.nav-zone {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
}
.nav-zone.right { right: 0; }
.nav-zone.left { left: 0; }