/* rio-motion 1.0.0 — styles for rio-motion.js. Safe without JS: nothing here hides content
   unless scripting is on, and a timed fallback shows everything if the script never runs. */

:root {
  --rm-gold-1: #8a6b2f;
  --rm-gold-2: #d4ad62;
  --rm-gold-3: #f4e2ae;
}

/* ---------- reveal: pre-hide only when JS can run and motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.rm-late) [data-reveal]:not(.rm-in),
  html.rm-late [data-reveal].rm-pending {
    opacity: 0;
  }
  html:not(.rm-ready) [data-reveal]:not(.rm-in) {
    animation: rm-fallback 1ms linear 2.6s forwards;
  }
}
@keyframes rm-fallback {
  to { opacity: 1; }
}

/* split headline words rise out of a mask. The extra padding (cancelled by negative margins,
   so layout is unchanged) keeps accents, descenders and tight tracking from being clipped.
   Two-class selectors win over site rules such as `.hero h1 span { display: block }`. */
.rm-split .rm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.18em 0.08em 0.16em;
  margin: -0.18em -0.08em -0.16em;
}
.rm-split .rm-wi {
  display: inline-block;
}
.rm-split:not(.rm-done) .rm-wi {
  transform: translateY(135%);
}

/* ---------- scroll progress ---------- */
.rm-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2147483000;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rm-gold-1), var(--rm-gold-2) 55%, var(--rm-gold-3));
}

/* ---------- numbers ---------- */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------- card tilt glare ---------- */
[data-tilt] {
  position: relative;
}
.rm-glare-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.rm-glare {
  position: absolute;
  inset: -50%;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--rm-glare, rgba(255, 230, 168, 0.22)), transparent 32%);
  transition: opacity 0.4s ease;
}
.rm-tilting .rm-glare {
  opacity: 1;
}

/* ---------- pointer spotlight ---------- */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}
.rm-spot-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.rm-spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 680px;
  height: 680px;
  margin: -340px 0 0 -340px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(212, 173, 98, 0.22), rgba(212, 173, 98, 0.07) 50%, rgba(212, 173, 98, 0));
}

/* ---------- ticker ---------- */
/* before the script takes over: one clipped row, the same height as the running ticker, so
   nothing jumps when it starts */
[data-ticker] {
  overflow: hidden;
}
/* no JS, or reduced motion: the list wraps in place and never moves */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  [data-ticker] {
    overflow: visible;
  }
  [data-ticker] [data-ticker-track] {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.6em;
  }
}
.rm-ticker-on {
  position: relative;
}
.rm-ticker-vp {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rm-ticker-on [data-ticker-track] {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: rm-ticker var(--rm-dur, 40s) linear infinite;
}
.rm-ticker-on:hover [data-ticker-track],
.rm-ticker-on:focus-within [data-ticker-track],
.rm-ticker-on.rm-paused [data-ticker-track],
.rm-ticker-on.rm-offscreen [data-ticker-track] {
  animation-play-state: paused;
}
@keyframes rm-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--rm-shift, -50%), 0, 0); }
}
.rm-ticker-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(212, 173, 98, 0.45);
  border-radius: 50%;
  background: rgba(5, 6, 7, 0.82);
  color: var(--rm-gold-2);
  cursor: pointer;
}
.rm-ticker-toggle svg {
  fill: currentColor;
}
.rm-ticker-toggle:focus-visible {
  outline: 2px solid var(--rm-gold-3);
  outline-offset: 2px;
}

