/* ==========================================================================
   Main Stylesheet for Sam Andrews Mendel Website
   ========================================================================== */

/* Typography - Ranade font family */
@font-face {
    font-family: 'Ranade';
    src: url('../fonts/Ranade-Regular.woff2') format('woff2'),
         url('../fonts/Ranade-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ranade';
    src: url('../fonts/Ranade-Light.woff2') format('woff2'),
         url('../fonts/Ranade-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ranade';
    src: url('../fonts/Ranade-Bold.woff2') format('woff2'),
         url('../fonts/Ranade-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Base Styles
   ========================================================================== */

/**
 * Reset default browser styles and set base properties
 * - Zero margins and padding for consistent layout
 * - Full viewport height to ensure content fills screen
 * - Hidden overflow to prevent scrolling
 * - White background for clean look
 * - Spectral font for refined typography
 */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #fff;
    font-family: 'Times New Roman', Times, serif;
    overflow: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    display: none;
}

/* Debug Elements
   ========================================================================== */

/**
 * Debug labels for development
 * - Hidden by default
 * - Used for visual debugging of layout elements
 */
.debug-label {
    display: none;
}

/* SVG Container
   ========================================================================== */

/**
 * Container for SVG elements
 * - Fixed position covering entire viewport
 * - Non-interactive
 */
.svg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.main-svg {
    width: 100%;
    height: 100%;
}

.main-svg path {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05)) url(#noise-subtle);
}

/* Name Container
   ========================================================================== */

/**
 * Container for the name elements (Sam Andrews Mendel)
 * - Fixed height of 33vh for consistent positioning
 * - High z-index to ensure visibility
 * - Debug label color for development
 */
.name-container {
    position: relative;
    width: 100%;
    height: 33vh;
    z-index: 2;
}

.name-container > .debug-label {
    color: rgba(255, 0, 0, 0.4);
}

/* Name Elements
   ========================================================================== */

/**
 * Base styles for name elements
 * - Times New Roman font
 * - Light font weight (200) for elegant look
 * - Letter spacing for improved readability
 * - Color-blocked borders (70s palette)
 * - Subtle noise grain texture
 */
.name {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 1.5vw;
    padding: 12px 15px;
    color: #000;
    filter: none;
    background-color: #fff;
}


.name > .debug-label {
    color: #00FF00;
}

.name div {
    color: #000;
}

/**
 * Pseudo-element for name border effect
 * - Creates a blurred border effect
 * - Positioned behind the main element
 * - Non-interactive (pointer-events: none)
 */

.name > .debug-label {
    color: rgba(0, 255, 0, 0.4);
    filter: blur(0);
}

/* Name Positioning
   ========================================================================== */

/**
 * Individual name element positioning
 * - Sam: Left-aligned with margin, vertical borders with pastel gradient
 * - Andrews: Centered, vertical borders with pastel gradient
 * - Mendel: Right-aligned with margin, vertical borders with pastel gradient
 */
.name-sam {
    text-align: left;
    top: 0%;
    left: 0%;
    margin-left: 1.5vw;
}

.name-andrews {
    text-align: center;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.name-mendel {
    text-align: right;
    top: 0%;
    left: calc(100% - 1.5vw);
    transform: translateX(-100%);
}

/* Bio Section
   ========================================================================== */

/**
 * Bio section styling
 * - Positioned below name
 * - Vertical borders with pastel gradient (70s palette)
 * - Left margin for alignment
 */
.bio {
    position: absolute;
    top: 15%;
    right: 0%;
    left: auto;
    width: 35%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 0px 15px 0px 0px;
    margin-right: 1.5vw;
    filter: none;
    background-color: #fff;
    text-align: right;
    z-index: 2;
}


.bio span {
    color: #000;
}

.bio div {
    color: #000;
}


.bio > .debug-label {
    color: rgba(255, 0, 255, 0.4);
    filter: blur(1);
}

.bio .unblurred {
    color: #000;
    position: relative;
    z-index: 1;
    display: inline-block;
}

/* Headshot Container
   ========================================================================== */

/**
 * Container for the main headshot image
 * - Centered in viewport
 * - Vertical borders with pastel gradient (70s palette)
 * - No noise grain on image for clarity
 */
.headshot-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 30vw;
    z-index: 3;
    filter: none;
    background-color: #fff;
    padding: 0;
}


.headshot-container > .debug-label {
    color: rgba(0, 0, 255, 0.4);
}

.headshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(0);
}

/* Navigation Containers
   ========================================================================== */

/**
 * Main navigation container
 * - Positioned on the right side
 * - Vertical borders with pastel gradient (70s palette)
 */
.nav-container {
    position: absolute;
    top: 50%;
    right: 12%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 20px 150px 20px 325px;
    background-color: #f0f0f0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    filter: none;
}

.nav-container .nav-link {
    font-size: 0.65vw;
}


.nav-container > .debug-label {
    color: rgba(0, 255, 255, 0.4);
}

/**
 * Navigation row container
 * - Subtle teal border with transparency
 */
.nav-row {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    border: none;
    padding: 2px;
    position: relative;
}


.nav-row > .debug-label {
    color: rgba(255, 165, 0, 0.4);
}

/**
 * Project navigation container
 * - Positioned at bottom right
 * - Vertical borders with pastel gradient (70s palette)
 */
.project-nav {
    position: fixed;
    bottom: 5vh;
    right: 2vw;
    width: 20%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 20px 15px;
    background-color: #c45a5a;
    filter: none;
}


.project-nav > .debug-label {
    color: rgba(255, 255, 0, 0.4);
}

.project-nav .nav-link {
    font-family: 'Arial Black', 'Helvetica Bold', sans-serif;
    font-size: 1vw;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.15em;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: inline-block;
    transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-nav .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

.project-nav .nav-link:hover {
    color: #c45a5a;
}

.project-nav .nav-link:hover::before {
    transform: translateY(0);
}

/* Navigation Links
   ========================================================================== */

/**
 * Base styles for navigation links
 * - Times New Roman font
 * - Clean, minimal styling
 */
.nav-link {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1vw;
    font-weight: 200;
    color: #000;
    text-decoration: none;
    letter-spacing: normal;
    filter: none;
    text-align: left;
    border: none;
    padding: 1px;
    margin: 0;
    transition: filter 0.2s ease;
    position: relative;
}


.nav-link:hover {
    filter: none;
    text-decoration: underline;
}

.nav-link.unblurred {
    filter: none;
}

.nav-link.unblurred:hover {
    filter: none;
}

/**
 * Special styling for Teaching link
 * - Black border
 * - White shadow effect
 * - Rounded corners on top-left and bottom-right
 */
.nav-link[href="/teaching"] {
    font-size: 1vw;
    font-weight: 200;
    letter-spacing: normal;
}

/* Teaching Link
   ========================================================================== */

/**
 * Teaching link styles
 * - Dynamically positioned below bio
 * - Vertical borders with pastel gradient (70s palette)
 */
.teaching-link {
    position: absolute;
    z-index: 1000;
    pointer-events: auto;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1vw;
    font-weight: 200;
    font-style: italic;
    color: #fff;
    text-decoration: none;
    letter-spacing: normal;
    filter: none;
    text-align: left;
    padding: 20px 50px;
    margin: 0;
    transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: none;
    background-color: #000;
    overflow: hidden;
}

.teaching-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

.teaching-link:hover {
    color: #000;
    text-decoration: none;
}

.teaching-link:hover::before {
    transform: translateY(0);
}


.teaching-link.visible {
    display: block;
}

.teaching-link:hover {
    text-decoration: underline;
}

/* Project Page Header
   ========================================================================== */

/**
 * Fixed header containing the name (Sam Andrews Mendel)
 * - Positioned at top of viewport
 * - High z-index to ensure visibility
 * - Flex layout for name elements
 */
.header {
    position: fixed;
    top: 4vh;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

/**
 * Container for name elements
 * - Full width flex container
 * - Space between elements
 */
.name-row {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/**
 * Base styles for name elements
 * - Light font weight (200) for elegant look
 * - Letter spacing for improved readability
 * - Subtle drop shadow for depth
 */
.name-left, .name-center, .name-right {
    font-family: 'Ranade', 'Times New Roman', Times, serif;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 1.5vw;
    padding: 2px 8px;
    color: #000;
    text-decoration: none;
    filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.02));
    position: relative;
    text-transform: none;
}

.name-left {
    text-align: left;
    margin-left: 2vw;
}

.name-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
}

.name-right {
    text-align: right;
    margin-right: 2vw;
}

/* Project Page Title
   ========================================================================== */

/**
 * Fixed title section below header
 * - Three-part title layout
 * - Consistent styling with header
 */
.page-title {
    position: fixed;
    top: 8vh;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.page-title-row {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/**
 * Base styles for title elements
 * - Matches name element styling
 * - Three-part layout (left, center, right)
 */
.page-title-left, .page-title-center, .page-title-right {
    font-family: 'Ranade', 'Times New Roman', Times, serif;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 1.5vw;
    padding: 2px 8px;
    color: #000;
    text-decoration: none;
    filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.02));
    position: relative;
    text-transform: none;
}

.page-title-left {
    text-align: left;
    margin-left: 2vw;
}

.page-title-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
}

