/* Motion for the map. One vocabulary: things arrive by coming into focus (blur → sharp),
   containers change shape instead of swapping, and nothing simply appears. Loads last. */
:root{
 /* Spring, damping .8: one soft 1.5% overshoot, then still. */
 --spring:linear(0,.0353,.1207,.2324,.3532,.4719,.5816,.6783,.7605,.8281,.8821,.924,.9554,.9782,.994,1.0044,1.0107,1.014,1.0151,1.0149,1.0137,1.0121,1.0103,1.0085,1.0068,1.0052,1.0039,1.0029,1);
 --ease-out-expo:cubic-bezier(.16,1,.3,1);
}
@keyframes focus-in{from{opacity:0;filter:blur(8px);translate:0 10px}}
@keyframes focus-out{to{opacity:0;filter:blur(6px);translate:0 -6px}}
@keyframes card-rise{from{translate:0 80px;filter:blur(12px)}}
@keyframes card-focus{0%{transform:translateX(-12px) scale(.93)}47%,57%{transform:none}100%{transform:translateX(12px) scale(.93)}}
@keyframes photo-drift{0%{translate:-9% 0}100%{translate:9% 0}}
@keyframes title-drift{0%{translate:56px 0;opacity:0;filter:blur(6px)}47%,57%{translate:0 0;opacity:1;filter:none}100%{translate:-56px 0;opacity:0;filter:blur(6px)}}
@keyframes label-in{from{opacity:0;filter:blur(6px);translate:-8px 0;scale:.92}}
@keyframes pin-pop{40%{scale:1.24}}
@keyframes photo-settle{from{scale:1.08;filter:blur(14px)}}
@keyframes shade-in{from{opacity:0}}
@keyframes shade-out{to{opacity:0}}

/* Entrance animations use backwards fill: a filled animation keeps a stacking context that can cover buttons.
   The planner X is pinned above everything in finish.css (z-index 7). */
/* Planner tabs: one pill that stretches toward the tab you picked, then catches up. */
body:is(.custom-journey,.winery-experience) .winery-panel .planner-tabs{position:relative;isolation:isolate}
body:is(.custom-journey,.winery-experience) .winery-panel .planner-tabs::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;right:calc(50% + 2px);border-radius:9px;background:var(--paper);box-shadow:0 1px 3px #12161a14,0 6px 14px #12161a0d;transition:left 480ms var(--spring),right 480ms var(--spring) 80ms}
body:is(.custom-journey,.winery-experience) .winery-panel[data-tab=discover] .planner-tabs::before{left:calc(50% + 2px);right:4px;transition:left 480ms var(--spring) 80ms,right 480ms var(--spring)}
body:is(.custom-journey,.winery-experience) .winery-panel .planner-tabs button[aria-selected]{background:none;box-shadow:none}
#start-route span,#route-kicker{display:inline-block}

