/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Prevent text selection unless specifically for sentences */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow selection for specific elements like paragraphs, especially in detail views */
p {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

img {
    -webkit-user-drag: none; /* Disable image dragging */
    -moz-user-select: -moz-none; /* Disable image selection for Firefox */
    -ms-user-select: none; /* Disable image selection for IE/Edge */
    user-select: none; /* Disable image selection */
    pointer-events: none; /* Prevent click events for dragging, but allow for JS clicks on parent */
}

html, body {
    height: auto; /* Allow height to adjust based on content */
    min-height: 100%; /* Ensure it's at least 100% of its parent (viewport) */
    overflow-y: scroll; /* Always show vertical scrollbar if content overflows */
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif; /* Default font changed */
    background: #000000;
    color: #ffffff;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    /* overflow-y is now handled by html, body for the main document */
}

/* New Main Page (index.html) specific styles - remains fixed and non-scrollable */
body.new-main-page {
    background-color: white; /* New main page background */
    color: black; /* Text color */
    overflow: hidden; /* Keep overflow hidden for this specific splash page */
    height: 100vh; /* Keep 100vh for this specific landing page */
    height: 100dvh; /* Dynamic height for iOS */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Video container for the new index.html page (coming soon) */
.video-container-new-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind the text and logo/menu */
    overflow: hidden; /* Ensure video doesn't spill */
}

.video-container-new-main video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    filter: brightness(0.9) contrast(1.1); /* Subtle adjustment to video appearance */
}

.new-main-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('mainphoto.png'); /* Changed to local image */
    background-size: contain; /* Changed to contain to see the full photo */
    background-repeat: no-repeat; /* Prevent repeating */
    background-position: center;
    pointer-events: none; /* Make it unclickable */
    user-select: none; /* Make it uncopyable */
    -webkit-user-drag: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
}

.coming-soon-text {
    position: absolute;
    bottom: calc(5vh + env(safe-area-inset-bottom)); /* Responsive bottom positioning with safe area */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for its own width */
    font-family: monospace; /* Code font */
    font-size: clamp(0.8rem, 2vw, 1rem); /* Responsive font size */
    font-weight: 100;
    line-height: 1.2;
    letter-spacing: 1px;
    text-align: center; /* Center text lines */
    white-space: nowrap; /* Keep lines together */
    z-index: 10; /* Ensure it's above the image */
    color: black; /* Text color */
    cursor: pointer; /* Indicate it's interactive */
}
.coming-soon-text span {
    display: block; /* Each line on its own */
    transition: color 0.3s ease; /* Smooth transition for hover */
}
.coming-soon-text:hover {
    color: #ff0000; /* Example hover color */
}


/* Landing Page (now main.html) */
.landing {
    position: relative;
    width: 100vw;
    height: auto; /* Changed from 100vh */
    min-height: 100%; /* Ensure it takes at least full height */
    overflow-y: auto; /* Allow scrolling */
}

.video-container {
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    width: 100vw; /* Explicitly set to viewport width */
    height: 100vh; /* Explicitly set to viewport height */
    z-index: 1;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.2);
}

.video-overlay {
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    width: 100vw; /* Explicitly set to viewport width */
    height: 100vh; /* Explicitly set to viewport height */
    background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 2;
}

/* Logo Area */
.logo-area {
    position: fixed;
    top: calc(40px + env(safe-area-inset-top)); /* Adjusted for safe area */
    left: calc(40px + env(safe-area-inset-left)); /* Adjusted for safe area */
    z-index: 1000;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease; /* Faster transition */
}
.logo-area img {
    height: 48px;
    width: 48px;
    margin-right: 18px;
    display: block;
    pointer-events: auto; /* Allow click events on the logo image */
}
.logo-text-group {
    display: flex;
    flex-direction: row; /* Keep logo on one line */
    align-items: baseline;
    white-space: nowrap; /* Prevent wrapping */
}
.logo-text {
    font-family: 'Lao MN', serif; /* Company name font */
    font-size: 2.1rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
    line-height: 1;
}
.logo-subtext {
    font-family: 'Lao MN', serif; /* Company name font */
    font-size: 1rem;
    font-weight: 300;
    color: #fff;
    letter-spacing: 1px;
    margin-left: 8px; /* Space between "Ocula" and "Microsystems" */
}

