/* paxdigi.com: the mark on black, and branches that grow out of it to each area of the site. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; }
body { font: 15px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }

canvas#branches { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

.home { position: fixed; inset: 0; pointer-events: none; }

/* The mark. A button, so it works with a keyboard and a tap as well as a mouse. */
.mark {
  pointer-events: auto; position: absolute; left: 50%; top: 50%;
  width: var(--mark, 280px); height: var(--mark, 280px); padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; transform: translate(-50%, -50%) perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .25s ease-out, filter .5s ease;
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  -webkit-tap-highlight-color: transparent;
}
.mark img { width: 100%; height: 100%; display: block; border-radius: 50%; user-select: none; -webkit-user-drag: none; }
.mark:focus-visible { outline: 2px solid #ffffff88; outline-offset: 8px; }
.mark::after {
  /* a slow breath of light around the ring while it waits */
  content: ""; position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 40px 2px rgba(255, 255, 255, .08); animation: breathe 4.5s ease-in-out infinite;
}
body.open .mark { filter: drop-shadow(0 0 26px rgba(255, 255, 255, .28)); }
body.open .mark::after { animation: none; box-shadow: 0 0 60px 6px rgba(255, 255, 255, .14); }
@keyframes breathe { 50% { box-shadow: 0 0 70px 6px rgba(255, 255, 255, .16); } }

.hint {
  position: absolute; left: 0; right: 0; bottom: 7vh; margin: 0; text-align: center;
  font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: #ffffff55; transition: opacity .6s;
}
body.open .hint, body.used .hint { opacity: 0; }

/* Where each branch ends: the area's name, positioned by home.js at the branch tip. */
.areas { position: absolute; inset: 0; }
.area {
  pointer-events: auto; position: absolute; left: 0; top: 0; display: block; min-width: 190px;
  padding: 10px 14px 11px; border-radius: 12px; color: #fff; text-decoration: none;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, border-color .25s, box-shadow .25s, visibility 0s linear .35s;
  will-change: transform;
}
.area.shown { opacity: 1; visibility: visible; transition: opacity .45s ease, border-color .25s, box-shadow .25s, visibility 0s; }
.area .name { display: block; font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.area .tag { display: block; font-size: 11.5px; color: #ffffffaa; letter-spacing: 1px; margin-top: 2px; }
.area .go { display: block; font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; margin-top: 7px; color: var(--accent, #fff); }
.area:hover, .area:focus-visible { border-color: var(--accent, #fff); box-shadow: 0 0 24px -4px var(--accent, #fff); outline: none; }
/* an area this visitor may not open: scrambled letters, blurred, so there's a shape and nothing to read */
.area.locked .name, .area.locked .tag { filter: blur(5px); user-select: none; opacity: .85; }
.area.locked .name { letter-spacing: 1.5px; }
.area.locked .go { color: #ffffff99; letter-spacing: 2px; }
.area.locked:hover .name, .area.locked:hover .tag { filter: blur(4px); }

@media (max-width: 640px) {
  .area { min-width: 160px; padding: 8px 12px 9px; }
  .area .name { font-size: 15px; }
}
/* ───── just signed in: a lock, drawn in the mark's own white strokes, opens and becomes the mark ─────
   The lock sits where the mark goes. Its keyhole lights and turns, the shackle springs open, then the lock folds away
   into the mark's ring and the two letters draw themselves in. The real mark fades in under the drawing, which fades out
   (home.js runs the timing). */
body.unlocking .mark { opacity: 0; pointer-events: none; }
body.unlocking .hint { opacity: 0; }
.mark { opacity: 1; }
body.unlocked .mark { transition: transform .25s ease-out, filter .5s ease, opacity .6s ease; filter: drop-shadow(0 0 34px rgba(255, 255, 255, .35)); }

.unlock { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.unlock svg {
  position: absolute; left: 50%; top: 50%; width: var(--mark, 280px); height: var(--mark, 280px);
  transform: translate(-50%, -50%); overflow: visible;
}
.unlock .w { fill: none; stroke: #fff; stroke-linecap: butt; }
.unlock rect.w { fill: #000; }
.unlock .lk { transform-box: view-box; transform-origin: 802px 720px; animation: lk-in .5s cubic-bezier(.2, .9, .3, 1.2) both, lk-jolt .32s ease-out .86s both, lk-out .42s cubic-bezier(.6, 0, .8, .4) 1.32s both; }
.unlock .shackle { transform-box: view-box; transform-origin: 942px 640px; animation: shackle .62s cubic-bezier(.3, 1.55, .5, 1) .84s both; }
.unlock .kh { transform-box: view-box; transform-origin: 802px 830px; animation: kh-turn .42s cubic-bezier(.4, 1.6, .5, 1) .52s both; }
.unlock .kh-glow { opacity: 0; animation: kh-glow .9s ease-out .5s both; }
.unlock .ring { transform-box: view-box; transform-origin: 802px 712px; opacity: 0; animation: ring-in .6s cubic-bezier(.2, .8, .2, 1) 1.36s both; }
.unlock .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .78s cubic-bezier(.55, 0, .3, 1) 1.62s both; }
.unlock .draw.b { animation-delay: 1.78s; }
.unlock .over { opacity: 0; animation: fade-in .2s ease 2.32s both; }
.unlock .flash {
  position: absolute; left: 50%; top: 50%; width: calc(var(--mark, 280px) * 1.6); height: calc(var(--mark, 280px) * 1.6);
  border-radius: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(134, 168, 255, .28) 45%, rgba(25, 245, 140, .12) 65%, transparent);
  animation: flash .9s ease-out 1.3s both;
}
.unlock .spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--c, #fff); box-shadow: 0 0 10px 2px var(--c, #fff); opacity: 0;
  animation: spark .85s cubic-bezier(.15, .7, .3, 1) 1.32s both;
}
.unlock.done { transition: opacity .5s ease; opacity: 0; }

@keyframes lk-in { from { opacity: 0; transform: scale(.78); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lk-jolt { 0%, 100% { translate: 0 0; } 30% { translate: 0 10px; } 60% { translate: 0 -4px; } }
@keyframes lk-out { to { opacity: 0; transform: scale(.55); filter: blur(10px); } }
@keyframes shackle { 0% { transform: none; } 55% { transform: translateY(-120px); } 100% { transform: translateY(-120px) rotate(-34deg); } }
@keyframes kh-turn { to { transform: rotate(90deg); } }
@keyframes kh-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .55; } }
@keyframes ring-in { from { opacity: 0; transform: scale(.42); stroke-width: 120; } to { opacity: 1; transform: none; stroke-width: 42; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--mark, 280px) * -.82)) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .mark::after { animation: none; transition: none; }
  .unlock { display: none; }
}