/* Pixel Postcards demo. Sized in --u, one "pixel" of a 360px-wide stage, so the layout scales
   identically from 360px phones to the 480px desktop box. Silkscreen for headings, Inter for small text,
   Caveat for the handwritten note. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

#stage{container-type:size;background:radial-gradient(120% 75% at 50% 0%,#203154 0%,var(--panel) 62%)}
.pc{--u:calc(100cqw / 360);--hand:'Caveat','Segoe Print','Bradley Hand',cursive;position:absolute;inset:0;font-family:Inter,system-ui,sans-serif;color:var(--ink)}
.pc button,.pc input{font:inherit;color:inherit}
.pc button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pc :focus-visible{outline:calc(var(--u)*2) solid var(--accent);outline-offset:calc(var(--u)*2)}
.pc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-k{font:400 calc(var(--u)*8)/1 var(--display);letter-spacing:.08em;color:var(--mid);text-transform:uppercase}

/* steps */
.pc-steps{position:absolute;top:calc(var(--u)*9);left:0;right:0;margin:0;padding:0;list-style:none;display:flex;justify-content:center;gap:calc(var(--u)*18);font:400 calc(var(--u)*9)/1 var(--display);letter-spacing:.06em;color:var(--mid)}
.pc-steps li{opacity:.5;transition:color .3s,opacity .3s}
.pc-steps li.on{color:var(--accent);opacity:1}
.pc-steps li.done{color:var(--ink);opacity:.85}

/* the card */
.pc-fly{position:absolute;inset:0;pointer-events:none}
.pc-mover{position:absolute;left:calc(var(--u)*18);top:calc(var(--u)*30);width:calc(var(--u)*324);height:calc(var(--u)*216);z-index:2}
.pc-shake{position:relative;width:100%;height:100%;perspective:calc(var(--u)*1100)}
.pc-shake.thud{animation:thud .26s cubic-bezier(.3,.6,.4,1)}
@keyframes thud{0%{transform:none}25%{transform:translateY(calc(var(--u)*3)) scale(.992)}60%{transform:translateY(calc(var(--u)*-1))}100%{transform:none}}
.pc-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.45,.05,.25,1);pointer-events:auto}
.pc.s2 .pc-card{cursor:pointer}
.pc-card.flipped{transform:rotateY(180deg)}
.pc-face{position:absolute;inset:0;width:100%;height:100%;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--u)*3);image-rendering:pixelated;box-shadow:0 calc(var(--u)*10) calc(var(--u)*24) rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25)}
.pc-backface{transform:rotateY(180deg)}
.pc-glint{position:absolute;inset:0;border-radius:calc(var(--u)*3);overflow:hidden;pointer-events:none}
.pc-glint::after{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,250,230,.38) 45%,rgba(255,255,255,.55) 50%,rgba(255,250,230,.38) 55%,transparent);transform:skewX(-14deg);opacity:0}
.pc-glint.go::after{animation:glint .75s cubic-bezier(.4,0,.3,1)}
@keyframes glint{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}

/* envelope (pixel art, hidden until Send) */
.pc-env{position:absolute;left:calc(var(--u)*65);width:calc(var(--u)*230);image-rendering:pixelated;visibility:hidden}
.pc-env.on{visibility:visible}
.pc-env-back{top:calc(var(--u)*78);height:calc(var(--u)*150);z-index:1;filter:drop-shadow(0 calc(var(--u)*8) calc(var(--u)*14) rgba(0,0,0,.45))}
.pc-env-flap{top:calc(var(--u)*78);height:calc(var(--u)*85);z-index:1;transform-origin:50% 0;transform:scaleY(-1)}
.pc-env-flap.closed{z-index:4}
.pc-env-front{top:calc(var(--u)*78);height:calc(var(--u)*150);z-index:3}
.pc-env-seal{left:calc(var(--u)*162.5);top:calc(var(--u)*140);width:calc(var(--u)*35);height:calc(var(--u)*30);z-index:5;transform:scale(0)}
.pc-env-seal.on{visibility:visible}