/* Logo hover animation: only for non-landing pages */
body:not(.landing-page-active) .logo-area:hover .logo-text,
body:not(.landing-page-active) .logo-area:hover .logo-subtext {
    color: #ff0000;
}
/* Ensure landing page logo stays white on hover */
.landing .logo-area:hover .logo-text,
.landing .logo-area:hover .logo-subtext {
    color: #fff !important;
}

/* Specific styles for logo and menu button on the new main page (index.html) */
.new-main-page .logo-text,
.new-main-page .logo-subtext {
    color: #000 !important; /* Black text for logo on white background */
}
.new-main-page .logo-area img {
    filter: invert(1); /* Invert logo color for white background */
}
.new-main-page .menu-btn svg path {
    stroke: #000 !important; /* Black stroke for menu icon on white background */
}


/* Hamburger menu button */
.menu-btn {
    position: fixed;
    top: calc(40px + env(safe-area-inset-top)); /* Adjusted for safe area */
    right: calc(40px + env(safe-area-inset-right)); /* Adjusted for safe area */
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove padding to let SVG define size */
    display: flex; /* Use flex to center SVG */
    justify-content: center;
    align-items: center;
    width: 40px; /* Define button area */
    height: 40px;
}
.menu-btn svg {
    width: 32px; /* Size of the SVG icon */
    height: 32px;
}
.menu-btn svg path {
    stroke: #fff; /* Default stroke color */
    stroke-width: 2; /* Thickness of lines */
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out; /* Faster transition */
}
.menu-btn:hover svg path {
    stroke: #ff0000; /* Change color on hover */
    transform: scaleX(1.1); /* Slight animation on hover */
}

/* Color inversion for SVG icon based on page background */
.content-page.active .menu-btn svg path {
    stroke: #000 !important; /* Black on white pages */
}
.content-page.active.dark-background .menu-btn svg path {
    stroke: #fff !important; /* White on dark pages */
}

/* Slogan smaller (for main.html, formerly index.html) */
.slogan {
    position: fixed;
    bottom: calc(60px + env(safe-area-inset-bottom)); /* Adjusted for safe area */
    left: calc(40px + env(safe-area-inset-left)); /* Adjusted for safe area */
    z-index: 1000;
    max-width: 700px;
}
.slogan h1 {
    font-family: 'Lao MN', serif; /* Slogan font */
    font-size: clamp(2.5rem, 6vw, 5rem); /* Responsive font size */
    font-weight: 100;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px; /* Reduced margin-bottom to move p closer */
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.75s ease forwards 0.25s; /* Faster animation */
}
.slogan p {
    font-family: Arial, sans-serif; /* Changed to Arial */
    font-size: clamp(1rem, 2.5vw, 1.3rem); /* Responsive font size */
    font-weight: 400; /* Regular font weight */
    letter-spacing: 1px;
    opacity: 0.9;
    opacity: 0;
    animation: slideInUp 0.75s ease forwards 0.5s; /* Faster animation */
}

/* Full Screen Menu */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%; /* Changed from 100vh */
    overflow-y: auto; /* Allow scrolling */
    background: #ffffff;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Faster transition */
    padding-top: env(safe-area-inset-top); /* Add safe area padding */
    padding-bottom: env(safe-area-inset-bottom); /* Add safe area padding */
    padding-left: env(safe-area-inset-left); /* Add safe area padding */
    padding-right: env(safe-area-inset-right); /* Add safe area padding */
}

