/* Pershing public intro (before the login). See intro.js.
   The login is hidden only while the intro owns the screen; html.pin-pending
   (set inline in the gate's head) has a failsafe so the form always appears.
   The 3, 2, 1 countdown draws itself (PRK.countdown in /assets/reveal/core.js). */

.pin-intro { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #050d13; }
.pin-intro.is-bare { display: none; }
body.pin-on { overflow: hidden; }
.pin-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
body.pin-done .pin-canvas { animation: pin-drift 48s ease-in-out infinite alternate; transform-origin: 50% 52%; }
@keyframes pin-drift { from { transform: scale(1); } to { transform: scale(1.05); } }

/* The login waits behind the intro, then rises over the map. */
.gate { position: relative; z-index: 2; }
body.pin-on .gate { opacity: 0; visibility: hidden; }
body.pin-reveal .gate {
  visibility: visible;
  background: rgba(45, 41, 38, 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: pin-gate 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes pin-gate { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Type: Pershing-alphabet words and the closing line. */
.pin-type { position: absolute; inset: 0; z-index: 1; pointer-events: none; --cap: 64px; }
.pin-word { display: block; height: var(--cap); width: auto; overflow: visible; }
.pin-word .prk-glyphs { fill: #c8a548; }
.pin-op-word { position: absolute; left: 50%; top: 0; transform-origin: 50% 0; }
.pin-op-word .pin-word { height: var(--opword, 40px); }
.pin-op-title { position: absolute; left: 50%; top: 60%; translate: -50% 0; }
.pin-title { display: grid; justify-items: center; gap: calc(var(--cap) * 0.28); transform-origin: 50% 50%; }
.pin-title .pin-word { max-width: none; }
.pin-type.is-portrait .pin-op-title { top: 47%; }
.pin-fifth { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; }
.pin-fifth .pin-word { height: calc(var(--cap) * 0.46); }
.pin-fin-word { position: absolute; left: 50%; top: var(--fintop, 36%); translate: -50% 0; }
.pin-fin-word .pin-word { height: var(--finword, 34px); }
.pin-close {
  position: absolute; left: 50%; top: var(--closetop, 48%); translate: -50% 0; width: min(92vw, 34ch); margin: 0;
  font-family: "Amarante", Georgia, serif; font-size: var(--closesize, 40px); line-height: 1.16; text-align: center; color: #f2eef1;
}
.pin-close > span { display: block; text-wrap: balance; }
.pin-cw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.pin-cw > span { display: inline-block; }

@keyframes pin-eq { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
/* Sound toggle: on by default, top right, during the countdown and the film.
   is-blocked: the browser is holding sound back until a click, tap or key. */
.pin-sound {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 8px 14px 8px 12px;
  border: 1px solid rgba(195, 154, 42, 0.55); border-radius: 999px; background: rgba(5, 13, 19, 0.55);
  color: rgba(229, 225, 230, 0.9); font: 500 11px/1 "Rubik", -apple-system, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
}
.pin-sound:focus-visible { outline: 2px solid #d8b24b; outline-offset: 4px; }
.pin-sound-icon { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pin-sound-icon i { display: block; width: 2px; height: 100%; background: #c39a2a; transform-origin: bottom; animation: pin-eq 0.9s ease-in-out infinite alternate; }
.pin-sound-icon i:nth-child(2) { animation-delay: -0.3s; }
.pin-sound-icon i:nth-child(3) { animation-delay: -0.6s; }
.pin-sound-icon i:nth-child(4) { animation-delay: -0.15s; }
.pin-sound.is-muted { color: rgba(229, 225, 230, 0.62); border-color: rgba(229, 225, 230, 0.3); }
.pin-sound.is-blocked { color: #f2eef1; border-color: #c39a2a; animation: pin-ask 1.875s ease-in-out infinite; }
@keyframes pin-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(195, 154, 42, 0); } 40% { box-shadow: 0 0 0 5px rgba(195, 154, 42, 0.22); } }
.pin-sound.is-muted .pin-sound-icon i { animation: none; transform: scaleY(0.3); background: rgba(229, 225, 230, 0.5); }
.pin-sound.is-muted .pin-sound-icon::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: #c39a2a; transform: rotate(-35deg);
}
.pin-skip {
  position: absolute; right: 18px; bottom: 16px; z-index: 3; min-height: 36px; padding: 8px 16px;
  border: 1px solid rgba(229, 225, 230, 0.3); border-radius: 999px; background: rgba(5, 13, 19, 0.5);
  color: rgba(229, 225, 230, 0.82); font: 500 11px/1 "Rubik", -apple-system, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
}
.pin-credit { position: absolute; left: 14px; bottom: 10px; z-index: 3; margin: 0; color: rgba(229, 225, 230, 0.56); font: 400 10px/1.2 "Rubik", -apple-system, sans-serif; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .pin-sound-icon i, .pin-sound.is-blocked { animation: none; } }