/* panel */
.pc-panel{position:absolute;left:calc(var(--u)*12);right:calc(var(--u)*12);top:calc(var(--u)*258);bottom:calc(var(--u)*10);overflow:hidden;transition:opacity .35s}
.pc-panel.away{opacity:0;pointer-events:none}
.pc-page{position:absolute;inset:0;display:flex;flex-direction:column;gap:calc(var(--u)*7);transition:transform .45s cubic-bezier(.3,.8,.3,1),opacity .3s}
.pc-page[data-step="2"]{transform:translateX(105%);opacity:0}
.pc.s2 .pc-page[data-step="1"]{transform:translateX(-105%);opacity:0}
.pc.s2 .pc-page[data-step="2"]{transform:none;opacity:1}

.pc-photos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--u)*6);height:calc(var(--u)*42);flex:none}
.pc-tile{position:relative;padding:0;border:0;border-radius:calc(var(--u)*6);overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s,box-shadow .2s}
.pc-tile canvas{display:block;width:100%;height:100%;object-fit:cover}
.pc-tile canvas[hidden]{display:none}
.pc-tile[aria-pressed="true"]{box-shadow:0 0 0 calc(var(--u)*2) var(--accent)}
.pc-tile.pressed,.pc-tile:active{transform:scale(.94)}
.pc-up{display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,181,71,.55);background:rgba(255,181,71,.08)}
.pc-up:focus-within{outline:calc(var(--u)*2) solid var(--accent);outline-offset:calc(var(--u)*2)}
.pc-up input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2}
.pc-up span{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1);font-size:calc(var(--u)*9);font-weight:700;color:var(--accent);line-height:1.1;text-align:center}
.pc-up span i{font:400 calc(var(--u)*14)/1 var(--display);font-style:normal}
.pc-up.has span{position:absolute;inset:auto 0 0 0;padding:calc(var(--u)*2) 0;background:rgba(14,23,38,.72);flex-direction:row;justify-content:center;gap:calc(var(--u)*3);font-size:calc(var(--u)*8)}
.pc-up.has span i{font-size:calc(var(--u)*9)}
.pc-up[aria-pressed="true"]{box-shadow:0 0 0 calc(var(--u)*2) var(--accent)}

.pc-pals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*5);flex:none}
.pc-pal{display:flex;flex-direction:column;gap:calc(var(--u)*3);height:calc(var(--u)*25);padding:calc(var(--u)*3) calc(var(--u)*4) calc(var(--u)*2.5);border-radius:calc(var(--u)*6);border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:left;transition:transform .15s,border-color .2s,background .2s}
.pc-pal .sw{display:flex;height:calc(var(--u)*7);border-radius:calc(var(--u)*1.5);overflow:hidden}
.pc-pal .sw i{flex:1}
.pc-pal b{font-size:calc(var(--u)*9.5);font-weight:600;line-height:1;white-space:nowrap;color:var(--mid)}
.pc-pal[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,181,71,.13)}
.pc-pal[aria-pressed="true"] b{color:var(--ink)}
.pc-pal.pressed,.pc-pal:active{transform:scale(.94)}