.fullscreen-menu.active {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: calc(40px + env(safe-area-inset-top)); /* Adjusted for safe area */
    right: calc(40px + env(safe-area-inset-right)); /* Adjusted for safe area */
    background: none;
    border: none;
    color: #000000;
    font-size: 2.5rem;
    font-weight: 100;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease; /* Faster transition */
}
.close-btn:hover {
    color: #ff0000;
    transform: rotate(90deg);
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

.menu-item {
    font-family: Arial, sans-serif; /* Changed to Arial */
    font-size: clamp(2rem, 8vw, 4rem); /* Responsive font size */
    font-weight: 100;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #808080;
    text-decoration: none;
    transition: all 0.2s ease; /* Faster transition */
    opacity: 0;
    transform: translateY(50px);
}

.fullscreen-menu.active .menu-item {
    animation: menuItemSlide 0.4s ease forwards; /* Faster animation */
}

.fullscreen-menu.active .menu-item:nth-child(1) { /* Lumen */
    animation-delay: 0.1s; /* Faster delay */
}

.fullscreen-menu.active .menu-item:nth-child(2) { /* Team */
    animation-delay: 0.2s; /* Faster delay */
}

.fullscreen-menu.active .menu-item:nth-child(3) { /* Manifesto */
    animation-delay: 0.3s; /* Faster delay */
}

.menu-item:hover {
    color: #000000;
    transform: translateX(20px) scale(1.05);
}

/* Content Pages */
.content-page {
    position: fixed; /* Keep fixed to slide in/out */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%; /* Changed from 100vh */
    background: #000000; /* Default content page background */
    color: #ffffff; /* Default content page text color */
    z-index: 1500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Faster transition */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling for content pages */
}

.content-page.active {
    transform: translateX(0);
}

/* Specific page colors */
#manifestoPage {
    background: #ffffff !important; /* Manifesto white */
    color: #000000 !important;
    overflow-y: auto; /* Allow scrolling for manifesto page */
    display: flex;
    flex-direction: column;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Reduced top and bottom padding to make the header smaller */
    padding: calc(20px + env(safe-area-inset-top)) calc(40px + env(safe-area-inset-right)) 20px calc(40px + env(safe-area-inset-left));
    border-bottom: 1px solid transparent; /* Hidden by default */
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevent header from shrinking when content grows */
}

/* Logo and Menu Button color inversion based on page background */
.content-page.active .logo-text,
.content-page.active .logo-subtext {
    color: #000 !important; /* Black on white pages */
}
.content-page.active .logo-area img {
    filter: invert(1); /* Invert for white background */
}

.content-page.active.dark-background .logo-text,
.content-page.active.dark-background .logo-subtext {
    color: #fff !important; /* White on dark pages */
}
.content-page.active.dark-background .menu-btn svg path { /* Updated for SVG icon */
    stroke: #fff !important; /* White on dark pages */
}

.content-title {
    display: none !important; /* Remove page titles */
}

.content-body {
    padding: 80px 40px;
    max-width: 800px; /* Kept max-width for content */
    margin: 0 auto; /* Keeps content centered */
    overflow-x: hidden; /* Ensure content body itself does not scroll horizontally */
    overflow-y: auto; /* Allow vertical scrolling within content body if needed */
    flex-grow: 1; /* Allow content body to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to start for scrolling */
    align-items: flex-start; /* Left-align content horizontally */
    text-align: left; /* Text alignment within manifesto */
    /* Adjusted padding to use safe area in calc */
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    padding-left: calc(40px + env(safe-area-inset-left));
    padding-right: calc(40px + env(safe-area-inset-right));
}

#manifestoPage .content-body {
    overflow-y: auto; /* Allow scrolling for manifesto page content */
    height: auto; /* Allow content to determine its height */
    max-width: 100%; /* Allow content body to expand to full width of parent */
    /* Adjusted padding to use safe area in calc */
    padding: calc(5vh + env(safe-area-inset-top)) calc(5vw + env(safe-area-inset-right)) calc(5vh + env(safe-area-inset-bottom)) calc(5vw + env(safe-area-inset-left));
    justify-content: flex-start; /* Align content to start, not center, to allow scrolling */
}

.content-body h2 {
    font-family: Arial, sans-serif; /* Changed to Arial */
    font-size: clamp(1.8rem, 4vw, 2.5rem); /* Responsive font size */
    font-weight: 100;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

#manifestoPage .content-body p { /* Specific styling for manifesto paragraphs */
    font-family: Arial, sans-serif;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem); /* Responsive font size */
    font-weight: 300;
    line-height: 1.6; /* Slightly reduced line spacing */
    letter-spacing: 0.5px;
    margin-bottom: 25px; /* Adjusted margin bottom */
}

