/* RightDoor motion library (extracted from the approved landing page).
 *
 * Rules of the story: something arrives and the right door lights up. Slow, soft, optional.
 *  - All loops are CSS-only. No JS timer is required for any of them.
 *  - Timeline loops are 8 s (hero scenarios) or 10 s (footer). Lamp breathe is 4.5 s.
 *  - Everything stops under prefers-reduced-motion and the end state (lit door) is shown.
 *  - Colours come from tokens.css (--line, --ink, --accent, --glow). Works in dark and light.
 *
 * Contents
 *   .caret            blinking text caret in the typed address (1 s)
 *   .breathe          lamp breathes 55% to 100% opacity (4.5 s)
 *   .glow             door glow fades in near the end of a hero loop (8 s)
 *   .pulseA/.pulseB   alternating pulses on two candidate doors for the "ambiguous" case (8 s)
 *   .parcel           parcel drop with one bounce (8 s)  [the hero parcel is cardboard #C98B4F]
 *   .sugbox           suggestion dropdown appears while typing (8 s)
 *   .chipw/.swapA/B   chip wobble and value swap for corrections (8 s)
 *   .lane*            fail-open lanes: ok / slow / gate (8 s)
 *   .rNN, .tyNN       staged reveal rows (appear at NN% of the 8 s loop) and typing width in ch (steps)
 *   .fa, .d-parcel    footer: row of arch+lamp marks, parcel travels, right door stays lit (10 s)
 *
 * Footer wiring (see animations/README.md): 16 cells, parcel lands in cell 12 (index 11).
 *   per-cell --d = index/11 * 6s for index <= 11, class "w" on cells 0..11, "t w" on the target.
 */
