/* ── FONTS ─────────────────────────────────────────────────── */
@font-face {
    font-family: 'SourceCode';
    src: url('typeface/SourceCodePro-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}



/* ── NAV PILL brush-stroke shape ───────────────────────────── */
.nav-pill {
    position: relative;
    isolation: isolate;
    display: none;
    align-items: center;
    padding: 12px 28px 12px 18px;
    white-space: nowrap;
    filter: drop-shadow(1px 2px 6px rgba(0,0,0,.35));
}
.nav-pill::before {
    content: '';
    position: absolute; inset: 0;
    background: #fff;
    clip-path: polygon(0% 8%, 96% 0%, 100% 35%, 97% 68%, 99% 100%, 95% 92%, 0% 100%);
    transition: background .2s ease;
    z-index: -1;
}
.nav-pill:hover::before { background: #e0e0e0; }
.nav-pill:nth-child(1) { width: 180px; }
.nav-pill:nth-child(2) { width: 166px; margin-right: 10px; }
.nav-pill:nth-child(3) { width: 156px; margin-right:  4px; }
@media (min-width: 768px) { .nav-pill { display: flex; } }

/* ── DRAWER slide animation ─────────────────────────────────── */
.nav-drawer {
    transform: translateY(-100%);
    transition: transform .45s cubic-bezier(.77,0,.18,1);
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer a:hover,
.nav-drawer a.active { color: #fff; }

/* ── HERO background texture + video ───────────────────────── */
.hero-bg::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../Images/bgs/BGDark.png') center / cover no-repeat;
}
#heroVideo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
@keyframes bounce-hero {
    0%, 100% { transform: translateX(-50%) translateY(0);    }
    50%       { transform: translateX(-50%) translateY(10px); }
}
.hero-arrow {
    position: absolute;
    bottom: 36px; left: 50%;
    z-index: 2;
    animation: bounce-hero 2s ease-in-out infinite;
}

/* ── TEXT-STROKE headings ───────────────────────────────────── */
.stroke-white {
    -webkit-text-stroke: 16px white;
    paint-order: stroke fill;
    color: black;
}
.stroke-white-thick {
    -webkit-text-stroke: 20px white;
    paint-order: stroke fill;
    color: black;
}
.stroke-black {
    -webkit-text-stroke: 20px black;
    paint-order: stroke fill;
    color: white;
}

/* ── FILTER BAR right-edge fade (mobile only) ───────────────── */
.filter-wrapper { position: relative; }
.filter-wrapper::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, #0d0d0d);
    pointer-events: none;
}
@media (min-width: 768px) { .filter-wrapper::after { display: none; } }
.filter-tab.active { color: #fff; border-bottom-color: #fff; }

/* ── PROJECT LIST (each .project-item links to the student's project) ── */
.project-item { display: block; border: 4px solid; overflow: hidden; text-decoration: none; }
.project-item[data-major="p"] { border-color: #e91e8c; }
.project-item[data-major="b"] { border-color: #1BC7EF; }
.project-item[data-major="o"] { border-color: #f7941d; }
.project-item[data-major="g"] { border-color: #b0d400; }

.project-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 4px 20px 16px; gap: 16px;
    cursor: pointer; user-select: none;
}
.project-meta  { display: flex; flex-direction: column; gap: 4px; }
.project-title { font-family: 'SourceCode', monospace; font-size: .88rem; color: #fff; line-height: 1.3; }
.project-author{ font-family: 'SourceCode', monospace; font-size: .65rem; text-transform: uppercase; color: #fff; }

.project-btn { width: 60px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.project-btn svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.project-item:hover .project-btn svg,
.project-item:focus-visible .project-btn svg { transform: translateX(4px); }

@media (min-width: 768px) { .project-title { font-size: 2rem; } }

/* ── TAG CARDS (built by ui.js) ─────────────────────────────── */
.tag-card { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.tag-wrap  { position: relative; width: 100%; }
.tag-img   { width: 100%; display: block; }

/* tagphotos pair: plain tag shows by default, profile-filtered tag crossfades in on hover */
.tag-photo-base  { width: 100%; display: block; }
.tag-photo-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.tag-card:hover .tag-photo-hover { opacity: 1; }

.tag-silhouette { position: absolute; top: 25%; left: 10%; width: 80%; height: 68%; object-fit: contain; object-position: center bottom; pointer-events: none; opacity: 1; transition: opacity .3s ease; }
.tag-card:hover .tag-silhouette { opacity: 0; }

.tag-real-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.tag-card:hover .tag-real-photo { opacity: 1; }
.tag-real-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(100%) contrast(1.1); mix-blend-mode: luminosity; display: block; }
.tag-real-photo::after { content: ''; position: absolute; inset: 0; background: var(--student-color, #e91e8c); mix-blend-mode: multiply; opacity: .4; pointer-events: none; }

@media (max-width: 640px) {
    .tag-photo-hover { opacity: 1 !important; }
    .tag-silhouette { display: none; }
    .tag-real-photo { opacity: 1 !important; }
}

.tag-card-name { font-family: "walnut", sans-serif; font-weight: 400; font-style: normal; font-size: 1.1rem; text-transform: uppercase; color: rgba(255,255,255,.7); text-align: center; line-height: 1.5; }
@media (min-width: 768px) { .tag-card-name { font-size: 1rem; } }

/* ── SLIDE-UP scroll reveal ─────────────────────────────────── */
.slide-up { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.slide-up.visible { opacity: 1; transform: translateY(0); }
.slide-up.d1 { transition-delay: .1s; }
.slide-up.d2 { transition-delay: .2s; }
.slide-up.d3 { transition-delay: .3s; }

/* ── STUDENT PAGE ───────────────────────────────────────────── */
.sp-photo-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: "walnut", sans-serif; font-weight: 400; font-style: normal; font-size: 5rem;
    color: rgba(255,255,255,.3); background: rgba(0,0,0,.15);
}
.sp-major-pill {
    display: inline-block;
    font-family: 'SourceCode', monospace; font-size: .72rem; font-weight: 700;
    text-transform: uppercase;
    color: #fff; padding: 7px 20px; border-radius: 999px;
}
.sp-project-title {
    display: inline-block;
    font-family: 'SourceCode', monospace; font-size: .82rem;
    text-transform: uppercase;
    color: #fff; padding: 16px 24px; line-height: 1;
}
@media (min-width: 700px) { .sp-project-title { font-size: 1rem; padding: 18px 32px; } }


/* Prev / next student arrows */
.sp-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #1a1a1a; border: 0; cursor: pointer;
    box-shadow: 3px 4px 14px rgba(0,0,0,.35);
    transition: background .2s, color .2s, transform .2s;
}
.sp-nav-arrow[hidden] { display: none; }
.sp-nav-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-nav-arrow:hover,
.sp-nav-arrow:focus-visible { background: var(--sp-accent, #e91e8c); color: #fff; transform: translateY(-50%) scale(1.08); }
@media (min-width: 768px) {
    .sp-nav-arrow { width: 52px; height: 52px; top: calc(50% + 2.5rem); } /* offset for the fixed nav */
    .sp-nav-arrow svg { width: 26px; height: 26px; }
}