.manifesto-signature-container {
    width: 100%; /* Ensure container takes full width for alignment */
    text-align: left; /* Align contents to the left */
    margin-top: 15px; /* Half the previous distance (30px / 2) */
}
.manifesto-signature-container img {
    display: block; /* Ensure image is block-level for margin/alignment */
    margin-bottom: 10px; /* Space between signature image and text */
    max-width: 150px; /* Adjusted max-width for smaller screens */
    height: auto;
    pointer-events: none; /* No interaction */
    user-select: none; /* No selection */
}
.manifesto-signature-info {
    font-family: Arial, sans-serif;
    text-align: left; /* Align text within its container to the left */
}
.manifesto-signature-info .name {
    display: block; /* Each part on its own line */
    font-size: clamp(1rem, 2.5vw, 1.4rem); /* Responsive font size */
    line-height: 1.5;
    margin-bottom: 5px; /* Space between name and title */
}
.manifesto-signature-info .title {
    display: block; /* Each part on its own line */
    font-size: clamp(0.8rem, 1.8vw, 1rem); /* Responsive font size */
    font-weight: 300; /* Lighter weight for title */
    color: #666666; /* Slightly gray for title */
    line-height: 1.5;
}

/* Team Page Specific Styling: minimalist with solid black background, text on hover */
.team-page {
    background: #000000 !important; /* Solid black background */
    color: #ffffff !important;
    padding-bottom: env(safe-area-inset-bottom); /* Add safe area padding */
    overflow-y: auto; /* Allow scrolling for team page */
    position: fixed; /* Keep fixed to slide in/out */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%; /* Changed from 100vh */
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.team-page.active {
    transform: translateX(0);
}

.team-page .content-body {
    max-width: none; /* Remove max-width restriction for full width */
    width: 100%;
    padding: 40px 80px;
    box-sizing: border-box;
    justify-content: center;
    align-items: flex-start; /* Align items to start for scrollable content */
    height: auto; /* Allow height to adjust with content */
    overflow-y: auto; /* Allow vertical scrolling within content body if needed */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    flex-grow: 1; /* Allow content body to take remaining space */
}

.team-page .content-body h2,
.team-page .content-body p {
    display: none; /* Hide all text from the team page */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Explicitly 3 columns as in ocula.html */
    gap: 60px; /* Reverted to 60px gap as in ocula.html */
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    margin: auto;
    /* Added padding-top to push content below the fixed header */
    padding-top: calc(140px + env(safe-area-inset-top)); /* Adjusted to clear the header */
}

.team-member {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

.team-member-photo {
    width: 180px;
    height: 250px;
    object-fit: contain; /* Ensure full photo is visible */
    border-radius: 8px;
    filter: grayscale(80%); /* Default grayscale */
    transition: filter 0.15s ease;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.team-member:hover .team-member-photo {
    filter: grayscale(0%); /* Full color on hover */
}

/* Team member info hidden by default, revealed on hover */
.team-member-info {
    position: absolute; /* Position over the image */
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); /* Gradient background on hover */
    color: #ffffff;
    padding: 20px; /* Adjusted padding */
    text-align: center;
    opacity: 0 !important; /* Hidden by default - Added !important */
    transition: opacity 0.2s ease; /* Smooth transition for hover */
    z-index: 2;
}

.team-member:hover .team-member-info {
    opacity: 1 !important; /* Visible on hover - Added !important */
}

.team-member-name {
    font-family: Arial, sans-serif;
    font-size: 1.8rem; /* Larger name font for hover */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.team-member-title {
    display: block; /* Make title visible within the hover state */
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #cccccc;
}


/* Person Detail Overlay - Semi-transparent gray, full screen, white text */
.person-detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%; /* Changed from 100vh */
    background: rgba(40, 40, 40, 0.95) !important; /* Even darker gray transparent */
    z-index: 3000;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Allow vertical scrolling for person detail */
    padding: calc(5vh + env(safe-area-inset-top)) calc(5vw + env(safe-area-inset-right)) calc(5vh + env(safe-area-inset-bottom)) calc(5vw + env(safe-area-inset-left)); /* Responsive padding with safe area */
}

.person-detail.active {
    opacity: 1;
    visibility: visible;
}

.person-detail-content {
    background: transparent;
    color: #ffffff;
    padding: 0;
    max-width: 90%; /* Increased max-width for mobile */
    max-height: 90%;
    overflow-y: auto; /* Allow vertical scrolling for content within the detail pop-up */
    text-align: left;
    border-radius: 10px;
    box-shadow: none;
    position: relative;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    pointer-events: auto;
    margin-top: 10vh; /* Responsive margin-top */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content if it fits */
}

.person-detail-content h2,
.person-detail-content h3,
.person-detail-content p {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}


.person-detail-content h3 {
    font-family: Arial, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* Responsive font size */
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #ffffff;
}
.person-detail-content h2 {
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* Responsive font size */
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 30px;
    color: #cccccc;
}


.person-detail-content p {
    font-family: Arial, sans-serif;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem); /* Responsive font size */
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* LinkedIn Text Link Styling */
.linkedin-link {
    display: inline-block; /* Allows margin/padding and keeps text on one line */
    margin-top: 20px;
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 2vw, 1.2rem); /* Responsive font size */
    color: #ffffff; /* White text by default */
    text-decoration: underline; /* Underlined text */
    transition: none; /* Removed transition for hover color */
    cursor: pointer;
    pointer-events: auto; /* Ensure the link is clickable */
}
.linkedin-link:hover {
    color: #ffffff; /* Keep white on hover */
    text-decoration: underline; /* Keep underlined on hover */
}


/* Lumen Page */
.lumen-page {
    background: #000000;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* Changed from hidden */
    height: 100%; /* Changed from 100vh */
}

.lumen-content {
    text-align: center;
    padding: 20px; /* Add some padding for smaller screens */
}

.lumen-logo {
    width: clamp(200px, 60vw, 400px); /* Responsive width */
    height: auto;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: fadeInScale 1s ease forwards 0.3s; /* Reverted to original speed */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)); /* Subtle glow */
    animation: fadeInScale 1s ease forwards 0.3s, pulseGlow 2s infinite alternate ease-in-out 1.5s; /* Reverted to original speed */
}
@keyframes pulseGlow {
    0% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)); }
    100% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)); }
}