.caret{display:inline-block;width:2px;height:22px;margin-left:2px;background:var(--rd-accent);animation:blink 1s steps(1) infinite}
@keyframes blink{
50%{opacity:0}
}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--rd-line) 1px,transparent 1px),linear-gradient(90deg,var(--rd-line) 1px,transparent 1px);background-size:72px 72px;opacity:.22;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%)}
.breathe{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{
0%,100%{opacity:.55}
50%{opacity:1}
}
.glow{animation:glow 8s infinite}
@keyframes glow{
0%,58%{opacity:0}
64%,94%{opacity:1}
98%,100%{opacity:0}
}
.pulseA{animation:pulseA 8s infinite}
.pulseB{animation:pulseB 8s infinite}
@keyframes pulseA{
0%,58%{opacity:0}
62%,68%{opacity:1}
72%,78%{opacity:.1}
82%,94%{opacity:1}
98%,100%{opacity:0}
}
@keyframes pulseB{
0%,58%{opacity:0}
66%,68%{opacity:.1}
72%,78%{opacity:1}
82%,86%{opacity:.1}
90%,94%{opacity:1}
98%,100%{opacity:0}
}
.parcel{animation:drop 8s infinite}
@keyframes drop{
0%,60%{transform:translateY(-190px);opacity:0}
62%{opacity:1}
69%{transform:translateY(0)}
72%{transform:translateY(-14px)}
76%,94%{transform:translateY(0);opacity:1}
98%,100%{transform:translateY(0);opacity:0}
}
.pbox{animation:pbox 1.6s ease-in-out infinite}
@keyframes pbox{
50%{opacity:.45}
}
.sugbox{animation:sug 8s infinite}
@keyframes sug{
0%,16%{opacity:0;transform:translateY(-6px)}
20%,34%{opacity:1;transform:none}
38%,100%{opacity:0}
}
.chipw{animation:chipw 7s infinite;white-space:nowrap}
.chipw:nth-child(2){animation-delay:.5s}
.chipw:nth-child(3){animation-delay:1s}
.chipw:nth-child(4){animation-delay:1.5s}
.chipw:nth-child(5){animation-delay:2s}
.chipw:nth-child(6){animation-delay:2.5s}
@keyframes chipw{
0%,18%,100%{border-color:var(--rd-line);color:var(--rd-muted);background:transparent}
6%,12%{border-color:var(--rd-accent);color:var(--rd-ink);background:var(--rd-glow)}
}
.swapA{animation:swapA 6s infinite}
.swapB{animation:swapB 6s infinite}
@keyframes swapA{
0%,40%{opacity:1}
50%,90%{opacity:0}
100%{opacity:1}
}
@keyframes swapB{
0%,40%{opacity:0}
50%,90%{opacity:1}
100%{opacity:0}
}
.march{stroke-dasharray:7 7;animation:march 1.4s linear infinite}
@keyframes march{
to{stroke-dashoffset:-14}
}
.node{position:absolute;top:19px;width:24px;height:24px;border-radius:50%;background:var(--rd-bg);border:2px solid var(--rd-line)}
.dot{position:absolute;top:25px;width:12px;height:12px;border-radius:50%;background:var(--rd-accent);box-shadow:0 0 18px var(--rd-glow);left:6px}
.dot.ok{animation:laneOk 6s ease-in-out infinite}
.dot.slow{animation:laneSlow 6s ease-in-out infinite}
.dot.gate{animation:laneGate 6s ease-in-out infinite}
@keyframes laneOk{
0%{left:6px;opacity:0}
6%{opacity:1}
60%,92%{left:calc(100% - 18px);opacity:1}
100%{left:calc(100% - 18px);opacity:0}
}
@keyframes laneSlow{
0%{left:6px;opacity:0}
6%{opacity:1}
28%,52%{left:calc(50% - 6px)}
80%,92%{left:calc(100% - 18px);opacity:1}
100%{left:calc(100% - 18px);opacity:0}
}
@keyframes laneGate{
0%{left:6px;opacity:0}
6%{opacity:1}
40%,88%{left:calc(50% - 6px);opacity:1}
100%{left:calc(50% - 6px);opacity:0}
}
.plate{width:108px;height:76px;border-radius:16px;border:2px solid var(--rd-line);display:flex;align-items:center;justify-content:center;font:500 34px "Geist Mono",monospace;letter-spacing:.04em;color:var(--rd-faint);position:relative}
.plate.lit{border-color:var(--rd-accent);color:var(--rd-ink);background:var(--rd-surface);box-shadow:0 0 44px var(--rd-glow);animation:breathe 4.5s ease-in-out infinite}
.plate.soon{border-style:dashed}
.plan{padding:26px;border-radius:20px;border:1.5px solid var(--rd-line);background:var(--rd-surface);display:flex;flex-direction:column;gap:14px}
.plan.on{border-color:var(--rd-accent);box-shadow:0 0 0 4px var(--rd-glow)}
pre{margin:0;white-space:pre;overflow-x:auto}
details{border-top:1px solid var(--rd-line)}
details:last-of-type{border-bottom:1px solid var(--rd-line)}
summary{cursor:pointer;list-style:none;padding:22px 0;font:400 26px "Instrument Serif",Georgia,serif;display:flex;justify-content:space-between;gap:16px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 26px "Geist Mono",monospace;color:var(--rd-muted)}
details[open] summary::after{content:"\2212"}
input[type=range]{width:100%;accent-color:#FFE2B3;height:44px}
.navlinks{display:flex;gap:30px}
.fa{display:block;width:100%;max-width:52px;overflow:visible}
.fa .fa-arch{stroke:var(--rd-line);fill:none}
.fa .fa-lamp{fill:var(--rd-line)}
.fa.t .fa-arch{stroke:var(--rd-ink)}
.fa.t .fa-lamp{fill:var(--rd-accent)}
.fa.t{filter:drop-shadow(0 0 10px var(--rd-glow))}
.fa.w .fa-arch{animation:faArch 10s infinite both;animation-delay:var(--d)}
.fa.w .fa-lamp{animation:faLamp 10s infinite both;animation-delay:var(--d)}
.fa.t.w{animation:faGlow 10s infinite both;animation-delay:var(--d)}
.fa.t.w .fa-arch{animation-name:faArchHold}
.fa.t.w .fa-lamp{animation-name:faLampHold}
@keyframes faArch{0%{stroke:var(--rd-line)}1.5%,5%{stroke:var(--rd-ink)}12%,100%{stroke:var(--rd-line)}}
@keyframes faLamp{0%{fill:var(--rd-line)}1.5%,5%{fill:var(--rd-accent)}12%,100%{fill:var(--rd-line)}}
@keyframes faArchHold{0%{stroke:var(--rd-line)}2%,86%{stroke:var(--rd-ink)}96%,100%{stroke:var(--rd-line)}}
@keyframes faLampHold{0%{fill:var(--rd-line)}2%,86%{fill:var(--rd-accent)}96%,100%{fill:var(--rd-line)}}
@keyframes faGlow{0%{filter:none}2%,86%{filter:drop-shadow(0 0 12px var(--rd-glow))}96%,100%{filter:none}}
.d-ground{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--rd-line)}
.d-parcel{position:absolute;bottom:3px;left:calc(100% * 0.5 / 16);margin-left:-6px;width:12px;height:11px;border-radius:2px;background:#C98B4F;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.12);animation:dRun 10s linear infinite}
@keyframes dRun{
0%{left:calc(100% * 0.5 / 16);opacity:0}
2%{opacity:1}
60%{left:calc(100% * 11.5 / 16);opacity:1}
86%{left:calc(100% * 11.5 / 16);opacity:1}
96%,100%{left:calc(100% * 11.5 / 16);opacity:0}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.d-parcel{display:none}
.sugbox{display:none}
}
.r38{animation:kr38 8s infinite}
@keyframes kr38{
0%,38%{opacity:0;transform:translateY(8px) scale(.97)}
41%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.r43{animation:kr43 8s infinite}
@keyframes kr43{
0%,43%{opacity:0;transform:translateY(8px) scale(.97)}
46%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.r48{animation:kr48 8s infinite}
@keyframes kr48{
0%,48%{opacity:0;transform:translateY(8px) scale(.97)}
51%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.r53{animation:kr53 8s infinite}
@keyframes kr53{
0%,53%{opacity:0;transform:translateY(8px) scale(.97)}
56%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.r58{animation:kr58 8s infinite}
@keyframes kr58{
0%,58%{opacity:0;transform:translateY(8px) scale(.97)}
61%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.r66{animation:kr66 8s infinite}
@keyframes kr66{
0%,66%{opacity:0;transform:translateY(8px) scale(.97)}
69%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.r72{animation:kr72 8s infinite}
@keyframes kr72{
0%,72%{opacity:0;transform:translateY(8px) scale(.97)}
75%,94%{opacity:1;transform:none}
98%,100%{opacity:0;transform:translateY(8px)}
}
.ty-typos{animation:tytypos 8s steps(28) infinite}
@keyframes tytypos{
0%,4%{width:0}
34%,94%{width:28ch}
98%,100%{width:0}
}
.ty-adds{animation:tyadds 8s steps(9) infinite}
@keyframes tyadds{
0%,4%{width:0}
34%,94%{width:9ch}
98%,100%{width:0}
}
.ty-names{animation:tynames 8s steps(21) infinite}
@keyframes tynames{
0%,4%{width:0}
34%,94%{width:21ch}
98%,100%{width:0}
}
.ty-pobox{animation:typobox 8s steps(28) infinite}
@keyframes typobox{
0%,4%{width:0}
34%,94%{width:28ch}
98%,100%{width:0}
}