@media(prefers-reduced-motion:no-preference){
 /* Switching tabs: the new section comes into focus. */
 body:is(.custom-journey,.winery-experience) :is(.winery-panel[data-tab=trip] :is(#trip-panel,.route-actions),.winery-panel[data-tab=discover] #discover-panel){animation:focus-in 520ms var(--ease-out-expo) backwards}

 /* Map pins: the stop you are on gets its name, sharpening in. */
 :is(.custom-journey,.winery-experience) .winery-pin.active .pin-name{animation:label-in 620ms var(--spring) backwards;transform-origin:left center}
 :is(.custom-journey,.winery-experience) .winery-pin.active .pin-num{animation:pin-pop 560ms var(--spring)}

 /* Loader: the camera pushes through it into the map. */
 #route-loader.is-done{opacity:0;filter:blur(10px);scale:1.08;transition:opacity 700ms var(--ease-out-expo),filter 700ms var(--ease-out-expo),scale 900ms var(--ease-out-expo)}

 @media(max-width:700px){
  /* Route header text is rebuilt on every route change: let it sharpen in. */
  .custom-journey .mobile-route-label>*{animation:focus-in 560ms var(--ease-out-expo) backwards}
  .custom-journey .mobile-route-label>small{animation-delay:60ms}

  /* Stop cards rise into place when the route is built. */
  .custom-journey .mobile-stop-card{animation:card-rise 900ms var(--ease-out-expo) backwards}
  .custom-journey .mobile-stop-card:nth-child(2){animation-delay:80ms}
  /* Scrolling the deck: the card in front is sharp and full size, neighbours fall back;
     the photo drifts slower than the card and the title faster, for depth. */
  @supports(animation-timeline:view()){
   .custom-journey .mobile-stop-card{animation:card-rise 900ms var(--ease-out-expo) backwards,card-focus linear both;animation-timeline:auto,view(inline);transform-origin:50% 100%}
   .custom-journey .mobile-stop-card:nth-child(2){animation-delay:80ms,0s}
   /* clip, not hidden: a hidden box is a scroll container and would capture the view timeline. */
   .custom-journey :is(.mobile-stop-card,.stop-card-photo){overflow:clip}
   .custom-journey .stop-card-photo img{scale:1.2;animation:photo-drift linear both;animation-timeline:view(inline)}
   .custom-journey .stop-photo-title{animation:title-drift linear both;animation-timeline:view(inline)}
  }

  /* Stop sheet: as it rises, the photo settles and each line comes into focus in order. */
  .custom-journey .mobile-stop-sheet .listing>:first-child{animation:photo-settle 900ms var(--ease-out-expo) backwards}
  .custom-journey .mobile-stop-sheet :is(.listing-head>*,.listing-body,.listing-footer,.more-trips>*){animation:focus-in 620ms var(--ease-out-expo) backwards}
  .custom-journey .mobile-stop-sheet .listing-head>:nth-child(1){animation-delay:70ms}
  .custom-journey .mobile-stop-sheet .listing-head>:nth-child(2){animation-delay:110ms}
  .custom-journey .mobile-stop-sheet .listing-head>:nth-child(3){animation-delay:150ms}
  .custom-journey .mobile-stop-sheet .listing-head>:nth-child(4){animation-delay:190ms}
  .custom-journey .mobile-stop-sheet :is(.listing-body,.listing-footer){animation-delay:230ms}
  .custom-journey .mobile-stop-sheet .more-trips>:nth-child(2){animation-delay:50ms}
  .custom-journey .mobile-stop-sheet .more-trips>:nth-child(3){animation-delay:90ms}
  .custom-journey .mobile-stop-sheet .more-trips>:nth-child(4){animation-delay:130ms}
  .custom-journey .mobile-stop-sheet .more-trips>:nth-child(5){animation-delay:170ms}
  .custom-journey .mobile-stop-sheet .more-trips>:nth-child(n+6){animation-delay:210ms}

  /* Planner: grows out of the header (clip-path, in wineries.js); its contents follow in. */
  .planner-takeover::backdrop{background:#12161a2e;animation:shade-in 420ms ease backwards}
  .planner-takeover.is-closing::backdrop{animation:shade-out 280ms ease forwards}
  .planner-takeover[open] .panel-head>*{animation:focus-in 600ms var(--ease-out-expo) 80ms backwards}
  .planner-takeover[open] .panel-head>:nth-child(2){animation-delay:120ms}
  .planner-takeover[open] .panel-head>:nth-child(3){animation-delay:160ms}
  .planner-takeover[open] .panel-head>:nth-child(4){animation-delay:200ms}
  .planner-takeover[open] .panel-head>:nth-child(n+5){animation-delay:240ms}
  .planner-takeover[open] .route-launch{animation:focus-in 600ms var(--ease-out-expo) 160ms backwards}
  /* Blur the parts, never their containers: a filter on .winery-panel or .panel-head would unpin the fixed Done bar or X. */
  .planner-takeover.is-closing :is(.panel-head>:not(.sheet-close),.panel-body,.route-launch){animation:focus-out 160ms ease-in forwards}
 }
}
@media(prefers-reduced-motion:reduce){
 body:is(.custom-journey,.winery-experience) .winery-panel .planner-tabs::before{transition:none}
}