/* ============================================================
   CUVÉE — "The Wine Regions"
   The painted map and its camera. Everything is scoped to .wregions so this
   file can never reach the rest of the site.
   Fallback order matters: with no JS the painting sits still, fit to the
   screen, and every pin is tappable. .wr-live is only added once the camera
   has measured something real.
   ============================================================ */

.wregions{position:relative;width:100%;height:100%;--wr-depth:0;--wr-drift:0}
/* The painting floats on the page's own linen when a stop asks to see all of
   it — the letterbox is the point, not a bug. */

.wr-stage{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:var(--radius);
  background:var(--bg);
  box-shadow:0 30px 90px -50px rgba(59,50,44,.6);
}

/* ---------- the painting ---------- */

.wr-canvas{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  will-change:transform;
  --wr-unzoom:1;
}
.wr-map{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}

/* Without the camera: show the whole painting, centred, no cropping. */
.wregions:not(.wr-live) .wr-canvas{position:relative;width:100%!important;height:auto!important;transform:none!important}
.wregions:not(.wr-live) .wr-stage{display:grid;place-items:center;overflow:auto}

/* ---------- pins ---------- */

.wr-pin{
  position:absolute;translate:-50% -50%;
  width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  scale:var(--wr-unzoom);            /* stays the same size at every zoom */
  transform-origin:center;
  z-index:3;
}
.wr-ring{
  display:block;width:100%;height:100%;border-radius:50%;
  border:2.5px solid var(--wine);
  background:rgba(255,253,248,.62);
  box-shadow:0 2px 10px -3px rgba(59,50,44,.55);
  transition:background .3s ease,border-color .3s ease;
}
.wr-ring::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1.5px solid var(--wine);opacity:0;
  animation:wr-ping 3.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes wr-ping{
  0%{transform:scale(.72);opacity:.55}
  70%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
.wr-pin.on .wr-ring{background:var(--wine);border-color:#FFFDF8}
.wr-pin:focus-visible .wr-ring{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- weather ---------- */

/* Two mist bands drifting at different speeds. This is the whole depth trick:
   a flat painting behind moving air reads as a place, not a picture. */
.wr-mist{
  position:absolute;inset:-10% -30%;pointer-events:none;z-index:2;
  background-repeat:repeat-x;background-size:auto 100%;
  opacity:calc(.20 + var(--wr-depth) * .30);
  mix-blend-mode:screen;
  transition:opacity .6s ease;
}
.wr-mist-far{
  background-image:radial-gradient(60% 40% at 20% 55%,rgba(255,255,255,.85),transparent 70%),
                   radial-gradient(45% 34% at 62% 40%,rgba(255,255,255,.7),transparent 72%),
                   radial-gradient(52% 30% at 88% 62%,rgba(255,255,255,.66),transparent 70%);
  transform:translate3d(calc(var(--wr-drift) * -0.55%),0,0) scale(1.04);
  filter:blur(9px);
}
.wr-mist-near{
  background-image:radial-gradient(48% 30% at 12% 76%,rgba(255,255,255,.9),transparent 68%),
                   radial-gradient(40% 26% at 74% 22%,rgba(255,255,255,.8),transparent 70%);
  transform:translate3d(calc(var(--wr-drift) * 1.15%),0,0) scale(1.08);
  filter:blur(16px);
  opacity:calc(.14 + var(--wr-depth) * .26);
}

/* A soft painted edge so the map never ends on a hard rectangle. */
.wr-edge{
  position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;
  box-shadow:inset 0 0 90px 30px rgba(233,222,207,.55),inset 0 0 22px rgba(59,50,44,.10);
}

/* ---------- the words ---------- */

.wr-caption{
  position:absolute;left:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,30px);
  z-index:6;max-width:min(30rem,74%);
  background:linear-gradient(180deg,rgba(251,249,242,.90),rgba(251,249,242,.97));
  border:1px solid var(--sand);border-radius:var(--radius);
  padding:clamp(12px,2vw,18px) clamp(14px,2.2vw,22px);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  transition:opacity .28s ease,transform .28s ease;
}
.wr-caption.is-swapping{opacity:0;transform:translateY(6px)}
.wr-kicker{margin:0 0 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.wr-title{margin:0 0 6px;font-size:clamp(1.35rem,1.1rem + 1.4vw,2.1rem)}
.wr-note{margin:0;color:var(--ink-2);font-size:clamp(.94rem,.9rem + .2vw,1.05rem);line-height:1.45}
.wr-open{
  margin-top:10px;font-family:var(--font);font-size:.95rem;cursor:pointer;
  background:var(--wine);color:#FFFDF8;border:0;border-radius:999px;padding:7px 16px;
}
.wr-open:hover{background:var(--wine-2)}

/* ---------- contents rail ---------- */

.wr-rail{
  position:absolute;right:clamp(10px,1.6vw,20px);top:50%;translate:0 -50%;
  z-index:6;margin:0;padding:0;list-style:none;display:grid;gap:2px;
}
.wr-rail button{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;cursor:pointer;padding:3px 4px;
  font-family:var(--font);font-size:.8rem;color:transparent;
  transition:color .25s ease;
}
.wr-rail button span{
  width:16px;height:2px;background:var(--muted);opacity:.5;border-radius:2px;
  transition:width .25s ease,background .25s ease,opacity .25s ease;flex:none;
}
.wr-rail li.on button span{width:28px;background:var(--wine);opacity:1}
.wr-rail li.on button{color:var(--ink)}
.wr-stage:hover .wr-rail button,.wr-rail button:focus-visible{color:var(--ink-2)}

/* ---------- phones ---------- */

/* ---------- phones ----------
   A 2.4:1 painting inside a portrait phone is the whole problem. Rather than
   crop it to a keyhole, the map becomes a window of sane proportions and the
   words move underneath it, where there is room to read them. */
@media (max-width:820px){
  .wregions{display:grid;grid-template-rows:auto auto;gap:12px;align-content:center}
  .wr-stage{height:auto;aspect-ratio:4/5;max-height:64vh}
  .wr-caption{
    position:static;max-width:none;backdrop-filter:none;
    padding:12px 14px;align-self:start;
  }
  .wr-note{font-size:.92rem;line-height:1.42}
  .wr-rail{display:none}            /* the caption is the wayfinding on a phone */
  .wr-pin{width:30px;height:30px}
}

@media (max-width:820px) and (orientation:landscape){
  .wregions{grid-template-rows:minmax(0,1fr);}
  .wr-stage{aspect-ratio:auto;height:100%;max-height:none}
  .wr-caption{position:absolute;left:12px;right:auto;bottom:12px;max-width:min(26rem,66%)}
}

/* ---------- someone who asked for less movement ---------- */

@media (prefers-reduced-motion: reduce){
  .wr-ring::after{animation:none}
  .wr-canvas{transition:none}
  .wr-mist{display:none}
}