.pc-size{display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*28);flex:none}
.pc-size output{min-width:calc(var(--u)*24);font:400 calc(var(--u)*11)/1 var(--display);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.pc input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:calc(var(--u)*28);margin:0;background:transparent;cursor:pointer;--f:22%}
.pc input[type=range]::-webkit-slider-runnable-track{height:calc(var(--u)*6);background:linear-gradient(90deg,var(--accent) var(--f),rgba(255,255,255,.14) var(--f))}
.pc input[type=range]::-moz-range-track{height:calc(var(--u)*6);background:linear-gradient(90deg,var(--accent) var(--f),rgba(255,255,255,.14) var(--f))}
.pc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:calc(var(--u)*16);height:calc(var(--u)*16);margin-top:calc(var(--u)*-5);background:var(--ink);border:calc(var(--u)*3) solid var(--accent);border-radius:0;box-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.35);transition:transform .12s}
.pc input[type=range]::-moz-range-thumb{width:calc(var(--u)*10);height:calc(var(--u)*10);background:var(--ink);border:calc(var(--u)*3) solid var(--accent);border-radius:0}
.pc input[type=range].held::-webkit-slider-thumb,.pc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.pc-dith{height:calc(var(--u)*24);padding:0 calc(var(--u)*9);border-radius:calc(var(--u)*12);border:1px solid var(--line);background:transparent;font-size:calc(var(--u)*10);font-weight:700;color:var(--mid)}
.pc-dith[aria-pressed="true"]{background:rgba(255,181,71,.15);border-color:rgba(255,181,71,.6);color:var(--accent)}

