/* The map fills the viewport. The announcement appears only on the held pose. */
@font-face {font-family:"Joining Pixel";src:url("/_assets/41c9bf10fd65763b057f/fonts/pixelify-sans-latin.woff2") format("woff2");font-weight:400 700;font-display:swap;}
#petarrival {--pa-accent:#ffdf94;--pa-cream:#fff4cf;--pa-parchment:#f3e2ad;--pa-moss:#243e32;--pa-moss-deep:#10261f;--pa-brass:#d9b25c;--pa-brass-deep:#8a6a2c;position:fixed;inset:0;z-index:75;isolation:isolate;overflow:auto;background:#243e32;color:#fff5d9;text-align:center;font-family:system-ui,sans-serif;box-sizing:border-box;}
#petarrival[hidden] {display:none;}
#petarrival .pa-world {position:fixed;inset:0;z-index:-1;overflow:hidden;}
#petarrival canvas {display:block;width:100%;height:100%;image-rendering:pixelated;}
#petarrival .pa-world::after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,#071c2422,transparent 25%,transparent 45%,#071c2466 67%,#071c24dd);pointer-events:none;}
#petarrival .pa-fallback {position:absolute;width:170px;left:50%;top:23%;transform:translateX(-50%);image-rendering:pixelated;}
#petarrival .pa-topline {position:absolute;top:max(26px,env(safe-area-inset-top));left:32px;right:32px;display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.24em;color:#d8e6c9a6;}
#petarrival .pa-copy {position:relative;width:min(900px,92%);margin:57vh auto 28px;text-shadow:0 3px 0 #172c28,0 2px 20px #091f28;}
#petarrival .pa-kicker {font-size:11px;font-weight:700;letter-spacing:.3em;color:var(--pa-accent);}
#petarrival h1 {font:700 clamp(30px,4vw,48px)/1.05 "Joining Pixel",system-ui,sans-serif;margin:10px 0;color:#fff4cf;}
#petarrival .pa-name {display:block;font-size:clamp(64px,7.6vw,104px);line-height:.95;letter-spacing:-.035em;text-shadow:0 5px 0 #25362b,0 0 50px #ffe6a322;}
#petarrival .pa-announcement {display:block;font-size:clamp(23px,3.3vw,44px);margin-top:10px;}
#petarrival .pa-line {font-size:14px;line-height:1.6;color:#dbe7ce;margin:14px auto 18px;}
#petarrival[data-phase=joy] .pa-copy {margin-top:86vh;}
#petarrival[data-phase=joy] .pa-kicker,#petarrival[data-phase=joy] h1 {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
#petarrival[data-phase=reveal] .pa-copy {animation:pa-impact .55s cubic-bezier(.16,1,.3,1);}
#petarrival[data-phase=reveal] .pa-actions {margin-top:38px;}
#petarrival .pa-destinations {display:flex;gap:20px;max-width:660px;margin:23px auto 0;text-align:left;animation:pa-details .4s ease-out;}
#petarrival .pa-destinations p {flex:1;margin:0;font-size:11px;line-height:1.6;color:#d2ddc8;text-shadow:0 1px 4px #081c25;}
#petarrival .pa-destinations b {display:block;font-size:11px;letter-spacing:.1em;margin-bottom:3px;color:var(--pa-accent);}
#petarrival .pa-actions {display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px;}
#petarrival button {font:700 13px/1.3 system-ui,sans-serif;min-height:44px;margin:0;cursor:pointer;border-radius:4px;padding:12px 24px;}
#petarrival .pa-cta {border:1px solid #f0daa3;background:#f0dda6;color:#263b2d;box-shadow:0 3px 0 #8a8257,0 4px 22px #0004;}
#petarrival .pa-cta:hover:not(:disabled) {background:#fff0c1;}
#petarrival .pa-quiet {border:1px solid transparent;background:#102d3133;color:#d1dfc8;font-size:11px;}
#petarrival .pa-quiet:hover {color:#fff4cf;text-decoration:underline;}
#petarrival button:disabled {opacity:.5;cursor:wait;}
#petarrival button:focus-visible {outline:2px solid white;outline-offset:5px;}
#petarrival .pa-error {color:#ffbd9c;font-size:13px;line-height:1.5;margin:8px 0;}
#petarrival .pa-error:empty {display:none;}
@keyframes pa-impact {from{opacity:0;transform:scale(1.17) translateY(8px)}to{opacity:1;transform:none}}
@keyframes pa-details {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* ---- The achievement beat: the deed, stamped, before the friend it brought ---------------- */
#petarrival .pa-achievement {position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse at 50% 42%,#10261fb0 0,#0a1c18e6 55%,#06120ff5 100%);animation:pa-ach-in .3s ease-out both;}
#petarrival .pa-achievement.leaving {animation:pa-ach-out .45s cubic-bezier(.5,0,.75,0) forwards;pointer-events:none;}
#petarrival .pa-ach-flash {position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 38%,#fff4cf 0,#ffe7a0aa 22%,transparent 60%);animation:pa-ach-flash .5s .5s ease-out both;}
#petarrival .pa-ach-stage {position:relative;display:flex;flex-direction:column;align-items:center;width:min(960px,100%);padding:24px 16px;box-sizing:border-box;animation:pa-ach-shake .28s .52s linear both;}
#petarrival .pa-ach-medal {--medal:min(38vh,56vw,330px);position:relative;width:var(--medal);height:var(--medal);display:grid;place-items:center;}
#petarrival .pa-ach-burst {position:absolute;left:50%;top:38%;width:230vmax;height:230vmax;margin:-115vmax 0 0 -115vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#ffe7a02e 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 6%,transparent 34%);mask:radial-gradient(circle,#000 0,#000 6%,transparent 34%);
  animation:pa-ach-burst .9s .45s cubic-bezier(.16,1,.3,1) both,pa-ach-spin 60s 1.2s linear infinite;}
