/* ============================================
   TEAM PHOTO GRAYSCALE TOGGLE
   Change the value below to control photo colors:
   - 100% = Black & White (current)
   - 0% = Full Color
   ============================================ */
:root {
    --team-photo-grayscale: 100%; /* Change to 0% for color photos */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #EFEBEF; /* Second Neutral Color */
}
.font-mono {
    font-family: 'Space Mono', monospace;
}
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}
.marquee-track {
    display: flex;
    width: fit-content;
    animation: marquee 25s linear infinite;
}
.marquee-content {
    flex-shrink: 0;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Hide scrollbar for clean UI */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
.grid-lines {
    display: grid;
    gap: 1px;
    background-color: #E0D8DF; /* Primary Neutral Color (Borders) */
    border: 1px solid #E0D8DF;
}
.grid-item {
    background-color: #EFEBEF; /* Match body bg */
}
.hover-invert:hover {
    background-color: #4C004A; /* Primary Brand Color */
    color: #EFEBEF;
}
.hover-invert:hover .iconify {
    color: #F82C7D; /* Secondary Brand Color (Pink) on hover */
}
.hover-invert:hover p {
    opacity: 0.9;
    color: #E0D8DF;
}
/* Modal Transitions */
#bio-modal,
#coming-soon-modal,
#calendly-modal,
#privacy-modal,
#terms-modal {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#bio-modal.hidden-modal,
#coming-soon-modal.hidden-modal,
#calendly-modal.hidden-modal,
#privacy-modal.hidden-modal,
#terms-modal.hidden-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}
#bio-modal.visible-modal,
#coming-soon-modal.visible-modal,
#calendly-modal.visible-modal,
#privacy-modal.visible-modal,
#terms-modal.visible-modal {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#bio-content,
#coming-soon-content,
#calendly-modal > div {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.visible-modal #bio-content,
.visible-modal #coming-soon-content,
#calendly-modal.visible-modal > div {
    transform: translateY(0);
}
.hidden-modal #bio-content,
.hidden-modal #coming-soon-content,
#calendly-modal.hidden-modal > div {
    transform: translateY(20px);
}

/* Team Photo Grayscale Control */
.team-photo {
    filter: grayscale(var(--team-photo-grayscale));
}
.team-photo:hover {
    filter: grayscale(var(--team-photo-grayscale));
}