/* A small collection of future-trip keepsakes. Coordinates belong to the scene,
   so the photo, ticket and note keep their relationship at every screen size. */
.hero-art.trip-collage{display:flex;flex-direction:column;justify-content:center;padding:38px 26px 28px 16px;min-width:0;align-self:stretch;gap:0}
.collage-scene{position:relative;width:100%;max-width:500px;aspect-ratio:1/1.04;isolation:isolate;--photo-angle:-8deg;--ticket-angle:7deg;--note-angle:5deg;--drag-x:0px;--drag-y:0px;--drag-angle:0deg}
.collage-scene[data-destination=uk]{--photo-angle:-5deg;--ticket-angle:10deg;--note-angle:-4deg}
.collage-scene[data-destination=jp]{--photo-angle:-9deg;--ticket-angle:4deg;--note-angle:7deg}
.collage-scene[data-destination=kr]{--photo-angle:-6deg;--ticket-angle:9deg;--note-angle:-3deg}
.collage-underlay{position:absolute;top:18%;left:17%;width:58%;height:66%;background:#f6f3e5;transform:rotate(3deg);box-shadow:0 5px 10px #1313130c;pointer-events:none}
.collage-photo{position:absolute;left:12%;top:12%;width:64%;height:74%;margin:0;padding:10px 10px 0;background:#fff;color:var(--ink);box-shadow:0 20px 26px -17px #17200765;transform:translate(var(--drag-x),var(--drag-y)) rotate(calc(var(--photo-angle) + var(--drag-angle)));z-index:2;will-change:transform;transition:transform 320ms cubic-bezier(.2,.8,.25,1)}
.collage-photo-image{width:100%;height:calc(100% - 57px);object-fit:cover;object-position:center;display:block;pointer-events:none;user-select:none}
.collage-photo figcaption{height:57px;display:flex;align-items:center;padding:6px 24% 6px 5px;font-size:15px;line-height:1.15;font-weight:600;font-style:italic;letter-spacing:-.025em;white-space:pre-line}
.collage-touch{position:absolute;inset:0;border:0;background:transparent;touch-action:pan-y;cursor:grab;border-radius:0;user-select:none;-webkit-user-select:none}
.collage-touch:active{cursor:grabbing}.collage-touch:focus-visible{outline-offset:7px}
.collage-ticket{position:absolute;right:0;top:6%;width:53%;padding:19px 21px 16px;border-radius:12px;background:var(--ink);color:#fff;transform:rotate(var(--ticket-angle));box-shadow:0 12px 18px -12px #13131370;z-index:4;pointer-events:none}
.collage-ticket:before,.collage-ticket:after{content:'';position:absolute;top:68%;width:13px;height:13px;border-radius:50%;background:var(--lime)}
.collage-ticket:before{left:-7px}.collage-ticket:after{right:-7px}
.collage-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.08em;color:var(--lime)}
.collage-ticket-top img{width:42px;height:auto;filter:invert(1);mix-blend-mode:screen}
.collage-ticket strong{font-size:34px;letter-spacing:-.04em;line-height:1.1;display:block;font-weight:800;margin:10px 0 15px;white-space:nowrap}
.collage-ticket-bottom{border-top:1px dashed #ffffff55;padding-top:10px;font-size:11px;line-height:1.3;display:flex;gap:10px;justify-content:space-between}
.collage-ticket-bottom>span:last-child{color:#b8b8ac;white-space:nowrap}
.collage-note{position:absolute;right:0;bottom:8%;width:44%;padding:19px 19px 22px;background:#fff9df;color:var(--ink);box-shadow:0 9px 17px -10px #13131340;transform:rotate(var(--note-angle));z-index:5;pointer-events:none}
.collage-note:before{content:'';position:absolute;width:57px;height:17px;top:-8px;left:calc(50% - 28px);background:#f4edbeaa;transform:rotate(-5deg)}
.collage-note>span{font-size:8px;letter-spacing:.1em;display:block;color:#65634e;margin-bottom:13px}
.collage-note>p{font-size:21px;font-weight:600;line-height:1.12;letter-spacing:-.04em;white-space:pre-line}
.collage-stamp{position:absolute;left:-1%;top:2%;width:104px;height:104px;display:flex;align-items:center;justify-content:center;border:2px solid var(--blue);border-radius:50%;color:var(--blue);transform:rotate(-15deg);font-size:12px;font-weight:800;line-height:1.08;letter-spacing:-.02em;text-align:center;z-index:6;pointer-events:none}
.collage-stamp:after{content:'';position:absolute;inset:5px;border:1px solid currentColor;border-radius:50%;opacity:.5}
.collage-stamp img{width:28px;height:28px;object-fit:contain;margin-bottom:5px;mix-blend-mode:multiply}
.collage-stamp>span{display:flex;flex-direction:column;align-items:center}
.collage-controls{width:100%;max-width:460px;margin-top:13px;position:relative;z-index:8}
.collage-stepper{display:flex;align-items:center;justify-content:center;gap:17px}
.collage-arrow{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;border:1px solid #13131345;border-radius:50%;background:transparent;font-size:23px;line-height:1;transition:background .2s,transform .2s}
.collage-arrow:hover{background:#ffffff55;transform:translateX(-2px)}.collage-arrow:last-child:hover{transform:translateX(2px)}
.collage-position{font-size:11px;letter-spacing:.08em;min-width:55px;text-align:center;font-variant-numeric:tabular-nums}
.collage-helper{font-size:10px;color:#465022;margin:9px 0 13px;text-align:center;line-height:1.4}
.collage-destinations{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.collage-destinations button{font-size:11px;line-height:1.2;min-height:35px;background:transparent;border:1px solid #13131338;border-radius:7px;padding:8px 10px;transition:background .2s,color .2s}
.collage-destinations button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.collage-destinations button:hover{border-color:var(--ink)}
.collage-about{font-size:11px;line-height:1.4;text-align:center;display:block;width:fit-content;margin:14px auto 0;border-bottom:1px solid #13131350;padding-bottom:2px}
.collage-about:hover{color:var(--blue);border-color:var(--blue)}
.collage-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.trip-collage.is-dragging .collage-photo{transition:none}
.trip-collage.is-dragging .collage-breathe,.trip-collage.is-changing .collage-breathe,.trip-collage.motion-paused .collage-breathe{animation-play-state:paused}
.collage-breathe{position:absolute;inset:0}
@media(prefers-reduced-motion:no-preference){.collage-breathe{animation:collage-breathe 10s ease-in-out infinite}}
@keyframes collage-breathe{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media(min-width:1500px){.hero-art.trip-collage{padding-right:36px;padding-left:20px}.collage-ticket strong{font-size:37px}.collage-note>p{font-size:23px}}
@media(max-width:1150px) and (min-width:801px){.hero-art.trip-collage{padding:38px 21px 25px 10px}.collage-photo{padding:8px 8px 0}.collage-photo figcaption{font-size:13px;height:53px}.collage-photo-image{height:calc(100% - 53px)}.collage-ticket{padding:15px}.collage-ticket strong{font-size:29px;margin:8px 0 13px}.collage-ticket-top{font-size:8px}.collage-ticket-bottom{font-size:10px}.collage-note{padding:17px 15px}.collage-note>p{font-size:18px}.collage-stamp{width:83px;height:83px;font-size:10px}.collage-stamp img{width:23px;height:23px}.collage-destinations button{padding:8px;font-size:10px}}
@media(max-width:800px) and (min-width:651px){.hero-art.trip-collage{padding:25px 17px 22px 7px}.collage-scene{aspect-ratio:1/1.18}.collage-photo{left:8%;top:17%;width:70%;height:66%;padding:7px 7px 0}.collage-photo-image{height:calc(100% - 51px)}.collage-photo figcaption{height:51px;font-size:12px;padding-inline:2px}.collage-ticket{top:10%;width:60%;padding:12px}.collage-ticket-top{font-size:7px}.collage-ticket-top img{width:30px}.collage-ticket strong{font-size:25px;margin:7px 0 11px}.collage-ticket-bottom{font-size:9px;padding-top:8px}.collage-note{padding:15px 12px;bottom:7%;width:48%}.collage-note>span{font-size:7px;margin-bottom:9px}.collage-note>p{font-size:16px}.collage-stamp{width:70px;height:70px;font-size:8px;bottom:4%}.collage-stamp img{width:20px;height:20px}.collage-helper{font-size:9px}.collage-destinations button{font-size:9px;min-height:33px;padding:7px 8px}.collage-controls{margin-top:8px}.collage-about{font-size:10px}}
@media(max-width:650px){.hero-art.trip-collage{height:auto;min-height:0;padding:12px 28px 27px;margin-top:7px;gap:0}.collage-scene{max-width:380px;aspect-ratio:1/1.05}.collage-photo{padding:8px 8px 0}.collage-photo figcaption{font-size:12px;height:62px}.collage-photo-image{height:calc(100% - 62px)}.collage-ticket{padding:16px}.collage-ticket-top{font-size:8px}.collage-ticket-top img{width:34px}.collage-ticket strong{font-size:29px;margin:8px 0 13px}.collage-ticket-bottom{font-size:10px}.collage-note{padding:17px}.collage-note>span{font-size:7px;margin-bottom:10px}.collage-note>p{font-size:18px}.collage-stamp{width:75px;height:75px;font-size:9px;top:0;left:-2%}.collage-stamp img{width:23px;height:23px}.collage-controls{margin-top:15px}.collage-arrow{width:44px;height:44px}.collage-destinations button{min-height:40px;font-size:11px;padding:9px 10px}.collage-helper{font-size:10px;margin-bottom:14px}.collage-about{font-size:12px}}
@media(max-width:380px){.hero-art.trip-collage{padding:10px 22px 25px}.collage-photo figcaption{font-size:11px;height:59px}.collage-photo-image{height:calc(100% - 59px)}.collage-ticket{padding:13px}.collage-ticket strong{font-size:24px;margin:7px 0 11px}.collage-ticket-top{font-size:7px;letter-spacing:.04em}.collage-ticket-top img{width:28px}.collage-ticket-bottom{font-size:9px;padding-top:8px}.collage-note{padding:15px 12px}.collage-note>p{font-size:17px}.collage-stamp{width:73px;height:73px;font-size:8px}.collage-stamp img{width:19px;height:19px}.collage-destinations{gap:5px}.collage-destinations button{font-size:10px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.trip-collage .collage-breathe{animation:none}.trip-collage .collage-photo,.trip-collage button{transition:none}}