/* =====================================================================
   VAULT DOOR + LOCK BUTTON  (css/door.css, used with js/door.js)
   =====================================================================
   • The vault door animation plays when someone unlocks the Hackathon
     area, and closes again when they lock it.
   • The gold "Lock" pill sits in the bottom-left corner while unlocked.
   Speeds: change the durations in the keyframes below.
   ===================================================================== */

.door-overlay { position: fixed; inset: 0; z-index: 2000; pointer-events: all; overflow: hidden; perspective: 1400px; }
.door-overlay .door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #003a7a, #002b5c 55%, #001c3d);
  box-shadow: inset 0 0 120px rgb(0 0 0 / 0.45);
}
.door-overlay .door-l { left: 0; border-right: 6px solid #ffd200; transform-origin: left center; }
.door-overlay .door-r { right: 0; border-left: 6px solid #ffd200; transform-origin: right center; }
/* rivets along the seam */
.door-overlay .door-l::after, .door-overlay .door-r::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 18px;
  background: radial-gradient(circle, #ffd200 0 3px, transparent 3.5px) center / 18px 54px repeat-y; opacity: .55;
}
.door-overlay .door-l::after { right: 14px; } .door-overlay .door-r::after { left: 14px; }

/* the round lock dial in the middle */
.door-dial {
  position: absolute; left: 50%; top: 42%; width: min(46vw, 230px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #003a7a 0 55%, #002b5c 56% 100%);
  box-shadow: 0 0 0 6px #ffd200, 0 0 0 14px rgb(255 210 0 / 0.18), 0 30px 80px -20px rgb(0 0 0 / 0.7);
}
.door-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.door-dial .door-icon { position: relative; font-size: clamp(3rem, 12vw, 4.6rem); color: #ffd200; line-height: 1; }
.door-burst { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #ffd200; opacity: 0; }

.door-text {
  position: absolute; left: 50%; top: calc(42% + min(23vw, 115px) + 2rem); translate: -50% 0; width: max-content; max-width: calc(100vw - 2rem);
  text-align: center; color: #fff; padding: 1.1rem 1.8rem 1.2rem; opacity: 0; border-radius: 22px;
  background: rgb(0 28 61 / 0.92); box-shadow: 0 0 0 1px rgb(255 210 0 / 0.35), 0 20px 50px -20px rgb(0 0 0 / 0.8);
}
.door-text span { display: block; font-size: .85rem; font-weight: 800; letter-spacing: .3em; color: #ffd200; margin-bottom: .4rem; }
.door-text strong { display: block; font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.door-text small { display: block; margin-top: .5rem; font-size: 1rem; color: rgb(255 255 255 / 0.8); }

.door-spark { position: absolute; left: 50%; top: 42%; width: 9px; height: 9px; border-radius: 2px; background: #ffd200; opacity: 0; }

/* ---------- OPEN (unlock) ---------- */
.door-opening .door-dial svg { animation: door-spin 1s cubic-bezier(.5, 0, .3, 1) both; }
.door-opening .door-icon { animation: door-pop .35s .95s ease-out both; }
.door-opening .door-burst { animation: door-burst .7s 1s ease-out both; }
.door-opening .door-text { animation: door-rise .45s 1.05s ease-out both; }
.door-opening .door-spark { animation: door-spark 1s 1.1s cubic-bezier(.2, .7, .3, 1) both; }
.door-opening .door-dial { animation: door-dial-out .55s 2.05s ease-in both; }
.door-opening .door-text { animation: door-rise .45s 1.05s ease-out both, door-fade .4s 2.05s ease-in forwards; }
.door-opening .door-l { animation: door-open-l .9s 2.15s cubic-bezier(.7, 0, .2, 1) both; }
.door-opening .door-r { animation: door-open-r .9s 2.15s cubic-bezier(.7, 0, .2, 1) both; }

/* ---------- CLOSE (lock) ---------- */
.door-closing .door-l { animation: door-close-l .6s cubic-bezier(.6, 0, .2, 1) both; }
.door-closing .door-r { animation: door-close-r .6s cubic-bezier(.6, 0, .2, 1) both; }
.door-closing .door-dial { animation: door-dial-in .4s .5s ease-out both; }
.door-closing .door-dial svg { animation: door-spin-back .9s .6s cubic-bezier(.5, 0, .3, 1) both; }
.door-closing .door-text { animation: door-rise .4s .8s ease-out both; }
.door-closing.door-leaving { animation: door-fade .45s ease-in forwards; }

@keyframes door-spin      { from { transform: rotate(-200deg); } to { transform: rotate(0deg); } }
@keyframes door-spin-back { from { transform: rotate(0deg); } to { transform: rotate(-160deg); } }
@keyframes door-pop       { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes door-burst     { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
@keyframes door-rise      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes door-fade      { to { opacity: 0; } }
@keyframes door-spark     { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); } }
@keyframes door-dial-out  { to { opacity: 0; transform: scale(1.35); } }
@keyframes door-dial-in   { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes door-open-l    { to { transform: translateX(-102%) rotateY(18deg); } }
@keyframes door-open-r    { to { transform: translateX(102%) rotateY(-18deg); } }
@keyframes door-close-l   { from { transform: translateX(-102%); } to { transform: none; } }
@keyframes door-close-r   { from { transform: translateX(102%); } to { transform: none; } }

/* ---------- The "Lock" pill (bottom-left while unlocked) ---------- */
.lock-pill {
  position: fixed; left: 20px; bottom: 20px; z-index: 990; display: flex; align-items: center; gap: .7rem;
  padding: .45rem .5rem .45rem 1rem; border-radius: 999px; background: var(--rbc-blue-deep, #002b5c); color: #fff;
  box-shadow: 0 12px 30px -10px rgb(0 43 92 / 0.6), 0 0 0 1px rgb(255 210 0 / 0.5);
  font-size: .85rem; max-width: calc(100vw - 120px); animation: pill-in .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.lock-pill .lock-pill-text { line-height: 1.25; min-width: 0; }
.lock-pill .lock-pill-text b { display: block; color: #ffd200; font-size: .78rem; letter-spacing: .04em; }
.lock-pill .lock-pill-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(255 255 255 / 0.85); }
.lock-pill button {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; border: 0; cursor: pointer; border-radius: 999px;
  padding: .55rem .95rem; background: #ffd200; color: #002b5c; font: inherit; font-weight: 800; font-size: .9rem;
  animation: pill-pulse 3s 2s infinite;
}
.lock-pill button:hover { background: #ffe14d; }
.lock-pill button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes pill-in    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pill-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(255 210 0 / 0); } 80% { box-shadow: 0 0 0 7px rgb(255 210 0 / 0.35); } }
/* "My area" button in the pill: one tap back to your Hackathon page */
.lock-pill .pill-go {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; text-decoration: none;
  padding: .5rem .85rem; color: #fff; font-weight: 700; font-size: .88rem; border: 1px solid rgb(255 255 255 / .35);
}
.lock-pill .pill-go:hover { background: rgb(255 255 255 / .12); }
.lock-pill .pill-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lock-pill .pill-go[hidden] { display: none; }
@media (max-width: 520px) {
  .lock-pill { left: 12px; bottom: 14px; padding: .35rem; gap: .35rem; }
  .lock-pill .lock-pill-text { display: none; }
}

/* The big lock reminder in the Hackathon area banner */
.lock-reminder {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.5rem; padding: .9rem 1rem;
  border-radius: 16px; background: rgb(255 210 0 / 0.12); border: 1px solid rgb(255 210 0 / 0.45); max-width: 640px;
}
.lock-reminder p { margin: 0; flex: 1; min-width: 200px; color: rgb(255 255 255 / 0.9); }
.lock-reminder p b { color: #ffd200; }
.btn-lock { display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer; background: #ffd200; color: #002b5c; font: inherit; font-weight: 800; padding: .75rem 1.2rem; border-radius: 999px; }
.btn-lock:hover { background: #ffe14d; }

@media (prefers-reduced-motion: reduce) {
  .door-overlay *, .door-overlay { animation-duration: .01s !important; animation-delay: 0s !important; }
  .lock-pill, .lock-pill button { animation: none; }
}