/* ---------- entrance for overlays already in the HTML (age gate, cookie bar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rm-pop-in {
    animation: rm-pop-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .rm-rise-in {
    animation: rm-rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
  }
}
@keyframes rm-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}
@keyframes rm-rise-in {
  from { opacity: 0; transform: translateY(100%); }
}

/* ---------- never hide anything on paper or in high-contrast mode ---------- */
@media print {
  [data-reveal],
  .rm-wi {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .rm-progress,
  .rm-glare-wrap,
  .rm-spot-wrap,
  .rm-ticker-toggle {
    display: none !important;
  }
}
@media (forced-colors: active) {
  .rm-glare-wrap,
  .rm-spot-wrap {
    display: none;
  }
}

/* ---------- riodrinks.com: first-screen intros ----------
   Pure CSS, so they start with the first paint instead of waiting for scripts (no delay to the
   main image, no flash). They wait while the 18+ gate is open and play once it closes.
   app.js rebuilds the hero bottles and the product detail block on load, so only containers
   that persist through that rebuild are animated there. */
:root {
  --rm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* Quick on purpose: everything starts with the first paint, text is fully shown within about
     half a second, and photos are never hidden (they only settle). */

  /* Home and RTD heroes */
  html.js:not(.age-check-required) .rtd-hero-copy > .eyebrow {
    animation: rm-fade 0.3s ease both;
  }
  html.js:not(.age-check-required) .rtd-hero h1 > span {
    animation: rm-line 0.45s var(--rm-ease) both;
  }
  html.js:not(.age-check-required) .rtd-hero h1 > span + span {
    animation-delay: 0.06s;
  }
  html.js:not(.age-check-required) .rtd-hero-copy > .lead {
    animation: rm-rise 0.4s var(--rm-ease) 0.08s both;
  }
  html.js:not(.age-check-required) .rtd-hero-copy > .hero-actions {
    animation: rm-rise 0.4s var(--rm-ease) 0.12s both;
  }
  html.js:not(.age-check-required) .rtd-hero-copy > :is(.rtd-home-facts, .hero-badges) {
    animation: rm-rise 0.4s var(--rm-ease) 0.16s both;
  }
  html.js:not(.age-check-required) .rtd-hero-art {
    animation: rm-rise-big 0.5s var(--rm-ease) both;
  }

  /* Inner page heroes: the photo settles (visible from the first frame), the copy rises in order */
  html.js:not(.age-check-required) .page-hero-media img {
    animation: rm-settle 0.8s var(--rm-ease) both;
  }
  html.js:not(.age-check-required) .page-hero-copy > * {
    animation: rm-rise 0.4s var(--rm-ease) 0.12s both;
  }
  html.js:not(.age-check-required) .page-hero-copy > :nth-child(1) { animation-delay: 0s; }
  html.js:not(.age-check-required) .page-hero-copy > :nth-child(2) { animation-delay: 0.03s; }
  html.js:not(.age-check-required) .page-hero-copy > :nth-child(3) { animation-delay: 0.07s; }
  html.js:not(.age-check-required) .page-hero-copy > :nth-child(4) { animation-delay: 0.1s; }
  html.js:not(.age-check-required) .page-hero-copy > h1 {
    animation-name: rm-line;
    animation-duration: 0.45s;
  }
  html.js:not(.age-check-required) .products-hero-art img {
    animation: rm-rise-big 0.5s var(--rm-ease) both;
  }
  html.js:not(.age-check-required) .products-hero-art img:nth-child(2) { animation-delay: 0.05s; }
  html.js:not(.age-check-required) .products-hero-art img:nth-child(3) { animation-delay: 0.1s; }

  /* Product pages: the whole detail block lifts in */
  html.js:not(.age-check-required) #product-detail-root {
    animation: rm-rise 0.35s var(--rm-ease) both;
  }

  /* Overlays */
  html.js.age-check-required .age-card {
    animation: rm-pop-in 0.3s var(--rm-ease) both;
  }
  .cookie-banner.show {
    animation: rm-rise-in 0.35s var(--rm-ease) 0.1s both;
  }

  /* Room for the photo to drift without showing an edge */
  html.rm-ready .distributor-banner-media img {
    scale: 1.1;
  }

  /* Magnetic buttons: Motion moves them, so the CSS transform transition must not chase it */
  .btn[data-magnetic] {
    transition-property: background, color, box-shadow;
  }

}

@keyframes rm-fade {
  from { opacity: 0; }
}
@keyframes rm-rise {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes rm-rise-big {
  from { opacity: 0; transform: translateY(32px) scale(0.98); }
}
/* A line rises out of its own mask. The final inset is negative so accents and descenders
   are never clipped once it has landed. */
@keyframes rm-line {
  from { clip-path: inset(-30% -10% 100% -10%); transform: translateY(38%); }
  to { clip-path: inset(-30% -10% -30% -10%); transform: none; }
}
@keyframes rm-settle {
  from { scale: 1.16; }
  to { scale: 1.1; }
}

/* 1 — 18+ gate drains away (the drained copy is created by gate-drain.js) */
.rc-drain {
  transition: none !important;
}

/* 2 — Headline fills like a poured glass */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.age-check-required) .rtd-hero h1 .rtd-accent {
    background-repeat: repeat-x;
    background-size: 420px 300%, 300px 300%;
    -webkit-background-clip: text;
    background-clip: text;
    animation:
      rm-line 0.45s var(--rm-ease, ease) 0.06s both,
      rc-pour 1s cubic-bezier(0.45, 0.05, 0.3, 1) 0.12s both;
  }
}
/* The liquid is three heights tall (surface one height down), so it starts below the text and
   ends with the surface above it and the body still below it, whatever the number of lines.
   The last frame hands the text back to its own colour: the finished headline is the site's own. */
