/* SPECTRA tap-to-pour v1 · bottle animation + pour viewer. Uses the approved site tokens. */

/* ---------- Bottle (tap target) ---------- */
.pour-bottle{position:relative;display:block;width:100%;aspect-ratio:2/3;padding:0;margin:0;border:0;background:none;
  cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.pour-bottle:focus-visible{outline:2px solid #80878F;outline-offset:4px;border-radius:18px}
.pour-bottle img{position:absolute;display:block;max-width:none;pointer-events:none;-webkit-user-select:none;user-select:none}
.pour-bottle__body{inset:0;width:100%;height:100%;transform-origin:50% 86%}
.pour-bottle__cap{left:30.469%;top:.521%;width:39.16%;height:auto;transform-origin:50% 70%}
.pour-bottle__hint{position:absolute;inset-inline-end:4%;bottom:4%;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:#B4BAC1;border:1px solid #80878F;color:#1D1F22;
  box-sizing:border-box;transition:transform .2s,opacity .2s}
.pour-bottle__hint svg{width:18px;height:18px}
.pour-bottle:active .pour-bottle__hint{transform:scale(.95)}
.pour-bottle[disabled]{cursor:default}
.pour-bottle[disabled] .pour-bottle__hint{display:none}
.pour-bottle.is-open,.pour-bottle.is-closing{z-index:2}
.pour-bottle.is-open .pour-bottle__hint,.pour-bottle.is-closing .pour-bottle__hint{opacity:0}
@media (hover:hover){.pour-bottle:not([disabled]):hover .pour-bottle__cap{animation:pb-hint .6s ease}}
/* tap: the cap unscrews and lifts off, then the bottle tilts towards the pour */
.pour-bottle.is-open .pour-bottle__cap{animation:pb-cap .95s cubic-bezier(.3,.6,.3,1) forwards}
.pour-bottle.is-open .pour-bottle__body{animation:pb-tilt .6s cubic-bezier(.4,0,.2,1) .45s both}
/* close: the same moves in reverse (bottle stands up, cap screws back on) */
.pour-bottle.is-closing .pour-bottle__cap{animation:pb-cap .6s cubic-bezier(.3,.6,.3,1) .15s reverse both}
.pour-bottle.is-closing .pour-bottle__body{animation:pb-tilt .45s cubic-bezier(.4,0,.2,1) reverse both}
@keyframes pb-hint{0%,100%{transform:none}35%{transform:rotate(-5deg)}70%{transform:rotate(4deg)}}
@keyframes pb-cap{0%{transform:none;opacity:1}15%{transform:rotate(-8deg)}30%{transform:translateY(-6%) rotate(7deg)}
  45%{transform:translateY(-14%) rotate(-6deg)}60%{transform:translateY(-45%) rotate(3deg);opacity:1}
  100%{transform:translateY(-170%) rotate(16deg);opacity:0}}
@keyframes pb-tilt{0%{transform:none}100%{transform:translate(-5%,-3%) rotate(-26deg)}}

/* ---------- Pour viewer (native <dialog>, built by pour-viewer.js) ---------- */
.pv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;box-sizing:border-box;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  border:0;background:transparent;color:#F5F5F7;overflow:auto}
.pv[open]{display:grid;place-items:center}
.pv::backdrop{background:rgba(29,31,34,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pv-panel{position:relative;display:grid;grid-template-columns:auto minmax(0,300px);gap:28px;align-items:center;
  padding:20px;padding-inline-end:28px;background:#272A2E;border-radius:18px;max-width:100%;box-sizing:border-box;
  animation:pv-in .28s cubic-bezier(.2,.7,.2,1)}
.pv-media{position:relative;height:min(78vh,720px);aspect-ratio:9/16;max-width:100%;border-radius:18px;overflow:hidden;background:#1D1F22}
.pv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-tag{position:absolute;top:12px;inset-inline-start:12px;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1.4;
  color:#F5F5F7;background:rgba(29,31,34,.6)}
.pv-play,.pv-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;font:inherit;box-sizing:border-box}
.pv-play{position:absolute;bottom:12px;inset-inline-end:12px;color:#1D1F22;background:#B4BAC1;border:1px solid #80878F}
.pv-close{position:absolute;top:12px;inset-inline-end:12px;z-index:1;color:#F5F5F7;background:rgba(29,31,34,.6);border:1px solid rgba(255,255,255,.22)}
.pv-close svg{width:20px;height:20px}
.pv-play:active,.pv-close:active,.pv-chip:active{transform:scale(.95)}
.pv-play:focus-visible,.pv-close:focus-visible,.pv-chip:focus-visible{outline:2px solid #C8CDD3;outline-offset:3px}
.pv-i{display:none;width:20px;height:20px}
.pv-play[data-state=play] .pv-i-play,.pv-play[data-state=pause] .pv-i-pause,.pv-play[data-state=replay] .pv-i-replay{display:block}
.pv-info{display:grid;gap:12px;min-width:0;padding-block:8px}
.pv-eyebrow{margin:0;font-size:12px;letter-spacing:.08em;color:#C8CDD3}
.pv-title{margin:0;font-size:28px;line-height:1.15;font-weight:700}
.pv-shade{margin:0;display:flex;align-items:center;gap:8px;font-size:17px}
.pv-dot{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.pv-chips{display:flex;flex-wrap:wrap;gap:8px}
.pv-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.22);background:transparent;color:#F5F5F7;font:inherit;font-size:14px;cursor:pointer}
.pv-chip[aria-pressed=true]{background:#B4BAC1;border-color:#80878F;color:#1D1F22}
.pv-chip i{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.pv-note{margin:0;font-size:12px;line-height:1.5;color:#A9AFB6}
@keyframes pv-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:719px){
  .pv-panel{grid-template-columns:minmax(0,1fr);gap:14px;padding:12px;padding-inline-end:12px}
  .pv-media{height:auto;width:min(100%,calc(64vh * 9 / 16));margin-inline:auto}
  .pv-info{padding:0 4px 4px}
  .pv-title{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .pour-bottle .pour-bottle__cap,.pour-bottle .pour-bottle__body,.pv-panel{animation:none!important}
}
html:has(.pv[open]){overflow:hidden}