*{box-sizing:border-box}html{color-scheme:dark;background:#000}body{margin:0;background:#000;color:#fff;font-family:"Segoe UI",Arial,sans-serif}.locked{min-height:var(--gate-height,100svh);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 24px 64px;text-align:center}h1{font-weight:650;margin:0 0 clamp(36px,6vh,56px);line-height:1.15;text-transform:uppercase}h1 span{display:block}h1 .brand-region{font-size:clamp(1rem,4.8vw,1.65rem);letter-spacing:.24em;padding-left:.24em;margin-bottom:14px}h1 .brand-name{font-size:clamp(1.75rem,7.5vw,2.8rem);letter-spacing:.055em;padding-left:.055em}form{position:relative;width:min(520px,100%);display:flex;flex-direction:column;align-items:center}.invitation{font-size:clamp(1.2rem,4.7vw,1.75rem);font-weight:500;letter-spacing:.06em;line-height:1.5;margin:0;white-space:nowrap}#flag{position:relative;isolation:isolate;background:none;border:0;border-radius:0;color:inherit;font:inherit;padding:0 .13em;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#flag:before{content:"";position:absolute;z-index:-1;inset:15% -3% 12%;background:#fff;clip-path:polygon(2% 9%,17% 5%,18% 0,42% 6%,66% 2%,97% 6%,95% 20%,100% 23%,97% 72%,99% 91%,72% 95%,51% 91%,21% 100%,1% 94%,4% 71%,0 66%);transform:rotate(-3deg);opacity:0}.revealed #flag{color:#000}.revealed #flag:before{opacity:1}#flag:focus-visible{outline:1px dashed #777;outline-offset:8px}#password-entry{position:absolute;bottom:calc(100% + 20px);left:0;right:0;width:100%;text-align:center}#password-entry[hidden]{display:none}#password{display:block;margin:0 auto;width:min(230px,75vw);height:44px;border:0;border-bottom:1px solid #191919;border-radius:0;background:#030303;color:#bcbcbc;text-align:center;letter-spacing:.22em;font:16px ui-monospace,monospace;caret-color:#777;outline:none}#password:focus-visible{border-bottom-color:#6d6d6d}#gate-error:empty{display:none}#gate-error{min-height:20px;font:12px/1.5 Arial,sans-serif;color:#aaa;margin:12px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-height:500px){.locked{min-height:var(--gate-height,100svh);padding:100px 24px 32px}h1{margin-bottom:24px}}@media(forced-colors:active){.revealed #flag{background:Highlight;color:HighlightText}#password{border:1px solid CanvasText}}

/* One slow transmission: fade the name, raise the phrase, invert once, then black. */
.entering{overflow:hidden;pointer-events:none;animation:signal-field 3.4s linear both}
.entering h1,.entering #password-entry{animation:clear-name .55s ease-out both}
.entering .invitation{position:relative;animation:raise-signal 3.4s cubic-bezier(.22,.7,.22,1) both}
.entering #flag{color:inherit}.entering #flag:before{opacity:0}
.entering .invitation:after{content:"";position:absolute;left:-12%;right:-12%;top:50%;height:1px;background:currentColor;opacity:0;animation:signal-cut 3.4s linear both}
@keyframes clear-name{to{opacity:0}}
@keyframes raise-signal{0%,12%{transform:translate(0,0);opacity:1;color:#fff}50%{transform:translate(var(--center-x),var(--center-y));color:#fff;opacity:1}68%,77%{transform:translate(var(--center-x),var(--center-y));color:#000;opacity:1}100%{transform:translate(var(--center-x),var(--center-y));color:#000;opacity:0}}
@keyframes signal-field{0%,48%{background:#000}68%,77%{background:#fff}100%{background:#000}}
@keyframes signal-cut{0%,45%{opacity:0;transform:scaleX(.2)}52%{opacity:.3;transform:scaleX(1)}59%,100%{opacity:0;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.entering,.entering *{animation:none!important}}

/* A quiet clue appears only after four exploratory taps. */
#lock-clue[hidden],#lock-message[hidden]{display:none}
.clue-visible h1{margin-bottom:12px}
#lock-clue{width:100%;margin:0 0 20px;animation:clue-in .65s ease-out both}
#lock-hint{display:block;width:128px;height:128px;margin:0 auto;padding:0;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#lock-hint img{display:block;width:100%;height:100%;object-fit:contain;opacity:.85;transition:opacity .25s}
#lock-hint:hover img,#lock-hint:focus-visible img{opacity:1}
#lock-hint:focus-visible{outline:1px dashed #aaa;outline-offset:2px}
#lock-message{margin:10px auto 16px;max-width:42ch;color:#c1bcb5;font:italic 15px/1.8 Georgia,serif}
.entering #lock-clue{animation:clear-name .55s ease-out both}
@keyframes clue-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:550px){#lock-hint{width:84px;height:84px}#lock-clue{margin-bottom:12px}#lock-message{margin-top:8px;font-size:14px}}
@media(prefers-reduced-motion:reduce){#lock-clue,#lock-message{animation:none}#lock-hint img{transition:none}}

/* Dim the metal first, then let each line emerge at reading pace. */
#lock-clue.riddle-open #lock-hint img{opacity:.12;transition:opacity .7s ease-out}
#lock-message span{display:block;animation:riddle-line 1.6s ease-out both;animation-delay:.85s}
#lock-message span:nth-child(2){animation-delay:2.45s}
#lock-message span:nth-child(3){animation-delay:4.05s}
#lock-message span:nth-child(4){animation-delay:5.65s}
@keyframes riddle-line{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#lock-message span{animation:none}#lock-clue.riddle-open #lock-hint img{transition:none}}

/* Both verses occupy the same space over the lock, never a separate row. */
#lock-clue{display:grid;grid-template-areas:"clue";place-items:center;position:relative}
#lock-clue.riddle-open{min-height:190px}
#lock-hint,.riddle-text{grid-area:clue}
#lock-hint{z-index:0}
#lock-clue .riddle-text{z-index:1;pointer-events:none;margin:12px 0;max-width:100%;width:100%;color:#c1bcb5;font:italic 15px/1.8 Georgia,serif}
#flag-message[hidden]{display:none}
#flag-message span{display:block}
#lock-message{transition:opacity .7s ease-out}
.second-riddle #lock-message{opacity:0}
#flag-message{animation:flag-riddle-in 1.6s .7s ease-out both}
@keyframes flag-riddle-in{from{opacity:0}to{opacity:1}}
@media(max-width:360px){#lock-clue .riddle-text{font-size:13px}}
@media(max-height:550px){#lock-clue.riddle-open{min-height:160px}#lock-clue .riddle-text{font-size:13px;line-height:1.7;margin:8px 0}}
@media(prefers-reduced-motion:reduce){#lock-message{transition:none}#flag-message{animation:none}}