@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

/* ================================================================
   GATEWAY.CSS — Main Landing / Domain Selector
   Hafiz Muhammad Haseeb // Dual-Domain Portfolio
   ================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    background: #07090D;
    color: #F5F7FA;
    -webkit-font-smoothing: antialiased;
}

/* Canvas behind everything */
#gw-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── Root Wrapper ── */
.gateway-root {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Top Header ── */
.gw-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 32px 18px;
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.gw-monogram {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(245, 247, 250, 0.2);
}

.gw-name {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.7rem);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 247, 250, 0.92);
    text-align: center;
}

.gw-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 247, 250, 0.28);
    margin-top: 2px;
}

.gw-header-line {
    width: 36px;
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin-top: 10px;
}

/* ── Panels Container ── */
.gw-panels {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

/* ── Individual Panel ── */
.gw-panel {
    position: relative;
    flex: 1;
    overflow: hidden;
    text-decoration: none;
    color: #F5F7FA;
    transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.gw-panel:hover { flex: 1.65; }

/* Background photo */
.panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.32;
    transform: scale(1.06);
    transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.gw-panel:hover .panel-bg {
    opacity: 0.52;
    transform: scale(1.0);
}

/* Color veil */
.panel-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.45s ease;
}

.veil-green {
    background:
        linear-gradient(160deg, rgba(0,70,50,0.72) 0%, rgba(0,40,30,0.5) 45%, rgba(7,9,13,0.88) 100%);
}

.veil-blue {
    background:
        linear-gradient(200deg, rgba(0,25,90,0.72) 0%, rgba(0,35,100,0.5) 45%, rgba(7,9,13,0.88) 100%);
}

.gw-panel:hover .veil-green {
    background:
        linear-gradient(160deg, rgba(0,100,70,0.62) 0%, rgba(0,60,45,0.38) 45%, rgba(7,9,13,0.82) 100%);
}

.gw-panel:hover .veil-blue {
    background:
        linear-gradient(200deg, rgba(0,40,130,0.62) 0%, rgba(0,55,140,0.38) 45%, rgba(7,9,13,0.82) 100%);
}

/* Scanlines */
.panel-scanlines {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0, transparent 3px,
        rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
    );
    pointer-events: none;
}

/* Edge glow stripe */
.panel-edge {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    z-index: 7;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.3;
}

.edge-right { right: 0; background: rgba(46, 232, 181, 0.5); }
.edge-left  { left: 0;  background: rgba(95, 251, 241, 0.5); }

.panel-a:hover .edge-right { opacity: 1; box-shadow: 0 0 18px rgba(46,232,181,0.6); }
.panel-b:hover .edge-left  { opacity: 1; box-shadow: 0 0 18px rgba(95,251,241,0.6); }

/* ── Panel Body (content) ── */
.panel-body {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px 52px;
    gap: 12px;
}

/* System tag line */
.panel-sys-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,247,250,0.45);
    margin-bottom: 4px;
}

.sys-pip {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pip-pulse 2.5s ease-in-out infinite;
}

.pip-green { background: #2EE8B5; box-shadow: 0 0 8px #2EE8B5; }
.pip-cyan  { background: #5FFBF1; box-shadow: 0 0 8px #5FFBF1; }

@keyframes pip-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Icon */
.panel-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    border: 1px solid;
    margin-bottom: 4px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    flex-shrink: 0;
}

.icon-green {
    color: #2EE8B5;
    background: rgba(46,232,181,0.08);
    border-color: rgba(46,232,181,0.2);
}

.icon-cyan {
    color: #5FFBF1;
    background: rgba(95,251,241,0.08);
    border-color: rgba(95,251,241,0.2);
}

.gw-panel:hover .panel-icon-wrap {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Degree heading */
.panel-heading {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
    color: #F5F7FA;
    transition: color 0.3s ease;
}

.gw-panel:hover .panel-heading { color: #fff; }

/* University */
.panel-uni {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245,247,250,0.35);
    margin-top: -4px;
}

/* Description — fades in on hover */
.panel-blurb {
    font-family: 'Inter', sans-serif;
    font-size: 0.87rem;
    color: rgba(245,247,250,0.58);
    line-height: 1.72;
    max-width: 320px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.38s ease 0.04s, transform 0.38s ease 0.04s;
}

.gw-panel:hover .panel-blurb { opacity: 1; transform: translateY(0); }

/* Chips */
.panel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.38s ease 0.1s, transform 0.38s ease 0.1s;
}

.gw-panel:hover .panel-chips { opacity: 1; transform: translateY(0); }

.chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 3px;
    background: rgba(255,255,255,0.03);
    border: 1px solid;
    color: rgba(245,247,250,0.58);
    transition: background 0.2s;
}

.chip-green { border-color: rgba(46,232,181,0.22); }
.chip-cyan  { border-color: rgba(95,251,241,0.22); }

/* CTA button — fades in on hover */
.panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    width: fit-content;
    margin-top: 6px;
    color: #07090D;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.38s ease 0.15s,
        transform 0.38s ease 0.15s,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.cta-green { background: #2EE8B5; }
.cta-cyan  { background: #5FFBF1; }

.gw-panel:hover .panel-cta { opacity: 1; transform: translateY(0); }

.cta-green:hover { background: #fff; box-shadow: 0 6px 28px rgba(46,232,181,0.35); }
.cta-cyan:hover  { background: #fff; box-shadow: 0 6px 28px rgba(95,251,241,0.35); }

/* ── Center Divider ── */
.gw-divide {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    width: 1px;
}

.divide-line {
    flex: 1;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.07), transparent);
}

.divide-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #07090D;
    border: 1px solid rgba(255,255,255,0.09);
    display: flex; align-items: center; justify-content: center;
    margin: 4px 0;
}

.divide-badge span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: rgba(245,247,250,0.3);
}

/* ── Footer Strip ── */
.gw-footer {
    text-align: center;
    padding: 12px 32px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.gw-footer-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: rgba(245,247,250,0.2);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    html, body { overflow: auto; }
    .gateway-root { height: auto; min-height: 100vh; overflow: auto; }
    .gw-panels { flex-direction: column; flex: none; min-height: auto; }
    .gw-panel { min-height: 52vh; flex: none !important; display: block; }
    .gw-panel:hover { flex: none !important; }
    .panel-body { padding: 32px 28px; }
    .panel-blurb, .panel-chips, .panel-cta { opacity: 1 !important; transform: none !important; }
    .gw-divide {
        position: static;
        flex-direction: row;
        width: 100%;
        height: 44px;
        transform: none;
    }
    .divide-line { height: 1px; width: auto; flex: 1; }
    .gw-header { padding: 20px 24px 12px; }
}

@media (max-width: 480px) {
    .panel-heading { font-size: 1.9rem; }
    .panel-body { padding: 24px 20px; gap: 10px; }
    .gw-name { font-size: 1.1rem; }
}