/* SkyerWorks — digital postcard (site/hello/) */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/caveat.woff2) format('woff2')}

:root{--gold-light:#D9B878;--hand:'Caveat','Segoe Print','Bradley Hand',cursive;--ink-blue:#22343A}
body{
  position:relative;
  background:
    radial-gradient(60vmax 50vmax at 90% -10%,rgba(169,203,214,.42),transparent 62%),
    radial-gradient(55vmax 45vmax at -10% 60%,rgba(217,184,120,.2),transparent 60%),
    radial-gradient(40vmax 34vmax at 100% 100%,rgba(180,88,60,.08),transparent 60%),
    var(--paper);
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.contours{position:fixed;inset:0;width:100%;height:100%;opacity:.07;pointer-events:none;z-index:0}

/* header */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;padding:14px 16px 0}
.home{display:inline-flex;align-items:center;gap:10px;color:var(--ink);border-radius:12px}
.home-mark{width:34px;height:34px;border-radius:10px;box-shadow:var(--shadow-sm)}
.home .wordmark{font-size:23px}
.top-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(31,28,25,.18);background:rgba(255,253,249,.7);color:var(--ink);font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s var(--ease)}
.top-cta:hover{color:var(--ink);background:var(--card);transform:translateY(-1px)}

.main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:6px 16px 24px}
.psst{margin:6px 0 12px;font:600 25px/1.1 var(--hand);color:var(--clay);transform:rotate(-2deg);text-align:center;animation:psstIn .7s var(--ease) .05s both}
@keyframes psstIn{from{opacity:0;transform:translateY(8px) rotate(-2deg)}to{opacity:1;transform:rotate(-2deg)}}

/* ===== stage ===== */
.stage{
  --w:min(calc(100vw - 32px),420px,calc((100vh - 200px) * .6667));
  --w:min(calc(100vw - 32px),420px,calc((100svh - 200px) * .6667));
  position:relative;width:max(280px,var(--w));aspect-ratio:2/3;container-type:inline-size;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.ground{position:absolute;left:8%;right:8%;bottom:-3.5%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(23,57,63,.38),rgba(23,57,63,0));filter:blur(7px);pointer-events:none;
  animation:groundIn 1.2s var(--ease) .2s both}
@keyframes groundIn{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
.arrive{position:absolute;inset:0;transform:rotate(-1.4deg);animation:arrive 1.25s cubic-bezier(.22,.9,.3,1) .2s both}
@keyframes arrive{
  0%{transform:translate(-14%,-120vh) rotate(-18deg)}
  62%{transform:translate(0,14px) rotate(1.6deg)}
  78%{transform:translate(0,-6px) rotate(-2.2deg)}
  90%{transform:translate(0,2px) rotate(-1.1deg)}
  100%{transform:rotate(-1.4deg)}}
.persp{position:absolute;inset:0;perspective:2200px;animation:thud .32s ease-out 1.62s both}
@keyframes thud{0%,100%{transform:none}35%{transform:translateY(3px) scale(.994)}}
.tilt,.card{position:absolute;inset:0;transform-style:preserve-3d}
.card{cursor:grab;--fs:0;--go:0;--gx:50%;--gy:30%}
.stage.dragging .card{cursor:grabbing}
.face{
  --u:calc(100cqw / 360);
  position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--u) * 14);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 1px 2px rgba(31,28,25,.1),0 calc(var(--u) * 28) calc(var(--u) * 54) calc(var(--u) * -22) rgba(23,57,63,.55);
}
.front{transform:translateZ(.5px);background:var(--lagoon)}
.back{transform:rotateY(180deg) translateZ(.5px)}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.3),rgba(255,255,255,0) 46%),
    linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 70%);
  background-size:100% 100%,260% 100%;background-position:0 0,calc(var(--fs) * 100%) 0;
  opacity:max(var(--go),calc(var(--fs) * .85))}

/* ===== FRONT ===== */
.map{position:absolute;inset:0;width:100%;height:100%}
.map text{font:600 15px/1 var(--body);fill:var(--ink)}
.scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(23,57,63,0) 46%,rgba(23,57,63,.45) 60%,rgba(23,57,63,.86) 74%,#17393F 90%),
  linear-gradient(180deg,rgba(23,57,63,.1),rgba(23,57,63,0) 14%)}
.pc-chip{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 14);display:flex;align-items:center;gap:calc(var(--u) * 7);
  padding:calc(var(--u) * 5) calc(var(--u) * 13) calc(var(--u) * 5) calc(var(--u) * 5);border-radius:999px;background:#FFFDF9;box-shadow:0 4px 14px -6px rgba(31,42,30,.45)}
.pc-chip svg{width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-radius:calc(var(--u) * 6)}
.pc-chip .wordmark{font-size:calc(var(--u) * 18)}