@keyframes rc-pour {
  0% {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 223, 176, 0.62);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 66.7 86 133.3 86 200 100 S 333.3 114 400 100 V 300 H 0 Z' fill='%23d4dfb0'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 94 C 66.7 106 133.3 106 200 94 S 333.3 82 400 94 V 300 H 0 Z' fill='%23d4dfb0' fill-opacity='0.45'/%3E%3C/svg%3E");
    background-position: 0 0%, 0 0%;
  }
  86% {
    -webkit-text-stroke-color: rgba(212, 223, 176, 0.62);
  }
  99% {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 223, 176, 0);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 66.7 86 133.3 86 200 100 S 333.3 114 400 100 V 300 H 0 Z' fill='%23d4dfb0'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 94 C 66.7 106 133.3 106 200 94 S 333.3 82 400 94 V 300 H 0 Z' fill='%23d4dfb0' fill-opacity='0.45'/%3E%3C/svg%3E");
    background-position: -840px 57%, 600px 61%;
  }
  100% {
    -webkit-text-stroke: 0 transparent;
    background-position: -840px 57%, 600px 61%;
  }
}

/* 3 — Living bottles: glint + rock (the image is never moved or wrapped: see bottles.js) */
html .rtd-hero-art .rtd-hero-bottle {
  position: relative;
  --rc-rock: 0deg;
  --rc-lift: 0px;
}
html .rtd-hero-art .rtd-hero-bottle img,
html .rc-glint {
  rotate: var(--rc-rock);
  translate: 0 var(--rc-lift);
  transform-origin: 50% 100%;
}
/* Placed and sized over the image by bottles.js */
html .rc-glint {
  display: block;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: var(--rc-mask) center bottom / contain no-repeat;
  mask: var(--rc-mask) center bottom / contain no-repeat;
  /* follows the site's own hover lift of the image (.rtd-hero-bottle:hover img) */
  transition: transform 0.25s ease;
}
html .rtd-hero-bottle:hover .rc-glint {
  transform: translateY(-8px);
}
html .rc-glint:not([style*="--rc-mask"]) {
  display: none;
}
html .rc-glint-bar {
  display: block;
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 34%;
  transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 88%);
}
html .rc-flash {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.age-check-required) .rc-auto {
    animation: rc-glint 7.5s cubic-bezier(0.45, 0, 0.25, 1) calc(2.2s + var(--rc-i, 0) * 0.28s) infinite;
  }
  /* as specific as the rule above, whose animation shorthand would otherwise reset the pause */
  html.js:not(.age-check-required) .rc-idle .rc-auto {
    animation-play-state: paused;
  }
}
@keyframes rc-glint {
  0% { transform: translateX(-130%) skewX(-14deg); }
  13%, 100% { transform: translateX(300%) skewX(-14deg); }
}

/* 5 — Liquid section edges */
html :is(.rtd-range, .section-cream, .section-light) {
  position: relative;
}
html .rc-edge {
  position: absolute;
  left: 0;
  top: 1px;
  display: block;
  width: 100%;
  overflow: visible;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 1;
}

/* 6 — Section takes the cocktail's colour */
html .rtd-range {
  position: relative;
  isolation: isolate;
}
html .rc-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* 7 — Fizz in the cocktail tiles */
html .rc-fizz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
html .rc-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 16%, rgba(255, 255, 255, 0.3) 38%, rgba(255, 255, 255, 0.06) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

/* 10 — Export routes on the globe */
html .rc-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.rm-ready .distributor-banner-media .rc-routes {
    scale: 1.1;
  }
  html .rc-hub-ring {
    animation: rc-hub 2.6s ease-out infinite;
  }
  html .rc-idle .rc-hub-ring {
    animation-play-state: paused;
  }
}
html .rc-route-line {
  fill: none;
  stroke: #f4d48a;
  stroke-width: 1.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
html .rc-route-glow-path {
  fill: none;
  stroke: #f1cb75;
  stroke-width: 7;
  stroke-opacity: 0.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
html .rc-route-node,
html .rc-route-hub {
  fill: #fff1cc;
  transform-box: fill-box;
  transform-origin: center;
}
html .rc-route-ring {
  fill: none;
  stroke: #f1cb75;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes rc-hub {
  from { opacity: 0.85; transform: scale(1); }
  to { opacity: 0; transform: scale(3.4); }
}

/* 11 — Back-to-top glass */
html .back-to-top {
  overflow: hidden;
  isolation: isolate;
}
html .rc-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
html .rc-glass-level {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
html .rc-glass-wave {
  position: absolute;
  left: 0;
  top: -5px;
  bottom: 0;
  width: calc(100% + 22px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='40' viewBox='0 0 22 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e2b45a'/%3E%3Cstop offset='0.18' stop-color='%23a77a2e'/%3E%3Cstop offset='1' stop-color='%235c3f12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 4 C 3.7 1.6 7.3 1.6 11 4 S 18.3 6.4 22 4 V 40 H 0 Z' fill='url(%23g)'/%3E%3C/svg%3E") repeat-x 0 0 / 22px 100%;
}
html .rc-glass-arrow {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  html .back-to-top.show .rc-glass-wave {
    animation: rc-glass-wave 1.3s linear infinite;
  }
}
@keyframes rc-glass-wave {
  to { transform: translateX(-22px); }
}