.lumen-title {
    font-family: 'Lao MN', serif;
    font-size: clamp(2.5rem, 8vw, 4rem); /* Responsive font size */
    font-weight: 100;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 1.2s ease forwards 0.6s; /* Reverted to original speed */
}

.lumen-page .lumen-content p {
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.4rem); /* Responsive font size */
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInText 1.5s ease forwards 1s; /* Reverted to original speed */
}
@keyframes fadeInText {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animations */
@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menuItemSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Particles (Stars Animation) */
.floating-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100; /* Default z-index for landing page particles */
}

/* Specific z-index for manifesto page particles to be above content */
#manifestoPage .floating-particle,
#lumenPage .floating-particle {
    z-index: 1600; /* Ensure particles are above page content */
}

/* Responsive */
@media (max-width: 768px) {
    .logo-area {
        top: calc(20px + env(safe-area-inset-top)); /* Adjusted for safe area */
        left: calc(20px + env(safe-area-inset-left)); /* Adjusted for safe area */
    }
    .menu-btn {
        top: calc(20px + env(safe-area-inset-top)); /* Adjusted for safe area */
        right: calc(20px + env(safe-area-inset-right)); /* Adjusted for safe area */
    }
    .slogan {
        bottom: calc(40px + env(safe-area-inset-bottom)); /* Adjusted for safe area */
        left: calc(20px + env(safe-area-inset-left)); /* Adjusted for safe area */
    }
    .slogan h1 {
        font-size: 2.5rem; /* Fallback for older browsers, clamp will take precedence */
    }
    .slogan p {
        font-size: 1.1rem; /* Fallback */
    }
    .team-grid {
        grid-template-columns: 1fr; /* Single column for mobile */
        gap: 20px;
        padding: 0 20px; /* Add horizontal padding to the grid */
    }
    .team-member {
        padding: 0;
    }
    .team-member-photo {
        width: 100%;
        height: 250px; /* Keep a fixed height for consistency in grid, but consider aspect-ratio for more fluid */
        max-width: 180px; /* Limit individual photo width within the 100% */
        margin: 0 auto; /* Center the photo */
        filter: grayscale(80%); /* Default grayscale on mobile too */
        border-radius: 8px; /* Ensure rectangular on mobile as well */
        object-fit: contain; /* Ensure full photo is visible on mobile */
    }
    /* Ensure team member info is hidden by default and appears on hover/tap for mobile */
    .team-member-info {
        opacity: 0 !important; /* Hidden by default on mobile too - Added !important */
        position: absolute; /* Keep absolute positioning on mobile */
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); /* Keep gradient */
        padding: 20px; /* Keep original padding */
    }
    .team-member:hover .team-member-info {
        opacity: 1 !important; /* Visible on hover/tap - Added !important */
    }
    .team-member-name {
        font-size: 1.4rem; /* Adjust font size for mobile */
    }
    .person-detail-content {
        width: 90%;
        padding: 20px;
        margin-top: calc(80px + env(safe-area-inset-top)); /* Adjusted for safe area */
    }
    .person-detail-content h3 {
        font-size: 1.8rem;
    }
    .person-detail-content h2 {
        font-size: 1.2rem;
    }
    .lumen-logo {
        width: 250px; /* Fallback */
    }
    .lumen-title {
        font-size: 2.5rem; /* Fallback */
    }

    /* Adjust padding for content-body on smaller screens */
    .content-body {
        padding: calc(5vh + env(safe-area-inset-top)) calc(5vw + env(safe-area-inset-right)) calc(5vh + env(safe-area-inset-bottom)) calc(5vw + env(safe-area-inset-left)); /* Responsive padding with safe area */
    }

    /* Adjust menu item font size for smaller screens */
    .menu-item {
        font-size: 2.5rem; /* Fallback */
    }

    /* Adjust logo area for smaller screens */
    .logo-area {
        top: calc(15px + env(safe-area-inset-top));
        left: calc(15px + env(safe-area-inset-left));
    }
    .logo-area img {
        height: 36px;
        width: 36px;
        margin-right: 10px;
    }
    .logo-text {
        font-size: 1.5rem;
    }
    .logo-subtext {
        font-size: 0.8rem;
        margin-left: 5px;
    }

    /* Adjust menu button for smaller screens */
    .menu-btn {
        top: calc(15px + env(safe-area-inset-top));
        right: calc(15px + env(safe-area-inset-right));
        width: 32px;
        height: 32px;
    }
    .menu-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Adjust slogan for smaller screens */
    .slogan {
        bottom: calc(20px + env(safe-area-inset-bottom));
        left: calc(15px + env(safe-area-inset-left));
        max-width: calc(100% - 30px); /* Ensure it doesn't overflow */
    }

    /* Adjust manifesto signature for smaller screens */
    .manifesto-signature-container img {
        max-width: 100px; /* Smaller signature image */
    }
    .manifesto-signature-info .name {
        font-size: 1.2rem;
    }
    .manifesto-signature-info .title {
        font-size: 0.8rem;
    }
}

