/* Yanga v7 · the map searches by itself, and the town buttons are postage stamps. */

/* ------------------------------------------------------------ the camera */
.map-cam { position: relative; min-width: 0; overflow: hidden; border-radius: 14px; isolation: isolate; }
.map-cam .map { display: block; transform-origin: 0 0; transition: transform .95s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.map.is-zoomed .map-label { font-size: 8.5px; stroke-width: 2.6px; }
.map.is-zoomed .map-label--home { font-size: 10px; }
.map.is-zoomed .map-sub { font-size: 6px; }
.map.is-zoomed .map-route { stroke-width: 1.1; }
.map.is-zoomed .map-stamp { opacity: .25 !important; }

/* the found spot: two rings breathing out from a solid centre */
.map-found { pointer-events: none; opacity: 0; transition: opacity 300ms; }
.map-found.is-on { opacity: 1; }
.map-found circle { fill: none; stroke: var(--orange); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.map-found.is-on .map-found__a { animation: foundRing 1.8s ease-out infinite; }
.map-found.is-on .map-found__b { animation: foundRing 1.8s ease-out .9s infinite; }
.map-found__c { fill: var(--orange) !important; stroke: var(--bone) !important; stroke-width: 1 !important; }
@keyframes foundRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* the search reticle */
.map-ret { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; opacity: 0;
  transform: translate(50%, 50%); transition: transform .8s cubic-bezier(.65, 0, .25, 1), opacity 300ms; }
.map-ret.is-on { opacity: 1; }
.map-ret i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--bone); box-shadow: 0 0 0 1px rgb(0 0 0 / .25), inset 0 0 0 1px rgb(0 0 0 / .2); }
.map-ret i::before, .map-ret i::after { content: ""; position: absolute; background: var(--bone); }
.map-ret i::before { left: 50%; top: -9px; bottom: -9px; width: 2px; margin-left: -1px;
  -webkit-mask: linear-gradient(#000 0 13px, transparent 13px calc(100% - 13px), #000 calc(100% - 13px)); mask: linear-gradient(#000 0 13px, transparent 13px calc(100% - 13px), #000 calc(100% - 13px)); }
.map-ret i::after { top: 50%; left: -9px; right: -9px; height: 2px; margin-top: -1px;
  -webkit-mask: linear-gradient(90deg, #000 0 13px, transparent 13px calc(100% - 13px), #000 calc(100% - 13px)); mask: linear-gradient(90deg, #000 0 13px, transparent 13px calc(100% - 13px), #000 calc(100% - 13px)); }
.map-ret.is-hunting i { animation: hunt 700ms ease-in-out infinite alternate; border-color: var(--orange); }
@keyframes hunt { from { transform: scale(1) rotate(0); } to { transform: scale(.82) rotate(45deg); } }

/* the film bubble that opens on the spot */
.map-bubble { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(138px, 13vw, 176px); --tail: 50%;
  padding: 6px; border-radius: 12px; background: var(--bone); color: var(--ink);
  box-shadow: 0 18px 40px -10px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .08);
  opacity: 0; scale: .6; transform-origin: 0 var(--tail); transition: opacity 260ms, scale 420ms cubic-bezier(.2, 1.2, .3, 1); }
.map-bubble.is-on { opacity: 1; scale: 1; }
.map-bubble[hidden] { display: block; visibility: hidden; }
.map-bubble.is-on[hidden] { visibility: visible; }
.map-bubble::before { content: ""; position: absolute; left: -9px; top: calc(var(--tail) - 9px); border: 9px solid transparent; border-left: 0; border-right-color: var(--bone); }
.map-bubble__film { position: relative; aspect-ratio: 9 / 13; overflow: hidden; border-radius: 8px; background: #10201a; }
.map-bubble__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-bubble__film::after { content: "On the spot"; position: absolute; left: 6px; top: 6px; padding: .18rem .45rem; border-radius: 99px;
  background: rgb(21 18 15 / .72); color: var(--bone); font: 700 .62rem/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; }
.map-bubble__bar { display: grid; gap: 5px; padding-top: 6px; }
.map-bubble__bar b { grid-column: 1 / -1; font: 400 1rem/1.1 var(--sc-font-display); color: var(--green); padding: 0 2px; }
.map-bubble__btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 34px; padding: 0 .4rem;
  border: 1px solid color-mix(in oklab, var(--green) 30%, transparent); border-radius: 8px; background: transparent; color: var(--green);
  font: 700 .74rem/1 var(--sc-font-text); cursor: pointer; }
.map-bubble__btn svg { width: 16px; height: 16px; flex: none; }
.map-bubble__btn:hover, .map-bubble__btn[aria-pressed="true"] { background: var(--green); color: var(--bone); }
.map-bubble__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* what the search is doing, in plain words */
.map-searching { position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0; max-width: calc(100% - 24px);
  padding: .5rem .8rem .5rem 2.1rem; border-radius: 99px; background: rgb(21 18 15 / .66); color: var(--bone);
  font: 500 .86rem/1.25 var(--sc-font-text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.map-searching:empty { display: none; }
.map-searching::before { content: ""; position: absolute; left: .8rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.42rem;
  border: 2px solid var(--cognac-lit); border-radius: 50%; }
.map-searching::after { content: ""; position: absolute; left: 1.42rem; top: calc(50% + .2rem); width: .36rem; height: 2px; background: var(--cognac-lit); rotate: 45deg; }
.map-searching b { color: var(--cognac-lit); }
.map-searching__q::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--orange); animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ------------------------------------------------------------ the stamps */
.stamps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-top: .2rem; }
.stamps-hint { font-size: .86rem; color: var(--on-green-2); }
.stamps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .55rem; padding: .3rem .1rem .5rem; }
.pstamp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 7px 7px 6px; border: 0; cursor: pointer; text-align: left;
  background: var(--bone); color: var(--ink); rotate: -2deg; transition: rotate 300ms, translate 300ms cubic-bezier(.2, 1.4, .4, 1), filter 300ms;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35));
  /* the perforated edge */
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 50% 50%, transparent 2.6px, #000 3px) -4px -4px / 8px 8px round;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 50% 50%, transparent 2.6px, #000 3px) -4px -4px / 8px 8px round; }
.pstamp:nth-child(even) { rotate: 1.6deg; }
.pstamp:nth-child(3n) { rotate: -.8deg; }
.pstamp:hover { rotate: 0deg; translate: 0 -4px; }
.pstamp:focus-visible { outline: none; filter: drop-shadow(0 0 0 var(--orange)) drop-shadow(0 0 3px var(--orange)); }
.pstamp__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; outline: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); }
.pstamp__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.pstamp__name { min-width: 0; font: 400 clamp(.7rem, .55rem + .25vw, .84rem)/1.05 var(--sc-font-display); color: var(--green); text-align: center; letter-spacing: -.01em; }
.pstamp__val { position: absolute; right: 9px; top: 9px; padding: .12rem .28rem; background: var(--bone); color: var(--cognac);
  font: 800 .58rem/1 var(--sc-font-text); letter-spacing: .06em; }
