/* ═══════════════════════════════════════════════════════════════════
   CABANA MOVE · arrival (golden hour)
   Only transform and opacity animate. The SVG scene is one layer; the
   car, the trail and the pins animate inside it with view-box
   transforms so they stay locked to the road at every aspect ratio.
   ═══════════════════════════════════════════════════════════════════ */
#ride-gate.rg2 {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; cursor: pointer;
  background: #ffa24a; contain: strict; transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
#ride-gate.rg2.rg2-gone { opacity: 0; pointer-events: none; }
.rg2-stage { position: absolute; inset: 0; }
.rg2-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rg2-scene * { transform-box: view-box; }

/* sky and sun */
.rg2-sun { transform-origin: 600px 604px; transform: translate3d(0, 96px, 0) scale(.86); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.rg2-on .rg2-sun { transform: translate3d(0, 0, 0) scale(1); }
.rg2-clouds { transform: translate3d(-24px, 0, 0); opacity: 0; transition: transform 3.6s linear, opacity 1s ease; }
.rg2-on .rg2-clouds { transform: translate3d(12px, 0, 0); opacity: 1; }
.rg2-birds { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 1s ease .5s, transform 3s ease-out .4s; }
.rg2-on .rg2-birds { opacity: 1; transform: translate3d(-26px, -8px, 0); }
.rg2-far { transform: translate3d(0, 26px, 0); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1) .15s; }
.rg2-near, .rg2-trees { transform: translate3d(0, 34px, 0); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1) .25s; }
.rg2-on .rg2-far, .rg2-on .rg2-near, .rg2-on .rg2-trees { transform: translate3d(0, 0, 0); }

/* the road runs toward the light */
.rg2-dash { animation: rg2-dash .55s linear infinite; animation-play-state: paused; }
.rg2-drive .rg2-dash { animation-play-state: running; }
@keyframes rg2-dash { to { stroke-dashoffset: 40; } }
.rg2-lamps circle { opacity: .9; }
.rg2-drive .rg2-lamps { animation: rg2-lamps 1.2s ease-in-out infinite alternate; }
@keyframes rg2-lamps { from { opacity: .55; } to { opacity: 1; } }

/* the car pulls away: up the road and smaller, as perspective demands */
.rg2-car { transform-origin: 600px 796px; transform: translate3d(0, 34px, 0); opacity: 0; transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s; }
.rg2-on .rg2-car { transform: translate3d(0, 0, 0); opacity: 1; }
.rg2-drive .rg2-car { animation: rg2-car 1.55s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes rg2-car {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(0, -186px, 0) scale(.12); opacity: 0; }
}
.rg2-trail { opacity: 0; transition: opacity .3s; }
.rg2-drive .rg2-trail { opacity: 1; animation: rg2-trail 1.45s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes rg2-trail { to { stroke-dashoffset: 0; } }

/* pins */
.rg2-pin { opacity: 0; }
.rg2-pin-a { transform-origin: 600px 812px; transform: translate3d(0, -40px, 0) scale(.6); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .3s .35s; }
.rg2-on .rg2-pin-a { transform: none; opacity: 1; }
.rg2-ping { transform-origin: 600px 812px; animation: rg2-ping 1.6s ease-out infinite; }
@keyframes rg2-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.rg2-pin-b { transform-origin: 600px 606px; transform: translate3d(0, -26px, 0) scale(.3); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.rg2-arrive .rg2-pin-b { transform: none; opacity: 1; }

/* the words */
.rg2-word {
  position: absolute; left: 0; right: 0; top: 17%; text-align: center; color: #fff; padding: 0 24px;
  font-family: 'Unbounded Variable', 'Unbounded', ui-sans-serif, system-ui, sans-serif;
}
.rg2-mark {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 22px; background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), 0 18px 40px -16px rgba(120, 30, 40, .55);
  display: grid; place-items: center; opacity: 0; transform: translate3d(0, 16px, 0) scale(.8);
  transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .2s, opacity .5s .2s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rg2-mark span {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #ffd166 45%, #ff7a1a 100%);
  box-shadow: 0 0 22px 6px rgba(255, 209, 102, .55);
}
.rg2-title {
  margin: 0; font-family: 'Unbounded Variable', 'Unbounded', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(34px, 11vw, 58px); line-height: 1; letter-spacing: -.045em;
  text-shadow: 0 10px 30px rgba(120, 30, 40, .35); opacity: 0; transform: translate3d(0, 22px, 0);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1) .35s, opacity .6s .35s;
}
.rg2-title b { font-weight: 800; color: #2b1236; }
.rg2-tag {
  margin: 14px 0 0; font: 600 15px/1.4 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  color: rgba(255, 255, 255, .92); letter-spacing: .01em; opacity: 0; transform: translate3d(0, 14px, 0);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1) .6s, opacity .6s .6s;
}
.rg2-tag span { color: #2b1236; font-weight: 800; }
.rg2-on .rg2-mark, .rg2-on .rg2-title, .rg2-on .rg2-tag { opacity: 1; transform: none; }

/* the flare becomes the page */
.rg2-flare {
  position: absolute; left: 50%; top: 72%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%;
  background: radial-gradient(closest-side, #fff7ee 0%, #fff7ee 62%, rgba(255, 247, 238, 0) 100%);
  transform: scale(.02); opacity: 0; pointer-events: none;
  transition: transform .7s cubic-bezier(.55, 0, .25, 1), opacity .25s;
}
.rg2-go .rg2-flare { transform: scale(2.2); opacity: 1; }
.rg2-go .rg2-word { opacity: 0; transform: translate3d(0, -18px, 0); transition: opacity .3s, transform .5s; }

.rg2-skip {
  position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px;
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 14px; border-radius: 99px; border: 0;
  background: rgba(43, 18, 54, .26); color: #fff; font: 700 13px/1 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', system-ui, sans-serif;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
}
.rg2-skip svg { width: 16px; height: 16px; }
.rg2-go .rg2-skip { opacity: 0; transition: opacity .2s; }

/* repeat visit: the composed frame, a beat, then the flare */
.rg2-brief .rg2-sun, .rg2-brief .rg2-far, .rg2-brief .rg2-near, .rg2-brief .rg2-trees,
.rg2-brief .rg2-mark, .rg2-brief .rg2-title, .rg2-brief .rg2-tag, .rg2-brief .rg2-pin-a, .rg2-brief .rg2-clouds, .rg2-brief .rg2-birds {
  transition-duration: .35s; transition-delay: 0s;
}
.rg2-brief .rg2-car { animation-duration: .7s; }
.rg2-brief .rg2-trail { animation-duration: .65s; }

/* stillness: no drive, no ping, a soft fade */
.rg2-still *, .rg2-still *::before, .rg2-still *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
.rg2-still .rg2-car { opacity: 1; transform: none; }
.rg2-still .rg2-pin-b { opacity: 1; transform: none; }
.rg2-still .rg2-flare { display: none; }
#ride-gate.rg2.rg2-still { transition: opacity .35s; }