/* The reconstruction: scattered photos become a trip on a map. One SVG, so it
   scales as a unit. The base styles below are the FINISHED picture (card over
   map, dots, route, numbered stops), so with no animation (reduced motion, or
   before script runs) that is what shows. The .play rules replay the story.
   Loaded after style.css. No external requests. */
.recon-wrap{width:min(100%,540px);margin:0 auto;text-align:center}
.recon{display:block;width:100%;height:auto;border-radius:28px;box-shadow:var(--shadow-lg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.recon text{font-family:var(--sans)}
.recon .tag{font:600 9.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.03em;fill:#6A6A6A}
.recon .sea{font:700 10px var(--sans);letter-spacing:.22em;fill:#9DB6C7}
.recon .lab{font:700 19px var(--sans);fill:#222;paint-order:stroke;stroke:#FFFDF8;stroke-width:4px;stroke-linejoin:round}
.recon .lab2{font:500 13px var(--sans);fill:#555;paint-order:stroke;stroke:#FFFDF8;stroke-width:3.5px;stroke-linejoin:round}
.recon .num{font:700 14px var(--sans);fill:#fff}
.recon .c-title{font:600 26px var(--serif);fill:#222;letter-spacing:-.01em}
.recon .c-sub{font:500 16px var(--sans);fill:#6A6A6A}
.recon .c-chip{font:700 13px var(--sans);fill:#2D5A44}
.recon .route-case{fill:none;stroke:#FFFDF8;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;opacity:.9}
.recon .route{fill:none;stroke:var(--coral);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.recon .dot{fill:var(--coral);stroke:#fff;stroke-width:1.6;transform-box:fill-box;transform-origin:center}
.recon .t-fly{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(0deg) scale(.06)}
.recon .stop,.recon .card,.recon .chip,.recon .map{transform-box:fill-box;transform-origin:center}
.replay{margin-top:14px;background:none;border:1px solid var(--paper-line);color:var(--muted);font:600 14px var(--sans);padding:6px 16px;border-radius:999px;cursor:pointer}
.replay:hover{color:var(--ink);background:#fff}

.recon.play .t-fly{animation:t-fly 1.15s cubic-bezier(.55,0,.25,1) both;animation-delay:calc(2.05s + var(--i)*.07s)}
.recon.play .t-in{animation:t-in .75s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(.15s + var(--i)*.11s)}
.recon.play .map{animation:map-in .9s ease-out both;animation-delay:1.75s}
.recon.play .dot{animation:dot-in .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(3s + var(--i)*.06s)}
.recon.play .route-case,.recon.play .route{animation:draw 1.7s cubic-bezier(.45,0,.3,1) both;animation-delay:3.3s}
.recon.play .stop{animation:pop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--s)}
.recon.play .card{animation:card-in .85s cubic-bezier(.2,.9,.3,1.08) both;animation-delay:5.1s}
.recon.play .chip{animation:pop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:5.85s}
@keyframes t-in{from{opacity:0;transform:translateY(-22px) scale(1.12)}to{opacity:1;transform:none}}
@keyframes t-fly{from{opacity:1;transform:translate(var(--px),var(--py)) rotate(var(--pr)) scale(1)}60%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(0deg) scale(.06)}}
@keyframes map-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes dot-in{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.replay{display:none}}

/* The year recap row: the shared picture tucked over the phone's corner */
.tile.year{position:relative}
.year .share{position:absolute;right:5%;bottom:7%;width:36%;max-width:150px;border-radius:12px;box-shadow:var(--shadow-lg);transform:rotate(4deg);border:3px solid #fff}
@media (max-width:420px){.year .share{width:34%;right:2%}}

/* How it works: a tiny picture of each stage */
.card .ill{display:block;width:100%;height:auto;margin:0 0 18px;border-radius:var(--r3);background:rgba(255,255,255,.62)}
.card .ill text{font-family:var(--sans)}

/* Relive extras: memory, year and widget as three compact cards */
.trio{display:grid;gap:20px}
.mini{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r4);padding:14px 14px 26px}
.mini .tile{border-radius:var(--r3);padding:22px 12px;display:flex;justify-content:center;margin-bottom:20px}
.mini .phone{width:min(190px,56vw);border-width:7px;border-radius:32px}
.mini .phone img{border-radius:25px}
.mini h3{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-.01em;margin:0 10px 8px}
.mini p{margin:0 10px;font-size:16px;color:#444}
.mini .year .share{width:38%}
@media (min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}