/* the postmark lands when the map reaches that town */
.pstamp__mark { position: absolute; left: 50%; top: 42%; width: 78%; aspect-ratio: 1; translate: -50% -50%; scale: 1.6; rotate: -18deg; opacity: 0;
  display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange);
  font: 800 .5rem/1 var(--sc-font-text); letter-spacing: .1em; text-align: center; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 4px var(--orange); background: rgb(243 236 223 / .22);
  transition: opacity 200ms, scale 360ms cubic-bezier(.2, 1.4, .4, 1); }
.pstamp.is-on { rotate: 0deg; translate: 0 -6px; }
.pstamp.is-on .pstamp__mark { opacity: 1; scale: 1; }
.pstamp.is-on .pstamp__img img { filter: saturate(1.1); }
.pstamp.is-on .pstamp__name { color: var(--orange); }

/* desktop pinned scene: keep the copy column within one screen */
@media (min-width: 901px) {
  .juris__copy { gap: .8rem; }
  .juris .pin { margin-top: .1rem; }
}
@media (max-width: 1250px) and (min-width: 901px) {
  .stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pstamp__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
  .map-cam { border-radius: 10px; }
  .stamps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .2rem .7rem; }
  .pstamp { scroll-snap-align: start; }
  .juris__copy .stamps-head .label { display: inline; }
  .map-searching { font-size: .8rem; left: 8px; top: 8px; bottom: auto; }
  .map-bubble { width: 132px; }
  .map-bubble__film { aspect-ratio: 9 / 12; }
}

@media (prefers-reduced-motion: reduce) {
  .map-cam .map, .map-ret, .map-bubble, .pstamp, .pstamp__mark { transition: none; }
  .map-found.is-on circle, .map-ret.is-hunting i, .map-searching__q::after { animation: none; }
}