.page-title-right {
    text-align: right;
    margin-right: 2vw;
}

/* Project Page Content
   ========================================================================== */

/**
 * Main content container
 * - Scrollable area below header and title
 * - Fixed position with calculated height
 */
.content-container {
    position: fixed;
    top: 24vh;
    left: 0;
    width: 100%;
    height: calc(100vh - 24vh);
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
}

/**
 * Grid layout for project items
 * - Responsive grid with minimum item width
 * - Left margin for alignment
 * - Gap between items
 */
.composition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-left: 2vw;
    padding: 0;
}

/**
 * Individual project item
 * - Relative positioning for contained elements
 */
.composition-item {
    position: relative;
    padding: 0;
}

/**
 * Project item title
 * - Light font weight
 * - Bottom margin for spacing
 */
.composition-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 200;
}

/**
 * Project item description
 * - Smaller font size
 * - Increased line height for readability
 * - Subtle gray color
 */
.composition-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #000;
}

/**
 * Audio player styling
 * - Full width
 * - Top margin for spacing
 */
.audio-player {
    width: 100%;
    margin-top: 1rem;
}

/**
 * Back link styling
 * - Fixed position at bottom left
 * - Subtle background and border
 * - Hover effects for interaction
 */
.back-link {
    position: fixed;
    bottom: 2vh;
    left: 2vw;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1vw;
    color: #000;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.back-link:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.2);
}