.stamp-wrap{position:absolute;right:calc(var(--u) * 14);top:calc(var(--u) * 14);width:calc(var(--u) * 70);transform:rotate(3deg);
  filter:drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(20,30,25,.35));animation:stick .55s cubic-bezier(.3,1.5,.5,1) 1.2s both}
.stamp{display:block;width:100%;height:auto}
.stamp .st-star{transform-box:fill-box;transform-origin:center;animation:twinkle 3.6s ease-in-out 3.4s infinite}
@keyframes stick{0%{opacity:0;transform:translate(10%,-30%) scale(1.6) rotate(-12deg)}100%{opacity:1;transform:rotate(3deg)}}
@keyframes twinkle{0%,62%,100%{transform:scale(1) rotate(0)}72%{transform:scale(1.5) rotate(45deg)}84%{transform:scale(1) rotate(90deg)}}
.postmark-wrap{position:absolute;right:calc(var(--u) * 40);top:calc(var(--u) * 50);width:calc(var(--u) * 168);color:var(--ink-blue);opacity:.9;
  transform:rotate(-12deg);animation:stampOn .42s cubic-bezier(.2,.8,.3,1) 1.6s both}
.postmark{display:block;width:100%;height:auto;overflow:visible}
@keyframes stampOn{0%{opacity:0;transform:scale(1.7) rotate(-4deg)}60%{opacity:1}100%{opacity:.9;transform:rotate(-12deg)}}

