/* sarampass.com - Street-Style Identity Pass */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --pass-white: #F8F8FA;
    --module-silver: #EAECF0;
    --wristband-purple: #6C3FC5;
    --lanyard-orange: #FF6B35;
    --verified-green: #00C853;
    --stamp-black: #1A1A1A;
    --faded-print: #7A7A82;
}
body {
    background: var(--pass-white);
    color: var(--stamp-black);
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    overflow-x: hidden;
}

/* Hero */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem 3rem;
}
.pass-card {
    position: relative;
    width: 350px;
    min-height: 220px;
    background: var(--pass-white);
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    border: 3px solid transparent;
    background-clip: padding-box;
    opacity: 0;
    transform: translateY(-30px);
    animation: passSlide 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}
.pass-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: conic-gradient(from 0deg, #C0C0C0, #FFD700, #C0C0C0, #FFD700, #C0C0C0);
    z-index: -1;
    animation: holoShimmer 3s linear infinite;
}
@keyframes holoShimmer {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes passSlide {
    to { opacity: 1; transform: translateY(0); }
}
.lanyard-hole {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pass-white);
    border: 2px solid var(--module-silver);
    z-index: 2;
}
.pass-content { text-align: center; }
.pass-title {
    font-family: 'Russo One', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 400;
    color: var(--wristband-purple);
}
.pass-id {
    font-family: 'Overpass Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--faded-print);
    margin-top: 0.25rem;
}
.pass-subtitle {
    font-size: 0.95rem;
    color: var(--stamp-black);
    margin-top: 0.75rem;
}
.pass-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1rem;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--verified-green);
}
.status-text {
    font-family: 'Overpass Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--verified-green);
}

/* Lanyard Stripe */
.lanyard-stripe {
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--wristband-purple) 0px,
        var(--wristband-purple) 8px,
        var(--lanyard-orange) 8px,
        var(--lanyard-orange) 16px,
        var(--wristband-purple) 16px,
        var(--wristband-purple) 24px
    );
    margin: 0;
}

/* Bento Grid */
#modules {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.bento-cell {
    background: var(--module-silver);
    border-radius: 12px;
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bento-cell.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.bento-cell:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.cell-2x1 { grid-column: span 2; }
.cell-1x2 { grid-row: span 2; }
.module-icon {
    display: block;
    color: var(--wristband-purple);
    margin-bottom: 0.75rem;
}
.module-label {
    font-family: 'Overpass Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--faded-print);
    display: block;
    margin-bottom: 0.5rem;
}
.module-title {
    font-family: 'Russo One', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--stamp-black);
    margin-bottom: 0.5rem;
}
.module-body {
    font-size: 0.9rem;
    color: var(--faded-print);
    line-height: 1.6;
}

/* Footer */
#footer {
    text-align: center;
    padding: 3rem 2rem;
}
.footer-text {
    font-family: 'Overpass Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--faded-print);
}

/* Responsive */
@media (max-width: 900px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .cell-2x1 { grid-column: span 2; }
}
@media (max-width: 500px) {
    .bento-grid { grid-template-columns: 1fr; }
    .cell-2x1 { grid-column: span 1; }
    .pass-card { width: 100%; max-width: 350px; }
}