#petarrival .pa-ach-badge {position:relative;width:100%;height:100%;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 10px 0 #06120f99) drop-shadow(0 0 40px #ffe7a055);
  animation:pa-ach-stamp .8s .05s cubic-bezier(.34,1.2,.64,1) both;}
/* No picture for this deed (or it failed to load): a plain brass medallion stands in. */
#petarrival .pa-ach-plain::before {content:'';position:relative;width:78%;height:78%;border-radius:50%;box-sizing:border-box;
  background:radial-gradient(circle at 38% 32%,#fff0bd 0,#e9c56d 34%,var(--pa-brass-deep) 100%);border:6px solid var(--pa-moss-deep);
  box-shadow:inset 0 0 0 8px #f3e2ad66,0 10px 0 #06120f99;animation:pa-ach-stamp .8s .05s cubic-bezier(.34,1.2,.64,1) both;}
#petarrival .pa-ach-ring {position:absolute;inset:6%;border-radius:50%;border:4px solid var(--pa-brass);opacity:0;animation:pa-ach-ring .75s .5s ease-out both;}
#petarrival .pa-ach-sparks {position:absolute;left:50%;top:50%;width:0;height:0;}
#petarrival .pa-ach-sparks i {position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:var(--pa-cream);box-shadow:0 0 0 2px var(--pa-brass-deep);opacity:0;
  transform:rotate(var(--a)) translateY(0);animation:pa-ach-spark .85s calc(.5s + var(--d) * 40ms) cubic-bezier(.2,.8,.3,1) both;}
#petarrival .pa-ach-sparks i:nth-child(3n) {background:var(--pa-brass);width:8px;height:8px;}
#petarrival .pa-ach-kicker {margin-top:clamp(8px,2vh,18px);font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.34em;color:var(--pa-brass);text-shadow:0 2px 0 #06120f;animation:pa-ach-rise .4s .75s ease-out both;}
#petarrival .pa-ach-banner {margin-top:10px;filter:drop-shadow(0 6px 0 var(--pa-brass-deep)) drop-shadow(0 12px 22px #0008);animation:pa-ach-unfurl .55s .82s cubic-bezier(.2,.9,.3,1) both;clip-path:inset(-40% -10%);}
#petarrival .pa-ach-banner h1 {margin:0;padding:.16em 1.25em .22em;font:700 clamp(34px,6.6vw,86px)/1 "Joining Pixel",system-ui,sans-serif;color:var(--pa-moss);letter-spacing:.01em;text-wrap:balance;
  background:linear-gradient(180deg,var(--pa-cream) 0,var(--pa-parchment) 62%,#e2c98a 100%);text-shadow:0 2px 0 #fff8e2;
  clip-path:polygon(0 0,100% 0,calc(100% - .55em) 50%,100% 100%,0 100%,.55em 50%);}