.front-copy{position:absolute;left:calc(var(--u) * 22);right:calc(var(--u) * 60);bottom:calc(var(--u) * 22);color:var(--paper)}
.wish{margin:0 0 calc(var(--u) * 4);font:700 calc(var(--u) * 27)/1 var(--hand);color:var(--gold-light);transform:rotate(-4deg);transform-origin:0 100%;
  text-shadow:0 1px 10px rgba(23,57,63,.55);clip-path:inset(-20% -5% -20% 0);animation:write 1.1s steps(18,end) 2.5s both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.headline{margin:0;font-family:var(--display);font-weight:500;font-size:calc(var(--u) * 44);line-height:1;letter-spacing:-.01em;color:var(--paper)}
.headline em{color:var(--gold-light)}
.sub{margin:calc(var(--u) * 12) 0 0;display:flex;flex-direction:column;gap:calc(var(--u) * 5);font:600 calc(var(--u) * 9.6)/1.25 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.sub-sig{color:var(--gold-light)}

/* pins + route (resting = final) */
.pin-shadow,.pin-ripple,.pin-pill{transform-box:fill-box;transform-origin:center}
.pin-ripple{opacity:0}
.pin-drop{animation:pinDrop .95s cubic-bezier(.3,1.25,.45,1) both;animation-delay:var(--t)}
.pin-shadow{animation:shadowIn .95s var(--ease) both;animation-delay:var(--t)}
.pin-ripple{animation:ripple 1.2s ease-out both;animation-delay:calc(var(--t) + .5s)}
.pin-pill{transform-origin:50% 100%;animation:pillUp .7s var(--ease) both;animation-delay:calc(var(--t) + .42s)}
@keyframes pinDrop{0%{opacity:0;transform:translateY(-130px)}55%{opacity:1;transform:translateY(5px)}75%{transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes shadowIn{0%{opacity:0;transform:scale(.2)}55%{opacity:.3;transform:scale(1.15)}100%{opacity:.3;transform:none}}
@keyframes ripple{0%{opacity:.85;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}
@keyframes pillUp{from{opacity:0;transform:translateY(10px) scale(.88)}to{opacity:1;transform:none}}
.route-draw{stroke-dasharray:100 100;animation:draw 1.9s cubic-bezier(.45,.05,.35,1) 1.9s both}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.walker{pointer-events:none}
.pin--arr,.pin--pool{display:none}

.flip-btn{position:absolute;display:grid;place-items:center;width:calc(var(--u) * 40);height:calc(var(--u) * 40);min-width:36px;min-height:36px;border-radius:50%;border:0;cursor:pointer;padding:0;transition:transform .3s var(--ease)}
.flip-btn svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flip-btn:hover{transform:rotate(-40deg)}
.flip-btn--front{right:calc(var(--u) * 14);bottom:calc(var(--u) * 18);background:rgba(255,253,249,.94);color:var(--lagoon);box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.flip-btn--back{position:relative;background:var(--sand);color:var(--lagoon)}

/* ===== BACK ===== */
.back{background:repeating-linear-gradient(135deg,var(--clay) 0 calc(var(--u) * 11),#FBF7F1 calc(var(--u) * 11) calc(var(--u) * 22),var(--lagoon) calc(var(--u) * 22) calc(var(--u) * 33),#FBF7F1 calc(var(--u) * 33) calc(var(--u) * 44))}
.back-inner{position:absolute;inset:calc(var(--u) * 8);border-radius:calc(var(--u) * 8);display:flex;flex-direction:column;
  padding:calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 18);
  background:radial-gradient(90% 50% at 100% 0%,rgba(169,203,214,.22),transparent 60%),linear-gradient(180deg,#FFFDF9,#FAF5EC);color:var(--ink)}
.back-head{display:flex;align-items:center;justify-content:space-between}
.pc-label{font-family:var(--display);font-weight:600;font-size:calc(var(--u) * 15);letter-spacing:.32em;text-transform:uppercase;color:var(--lagoon)}
.back-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;position:relative}
.note{font-family:var(--hand);font-weight:500;font-size:calc(var(--u) * 21.5);line-height:1.2;color:#24414A}
.note p{margin:0}
.note .greet{font-weight:700;font-size:1.18em;margin-bottom:.25em;color:var(--clay-dark)}
.note .ink + .ink{margin-top:.45em}
.sign{margin-top:.35em!important;position:relative;display:inline-block;font-weight:700;font-size:1.3em;color:var(--clay-dark)}
.swash{position:absolute;left:-4%;bottom:-.32em;width:115%;height:.5em;overflow:visible}
.swash path{fill:none;stroke:var(--clay);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:0}
.note.writing .swash path{animation:swash .9s var(--ease) both;animation-delay:var(--sd,2s)}
@keyframes swash{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.note.prep .w,.note.prep .greet,.note.prep .sign-txt{opacity:0}
.note.writing .w,.note.writing .greet,.note.writing .sign-txt{animation:ink .5s ease-out both;animation-delay:calc(var(--i) * 34ms + .25s)}
@keyframes ink{from{opacity:0;filter:blur(2px);transform:translateY(2px)}to{opacity:1;filter:none;transform:none}}
.note .w{display:inline-block}

.address{position:absolute;right:calc(var(--u) * -2);bottom:calc(var(--u) * -4);width:calc(var(--u) * 76)}
.address .addr{display:none}
.rubber{display:block;color:var(--clay);opacity:.82;transform:rotate(-14deg)}

.back-actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 8);margin-top:calc(var(--u) * 14)}
.pc-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;height:calc(var(--u) * 44);padding:0 calc(var(--u) * 10);border-radius:999px;
  border:1px solid rgba(31,28,25,.22);background:rgba(255,253,249,.9);color:var(--ink);font:600 calc(var(--u) * 11)/1.1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.pc-btn:hover{color:var(--ink);background:#fff;transform:translateY(-2px)}
.pc-btn--primary{grid-column:1/-1;background:var(--clay);border-color:var(--clay);color:#FFF9F3;box-shadow:0 12px 24px -14px rgba(180,88,60,.9)}
.pc-btn--primary:hover{background:var(--clay-dark);border-color:var(--clay-dark);color:#FFF9F3}

/* hint */
.hint{display:flex;align-items:center;gap:6px;margin:22px 0 0;font:600 22px/1 var(--hand);color:var(--clay);transform:rotate(-2deg);transition:opacity .6s var(--ease)}
.hint svg{width:38px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1) rotate(-8deg)}
.hint.is-quiet{opacity:.5}

/* ===== send panel ===== */
.send{width:100%;max-width:560px;margin:34px auto 0;padding:26px 22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.send-h{margin:10px 0 6px;font-family:var(--display);font-weight:500;font-size:clamp(32px,7vw,42px);line-height:1.04;letter-spacing:-.01em}
.send-h em{color:var(--clay)}
.send-lede{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.5}
.send-label{display:block;margin-bottom:8px;font:600 13px/1 var(--body);letter-spacing:.06em;color:var(--ink)}
.send-input{width:100%;min-height:52px;padding:0 18px;border-radius:14px;border:1px solid rgba(31,28,25,.22);background:#fff;color:var(--ink);font:500 18px/1 var(--body);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.send-input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 4px rgba(180,88,60,.16)}
.send-input::placeholder{color:#7C756C}
.preview{display:flex;align-items:baseline;gap:12px;margin:16px 0 12px;padding:14px 16px;border-radius:14px;background:var(--sand);
}
.preview-k{flex:none;font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#7E5F2B}
.send .eyebrow{color:#86652F} /* deeper gold: 4.5:1+ on the card */
.preview-hand{font:700 28px/1.1 var(--hand);color:var(--clay-dark);min-width:0;overflow-wrap:anywhere}
.linkbox{margin:0 0 16px;padding:12px 14px;border-radius:12px;border:1px dashed rgba(31,28,25,.22);font:500 14px/1.4 var(--body);color:var(--lagoon);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.send-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.send-actions .btn{width:100%;padding:0 14px}

.foot{position:relative;z-index:2;padding:12px 16px 22px;text-align:center}
.foot p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.foot .nw{white-space:nowrap}
.foot a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(106,99,91,.35);text-underline-offset:3px}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:20;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;
  background:var(--ink);color:var(--paper);font:500 14px/1.3 var(--body);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
  transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ===== landscape postcard (tablet / desktop) ===== */
@media (min-width:700px){
  .top{padding:22px 32px 0}
  .psst{font-size:28px;margin:4px 0 14px}
  .stage{
    --w:min(calc(100vw - 64px),940px,calc((100vh - 210px) * 1.5));
    --w:min(calc(100vw - 64px),940px,calc((100svh - 210px) * 1.5));
    width:max(560px,var(--w));aspect-ratio:3/2}
  .face{--u:calc(100cqw / 900);border-radius:calc(var(--u) * 18)}
  .pin--arr,.pin--pool{display:inline}
  .scrim{background:
    linear-gradient(180deg,rgba(23,57,63,0) 50%,rgba(23,57,63,.55) 64%,rgba(23,57,63,.9) 78%,#17393F 94%),
    linear-gradient(180deg,rgba(23,57,63,.1),rgba(23,57,63,0) 12%)}
  .pc-chip{left:calc(var(--u) * 28);top:calc(var(--u) * 26);padding:calc(var(--u) * 7) calc(var(--u) * 20) calc(var(--u) * 7) calc(var(--u) * 7);gap:calc(var(--u) * 10)}
  .pc-chip svg{width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:calc(var(--u) * 9)}
  .pc-chip .wordmark{font-size:calc(var(--u) * 26)}
  .stamp-wrap{right:calc(var(--u) * 28);top:calc(var(--u) * 24);width:calc(var(--u) * 98)}
  .postmark-wrap{right:calc(var(--u) * 70);top:calc(var(--u) * 34);width:calc(var(--u) * 214)}
  .front-copy{left:calc(var(--u) * 40);right:calc(var(--u) * 120);bottom:calc(var(--u) * 34)}
  .wish{font-size:calc(var(--u) * 40);margin-bottom:calc(var(--u) * 6)}
  .headline{font-size:calc(var(--u) * 64)}
  .sub{flex-direction:row;flex-wrap:wrap;gap:calc(var(--u) * 6) calc(var(--u) * 16);margin-top:calc(var(--u) * 16);font-size:calc(var(--u) * 13)}
  .sub-sig::before{content:"·";margin-right:calc(var(--u) * 16);color:var(--sky)}
  .flip-btn{width:calc(var(--u) * 50);height:calc(var(--u) * 50)}
  .flip-btn--front{right:calc(var(--u) * 28);bottom:calc(var(--u) * 34)}

  .back-inner{inset:calc(var(--u) * 12);border-radius:calc(var(--u) * 10);padding:calc(var(--u) * 24) calc(var(--u) * 36) calc(var(--u) * 30)}
  .pc-label{font-size:calc(var(--u) * 22)}
  .back-head{justify-content:center;position:relative}
  .back-head .flip-btn--back{position:absolute;right:0;top:50%;margin-top:calc(var(--u) * -25)}
  .back-body{flex-direction:row;align-items:stretch;justify-content:space-between;gap:calc(var(--u) * 40);margin-top:calc(var(--u) * 20)}
  .note{flex:1.45;align-self:center;font-size:calc(var(--u) * 33);line-height:1.18}
  .address{position:relative;right:auto;bottom:auto;width:auto;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--u) * 6);position:relative;padding-left:calc(var(--u) * 36);border-left:1px solid rgba(31,28,25,.16)}
  .address .addr{display:flex}
  .address .rubber{position:absolute;right:calc(var(--u) * 6);top:calc(var(--u) * 4);width:calc(var(--u) * 128)}
  .addr{margin:0;display:flex;align-items:baseline;gap:calc(var(--u) * 12);padding:0 0 calc(var(--u) * 6);border-bottom:1px solid rgba(23,57,63,.22)}
  .addr-k{flex:none;font:600 calc(var(--u) * 12)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#86652F}
  .addr-v{font:600 calc(var(--u) * 30)/1.25 var(--hand);color:#24414A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .back-actions{grid-template-columns:1.25fr 1fr 1fr;gap:calc(var(--u) * 12);margin-top:calc(var(--u) * 26)}
  .pc-btn{height:calc(var(--u) * 52);font-size:calc(var(--u) * 13)}
  .pc-btn--primary{grid-column:auto}
  .send{padding:34px 36px 30px;margin-top:44px}
}
@media (prefers-reduced-motion:reduce){.glare{display:none}.arrive{transform:rotate(-1.4deg)}}

/* guard: no sideways scroll on phones */
html,body{overflow-x:clip}