:root {
    --biba-ink: #111318;
    --biba-paper: #fffdf7;
    --biba-blue: #315cff;
    --biba-red: #ff5547;
    --biba-yellow: #ffd72e;
}

body.bib-access-gate {
    min-height: 100vh;
    margin: 0;
    background: var(--biba-ink);
    color: white;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.bib-access-gate * { box-sizing: border-box; }
.bib-access-gate__shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 42px 24px;
    background: linear-gradient(124deg, var(--biba-ink) 0 62%, #202637 62% 100%);
}
.bib-access-gate__grid {
    position: absolute;
    inset: 0;
    opacity: .7;
    background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 68px 68px;
}
.bib-access-gate__orb {
    position: absolute;
    top: -80px;
    right: 8vw;
    width: min(34vw, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--biba-red);
    box-shadow: 0 0 0 10px rgba(255,85,71,.08);
}
.bib-access-gate__panel {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    padding: clamp(34px, 6vw, 78px);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(17,19,24,.84);
    box-shadow: 18px 18px 0 var(--biba-blue);
    backdrop-filter: blur(14px);
}
.bib-access-gate__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 52px; }
.bib-access-gate__brand span { display: inline-grid; place-items: center; min-width: 76px; height: 46px; padding: 0 12px; border-radius: 8px 15px 8px 15px; background: var(--biba-yellow); color: var(--biba-ink); font-size: 22px; font-weight: 900; letter-spacing: -.05em; transform: rotate(-2deg); }
.bib-access-gate__brand small { color: rgba(255,255,255,.58); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.bib-access-gate__kicker { display: inline-flex; min-height: 30px; align-items: center; padding: 0 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.bib-access-gate h1 { max-width: 760px; margin: 22px 0 22px; font-size: clamp(58px, 10vw, 126px); font-weight: 800; line-height: .86; letter-spacing: -.052em; }
.bib-access-gate__panel > p { max-width: 620px; margin: 0 0 35px; color: rgba(255,255,255,.72); font-size: clamp(17px, 2vw, 22px); line-height: 1.55; }
.bib-access-gate__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; max-width: 760px; }
.bib-access-gate__form label { display: flex; flex-direction: column; gap: 8px; }
.bib-access-gate__form label span { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bib-access-gate__form input { width: 100%; min-height: 58px; padding: 0 20px; border: 2px solid white; border-radius: 999px; background: white; color: var(--biba-ink); font: inherit; font-size: 16px; outline: none; }
.bib-access-gate__form input:focus { box-shadow: 0 0 0 5px rgba(49,92,255,.48); }
.bib-access-gate__form button { align-self: end; min-height: 58px; padding: 0 24px; border: 2px solid var(--biba-yellow); border-radius: 999px; background: var(--biba-yellow); color: var(--biba-ink); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.bib-access-gate__form button:hover { transform: translate(-2px,-2px); box-shadow: 5px 6px 0 var(--biba-red); }
.bib-access-gate__error { grid-column: 1 / -1; margin: 0; color: #ff9b92; font-size: 14px; }
.bib-access-gate__route { display: flex; align-items: center; gap: 12px; max-width: 480px; margin-top: 48px; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.bib-access-gate__route i { flex: 1; border-top: 1px dashed rgba(255,255,255,.55); }
.bib-access-gate__route span { color: var(--biba-yellow); font-size: 18px; }

.bib-unlock {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--biba-ink);
    color: white;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    animation: bibUnlockExit .7s cubic-bezier(.7,0,.25,1) 3.55s forwards;
}
.bib-unlock[hidden] { display: none !important; }
.bib-unlock__grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 72px 72px; animation: bibUnlockGrid .65s ease .1s forwards; }
.bib-unlock__shape { position: absolute; opacity: 0; }
.bib-unlock__shape--red { top: -10vw; right: 8vw; width: min(36vw, 470px); aspect-ratio: 1; border-radius: 50%; background: var(--biba-red); animation: bibUnlockRed .8s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.bib-unlock__shape--blue { left: -15vw; bottom: -38vw; width: 75vw; aspect-ratio: 1; background: var(--biba-blue); transform: rotate(42deg); animation: bibUnlockBlue .9s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.bib-unlock__content { position: relative; z-index: 2; width: min(980px, calc(100% - 48px)); }
.bib-unlock__brand { display: inline-grid; place-items: center; min-width: 88px; height: 52px; padding: 0 14px; border-radius: 9px 16px 9px 16px; background: var(--biba-yellow); color: var(--biba-ink); font-size: 24px; font-weight: 900; letter-spacing: -.055em; opacity: 0; transform: translateY(20px) rotate(-3deg); animation: bibUnlockReveal .45s ease .55s forwards; }
.bib-unlock__route { display: flex; align-items: center; gap: 13px; max-width: 520px; margin: 40px 0 30px; opacity: 0; transform: translateY(18px); animation: bibUnlockReveal .45s ease .75s forwards; }
.bib-unlock__route b { font-size: 11px; letter-spacing: .15em; }
.bib-unlock__route i { flex: 1; border-top: 1px dashed rgba(255,255,255,.6); }
.bib-unlock__route span { color: var(--biba-yellow); font-size: 24px; animation: bibUnlockPlane 1.1s ease .85s both; }
.bib-unlock__content p { margin: 0 0 12px; color: var(--biba-yellow); font-size: 11px; font-weight: 900; letter-spacing: .2em; opacity: 0; animation: bibUnlockReveal .45s ease 1.05s forwards; }
.bib-unlock__content h2 { margin: 0; font-size: clamp(68px, 12vw, 168px); font-weight: 800; line-height: .82; letter-spacing: -.055em; opacity: 0; transform: translateY(36px); animation: bibUnlockReveal .65s cubic-bezier(.2,.8,.2,1) 1.1s forwards; }
.bib-unlock__content small { display: block; margin-top: 25px; font-size: 11px; font-weight: 800; letter-spacing: .18em; opacity: 0; animation: bibUnlockReveal .45s ease 1.65s forwards; }
.bib-unlock__curtain { position: absolute; z-index: 5; inset: 0; background: var(--biba-yellow); transform: translateX(-101%); animation: bibUnlockCurtain .7s cubic-bezier(.7,0,.25,1) 3s both; }

@keyframes bibUnlockGrid { to { opacity: 1; } }
@keyframes bibUnlockRed { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes bibUnlockBlue { from { opacity: 0; transform: translate(-12%, 14%) rotate(42deg); } to { opacity: .75; transform: translate(0,0) rotate(42deg); } }
@keyframes bibUnlockReveal { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes bibUnlockPlane { from { transform: translateX(-190px) rotate(-7deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes bibUnlockCurtain { 0% { transform: translateX(-101%); } 48% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes bibUnlockExit { to { visibility: hidden; opacity: 0; pointer-events: none; } }

@media (max-width: 720px) {
    .bib-access-gate__orb { width: 62vw; right: -20vw; }
    .bib-access-gate__panel { padding: 32px 24px; box-shadow: 9px 10px 0 var(--biba-blue); }
    .bib-access-gate__brand { margin-bottom: 38px; }
    .bib-access-gate__form { grid-template-columns: 1fr; }
    .bib-access-gate__form button { width: 100%; }
    .bib-unlock__content h2 { font-size: clamp(58px, 19vw, 110px); }
}

@media (prefers-reduced-motion: reduce) {
    .bib-unlock { animation-duration: .01ms; animation-delay: 1.2s; }
    .bib-unlock *, .bib-unlock *::before, .bib-unlock *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}