#petarrival .pa-ach-detail {margin:clamp(12px,2.4vh,22px) 0 0;max-width:34ch;font:600 clamp(16px,1.9vw,22px)/1.4 system-ui,sans-serif;color:var(--pa-cream);text-shadow:0 2px 0 #06120f,0 0 18px #06120f;animation:pa-ach-rise .45s 1.2s ease-out both;}
#petarrival .pa-ach-handoff {margin:clamp(14px,3vh,30px) 0 0;font:italic 14px/1.5 system-ui,sans-serif;color:#d8e6c9;animation:pa-ach-rise .6s 2.1s ease-out both;}
#petarrival .pa-ach-next {margin-top:14px;border:1px solid #d9b25c66;background:#10261f99;color:var(--pa-cream);font-size:12px;letter-spacing:.14em;text-transform:uppercase;animation:pa-ach-rise .6s 2.4s ease-out both;}
#petarrival .pa-ach-next:hover {background:#1b3a2fcc;}
#petarrival .pa-ach-next:focus-visible {outline-color:var(--pa-brass);}
/* What was earned stays pinned above the woods for the rest of the ceremony. */
#petarrival .pa-earned {position:absolute;top:calc(max(26px,env(safe-area-inset-top)) + 26px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:4px 14px 4px 4px;border:1px solid #d9b25c66;border-radius:999px;background:#10261fcc;white-space:nowrap;
  font:700 11px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--pa-parchment);animation:pa-ach-rise .5s .2s ease-out both;}
#petarrival .pa-earned:not(:has(img)) {padding-left:14px;}
#petarrival .pa-earned-badge {width:30px;height:30px;image-rendering:pixelated;}
#petarrival[data-phase=achievement] .pa-earned {visibility:hidden;animation:none;}
@keyframes pa-ach-in {from{opacity:0}}
@keyframes pa-ach-out {to{opacity:0;transform:scale(1.04)}}
@keyframes pa-ach-flash {0%{opacity:0}25%{opacity:.75}100%{opacity:0}}
@keyframes pa-ach-shake {0%,100%{translate:0 0}20%{translate:-5px 3px}40%{translate:4px -3px}60%{translate:-3px 2px}80%{translate:2px -1px}}
@keyframes pa-ach-burst {from{scale:.15;opacity:0}60%{opacity:1}to{scale:1;opacity:1}}
@keyframes pa-ach-spin {to{rotate:360deg}}
@keyframes pa-ach-stamp {0%{opacity:0;transform:scale(2.8) rotate(-16deg)}58%{opacity:1;transform:scale(.9) rotate(3deg)}78%{transform:scale(1.07) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes pa-ach-ring {0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(2.3)}}
@keyframes pa-ach-spark {0%{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--medal) * -.3))}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--medal) * -.95 - var(--d) * 22px))}}
@keyframes pa-ach-rise {from{opacity:0;transform:translateY(10px)}}
@keyframes pa-ach-unfurl {from{clip-path:inset(-40% 50%)}to{clip-path:inset(-40% -10%)}}
@media(max-width:600px){
  #petarrival .pa-ach-medal {--medal:min(34vh,62vw,330px);}
  #petarrival .pa-ach-banner h1 {font-size:clamp(30px,9.2vw,44px);padding:.2em 1.1em .26em;}
  #petarrival .pa-ach-detail {font-size:16px;max-width:28ch;}
  #petarrival .pa-earned {top:calc(max(26px,env(safe-area-inset-top)) + 24px);}
  #petarrival .pa-kicker {letter-spacing:.18em;}

  #petarrival .pa-topline {left:16px;right:16px;font-size:11px;letter-spacing:.08em;}
  #petarrival .pa-copy {margin-top:54vh;margin-bottom:max(25px,env(safe-area-inset-bottom));}
  #petarrival .pa-name {font-size:clamp(48px,14vw,76px);}
  #petarrival .pa-announcement {font-size:clamp(21px,6vw,28px);}
  #petarrival .pa-destinations {gap:16px;margin-top:20px;}
  #petarrival .pa-destinations p {font-size:11px;}
  #petarrival .pa-actions {gap:4px;margin-top:18px;}
  #petarrival button {padding:12px 16px;}
  #petarrival .pa-line {max-width:260px;}
}
@media(max-height:700px){
  #petarrival .pa-copy {margin-top:51vh;}
  #petarrival .pa-kicker {font-size:11px;}
  #petarrival .pa-name {font-size:52px;}
  #petarrival .pa-announcement {font-size:24px;margin-top:5px;}
  #petarrival .pa-destinations {margin-top:13px;}
  #petarrival .pa-actions {margin-top:13px;}
}
@media(prefers-reduced-motion:reduce){#petarrival *{animation:none!important;transition:none!important;}}