.pc-go{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*6);height:calc(var(--u)*34);flex:none;border:0;border-radius:calc(var(--u)*8);background:var(--accent);color:var(--accent-ink)!important;font:400 calc(var(--u)*13)/1 var(--display)!important;letter-spacing:.04em;box-shadow:0 calc(var(--u)*3) 0 #B87A1F;transition:transform .12s,box-shadow .12s}
.pc-go.pressed,.pc-go:active{transform:translateY(calc(var(--u)*2));box-shadow:0 calc(var(--u)*1) 0 #B87A1F}

/* step 2 */
.pc-row{display:flex;gap:calc(var(--u)*8);height:calc(var(--u)*66);flex:none}
.pc-stamps{display:flex;gap:calc(var(--u)*6)}
.pc-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*4);width:calc(var(--u)*56);padding:0;border-radius:calc(var(--u)*7);border:1px solid var(--line);background:rgba(255,255,255,.04);transition:transform .15s,border-color .2s,background .2s}
.pc-stamp canvas{width:calc(var(--u)*30);height:calc(var(--u)*37.5);image-rendering:pixelated;outline:calc(var(--u)*2.5) dotted #FFFDF5;outline-offset:calc(var(--u)*-.5);background:#FFFDF5;padding:calc(var(--u)*2)}
.pc-stamp b{font-size:calc(var(--u)*9);font-weight:600;color:var(--mid);line-height:1}
.pc-stamp[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,181,71,.13)}
.pc-stamp[aria-pressed="true"] b{color:var(--ink)}
.pc-stamp.pressed,.pc-stamp:active{transform:scale(.93)}
.pc-field{display:flex;flex-direction:column;gap:calc(var(--u)*5);min-width:0}
.pc-place{flex:1;justify-content:center}
.pc-field input{width:100%;height:calc(var(--u)*32);padding:0 calc(var(--u)*9);border-radius:calc(var(--u)*7);border:1px solid var(--line);background:rgba(255,255,255,.06);outline:none}
.pc-field input:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 calc(var(--u)*1.5) var(--accent)}
.pc-place input{font-size:calc(var(--u)*12)!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase}
.pc-note input{font:700 calc(var(--u)*20)/1 var(--hand)!important;color:#FFF3DA!important;height:calc(var(--u)*34)}
.pc-note input::placeholder{color:rgba(244,241,234,.35)}
.pc-acts{display:flex;gap:calc(var(--u)*6);height:calc(var(--u)*38);flex:none;margin-top:calc(var(--u)*2)}
.pc-acts>*{height:100%}
.pc-ic{width:calc(var(--u)*38);flex:none;border-radius:calc(var(--u)*8);border:1px solid var(--line);background:transparent;font:700 calc(var(--u)*22)/1 Inter,system-ui,sans-serif!important;color:var(--mid)!important;padding-bottom:calc(var(--u)*3)}
.pc-b2{flex:1;border-radius:calc(var(--u)*8);border:calc(var(--u)*1.5) solid var(--accent);background:transparent;color:var(--accent)!important;font:400 calc(var(--u)*11.5)/1 var(--display)!important;letter-spacing:.04em;transition:transform .12s,background .2s}
.pc-b2.pressed,.pc-b2:active{transform:scale(.95);background:rgba(255,181,71,.12)}
.pc-acts .pc-go{flex:1.35}

/* overlays */
.pc-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.pc-touch{position:absolute;left:0;top:0;width:calc(var(--u)*34);height:calc(var(--u)*34);margin:calc(var(--u)*-17) 0 0 calc(var(--u)*-17);border-radius:50%;background:rgba(255,255,255,.28);border:calc(var(--u)*2) solid rgba(255,255,255,.85);box-shadow:0 calc(var(--u)*2) calc(var(--u)*10) rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:9;transition:opacity .2s,scale .12s}
.pc-touch.on{opacity:1}
.pc-touch.down{scale:.78;background:rgba(255,255,255,.5)}
.pc-drop{position:absolute;inset:calc(var(--u)*8);display:flex;align-items:center;justify-content:center;border:calc(var(--u)*3) dashed var(--accent);border-radius:calc(var(--u)*12);background:rgba(14,23,38,.84);font:400 calc(var(--u)*16)/1 var(--display);color:var(--accent);opacity:0;pointer-events:none;transition:opacity .2s;z-index:8}
.pc.dropping .pc-drop{opacity:1}
.pc-toast{position:absolute;left:50%;top:calc(var(--u)*232);transform:translate(-50%,calc(var(--u)*6));max-width:calc(var(--u)*320);padding:calc(var(--u)*7) calc(var(--u)*12);border-radius:calc(var(--u)*18);background:rgba(14,23,38,.92);box-shadow:0 0 0 1px var(--line),0 calc(var(--u)*6) calc(var(--u)*16) rgba(0,0,0,.4);font-size:calc(var(--u)*11.5);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:7}
.pc-toast.on{opacity:1;transform:translate(-50%,0)}

/* end card (#cta, built by showCta) */
#cta.pc-end{--u:calc(100cqw / 360);justify-content:center;gap:0;padding:calc(var(--u)*18) calc(var(--u)*22) calc(var(--u)*16);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10}
#cta.pc-end.show{animation:pc-rise .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes pc-rise{from{opacity:0}to{opacity:1}}
.pc-end .pc-thumb{width:calc(var(--u)*200);height:calc(var(--u)*133.3);border-radius:calc(var(--u)*2);image-rendering:pixelated;box-shadow:0 calc(var(--u)*10) calc(var(--u)*26) rgba(0,0,0,.55);margin-bottom:calc(var(--u)*16);animation:pc-land .7s cubic-bezier(.2,1.3,.4,1) .1s both}
@keyframes pc-land{from{opacity:0;transform:translate(calc(var(--u)*120),calc(var(--u)*-160)) scale(.3)}to{opacity:1;transform:none}}
#cta.pc-end h2{font:400 calc(var(--u)*22)/1.1 var(--display);letter-spacing:.02em;margin:0 0 calc(var(--u)*8)}
#cta.pc-end p{font-size:calc(var(--u)*13);line-height:1.38;margin:0 0 calc(var(--u)*14);max-width:calc(var(--u)*290)}
#cta.pc-end .btn{font-size:calc(var(--u)*13);padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*10);font-weight:400}
#cta.pc-end .btn.main{width:calc(var(--u)*290);font-size:calc(var(--u)*15)}
.pc-end .two{display:flex;gap:calc(var(--u)*8);margin-top:calc(var(--u)*8);width:calc(var(--u)*290)}
.pc-end .two .btn{flex:1;text-align:center;padding-left:0;padding-right:0}
.pc-keep{margin-top:calc(var(--u)*10);border:0;background:none;color:var(--mid);font:600 calc(var(--u)*12) Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer}

@media (prefers-reduced-motion:reduce){.pc-env-seal.on{transform:none}.pc-page{transition:none}}