/**
 * Silly Music grid layout
 * - Three columns per row
 * - Balanced margins on left and right
 * - Increased gap between items
 */
.silly-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-left: 2vw;
    margin-right: 2vw;
    padding: 0;
}

/**
 * Silly Music item container
 * - Relative positioning for contained elements
 */
.silly-item {
    position: relative;
    padding: 0;
}

/**
 * Embed wrapper for videos/audio
 * - Responsive sizing
 * - Clean borderless appearance
 */
.embed-wrapper {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.embed-wrapper iframe {
    width: 100%;
    border: 0;
}

/* Responsive Design
   ========================================================================== */

/**
 * Tablet and Mobile Breakpoints
 * - Adjusts font sizes, margins, and layout
 * - Maintains readability on smaller screens
 */
@media (max-width: 768px) {
    .name-left, .name-center, .name-right {
        font-size: 6vw;
    }
    
    .page-title-left, .page-title-center, .page-title-right {
        font-size: 6vw;
    }
    
    .composition-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .name {
        font-size: 6vw;
    }
    
    .name-sam {
        margin-left: 3vw;
    }
    
    .name-mendel {
        margin-right: 3vw;
    }
    
    .bio {
        width: 80%;
        font-size: 0.7rem;
        margin-left: 3vw;
        top: 20%;
    }
    
    .headshot-container {
        width: 50vw;
        height: 50vw;
    }
    
    .nav-container {
        right: 45%;
        top: 40%;
    }
    
    .nav-link {
        font-size: 2.5vw;
    }
    
    .project-nav {
        width: 40%;
        right: 2vw;
        bottom: 10vh;
    }
    
    .nav-row {
        gap: 1.5rem;
        flex-wrap: wrap;
        padding: 0 1rem;
    }
    
    .teaching-link {
        font-size: 2.5vw;
    }
    
    .back-link {
        font-size: 4vw;
    }

    .silly-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .name {
        font-size: 8vw;
    }
    
    .bio {
        width: 90%;
        font-size: 0.6rem;
        top: 25%;
    }
    
    .headshot-container {
        width: 70vw;
        height: 70vw;
    }
    
    .nav-container {
        right: 35%;
        top: 35%;
    }
    
    .nav-link {
        font-size: 3vw;
    }
    
    .project-nav {
        width: 50%;
        right: 1vw;
        bottom: 15vh;
    }
    
    .teaching-link {
        font-size: 3vw;
    }
    
    .back-link {
        font-size: 4vw;
    }
}