/* Even smaller screens (e.g., iPhone SE) */
@media (max-width: 480px) {
    .logo-area {
        top: calc(10px + env(safe-area-inset-top));
        left: calc(10px + env(safe-area-inset-left));
    }
    .logo-area img {
        height: 30px;
        width: 30px;
        margin-right: 8px;
    }
    .logo-text {
        font-size: 1.2rem;
    }
    .logo-subtext {
        font-size: 0.7rem;
        margin-left: 4px;
    }

    .menu-btn {
        top: calc(10px + env(safe-area-inset-top));
        right: calc(10px + env(safe-area-inset-right));
        width: 28px;
        height: 28px;
    }
    .menu-btn svg {
        width: 20px;
        height: 20px;
    }

    .slogan {
        bottom: calc(15px + env(safe-area-inset-bottom));
        left: calc(10px + env(safe-area-inset-left));
    }
    .slogan h1 {
        font-size: 2rem;
    }
    .slogan p {
        font-size: 0.9rem;
    }

    .close-btn {
        top: calc(20px + env(safe-area-inset-top));
        right: calc(20px + env(safe-area-inset-right));
        font-size: 2rem;
    }

    .menu-items {
        gap: 20px;
    }

    .menu-item {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .content-header {
        padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));
    }

    .content-body {
        padding: calc(3vh + env(safe-area-inset-top)) calc(3vw + env(safe-area-inset-right)) calc(3vh + env(safe-area-inset-bottom)) calc(3vw + env(safe-area-inset-left));
    }

    .content-body h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    #manifestoPage .content-body p {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    .manifesto-signature-container img {
        max-width: 80px;
    }
    .manifesto-signature-info .name {
        font-size: 1rem;
    }
    .manifesto-signature-info .title {
        font-size: 0.7rem;
    }
}