/* rio-motion 1.2.0 — styles for the rio-motion engine (shared with riodrinks.com).
   Safe without JS: nothing here hides content unless scripting is on, and a timed fallback
   shows everything if the script never runs. Colours are variables; riococktails.css sets the
   RIO Cocktails palette (the defaults are the riodrinks.com gold). */

:root {
  --rm-progress: linear-gradient(90deg, #8a6b2f, #d4ad62 55%, #f4e2ae);
  --rm-glare-default: rgba(255, 230, 168, 0.22);
  --rm-spot-color: 212, 173, 98;
  --rm-toggle-bg: rgba(5, 6, 7, 0.82);
  --rm-toggle-fg: #d4ad62;
  --rm-toggle-border: rgba(212, 173, 98, 0.45);
  --rm-toggle-focus: #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: 3px;
  z-index: 2147483000;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--rm-progress);
}

/* ---------- 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, var(--rm-glare-default)), 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(var(--rm-spot-color), 0.22), rgba(var(--rm-spot-color), 0.07) 50%, rgba(var(--rm-spot-color), 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 row never moves */
.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;
}
/* Touch browsers can retain :hover after a tap. Only a real fine pointer
   should pause on hover. Focus alone must not override the Play button. */
@media (hover: hover) and (pointer: fine) {
  .rm-ticker-on:hover [data-ticker-track] {
    animation-play-state: paused;
  }
}
.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 var(--rm-toggle-border);
  border-radius: 50%;
  background: var(--rm-toggle-bg);
  color: var(--rm-toggle-fg);
  cursor: pointer;
}
.rm-ticker-toggle svg {
  fill: currentColor;
}
.rm-ticker-toggle:focus-visible {
  outline: 2px solid var(--rm-toggle-focus);
  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;
  }
}

/* ---------- riococktails.com: palette and first-screen intros ----------
   The intros are pure CSS, so they start with the first paint instead of waiting for scripts
   (no delay to the main image, no flash). They are scoped to html.age-cleared: that class is set
   before the first paint when this tab has already confirmed the 18+ gate, and by app.js the
   moment "Yes, enter" is pressed, so on a first visit they play as the gate drains away.
   Quick on purpose (as on riodrinks.com v3.0.23): text is in place within about half a second.
   The full-bleed scene photos are never animated: they are the largest paint of the page. */
:root {
  --rm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rm-progress: linear-gradient(90deg, #ff703a, #ffadc9 48%, #f4f65c);
  --rm-glare-default: rgba(255, 255, 255, 0.4);
  --rm-spot-color: 244, 246, 92;
  --rm-toggle-bg: rgba(63, 32, 19, 0.9);
  --rm-toggle-fg: #fffced;
  --rm-toggle-border: rgba(63, 32, 19, 0.35);
  --rm-toggle-focus: #3f2013;
}

@media (prefers-reduced-motion: no-preference) {
  /* Home hero */
  html.age-cleared .hero-copy > .eyebrow {
    animation: rm-fade 0.3s ease both;
  }
  html.age-cleared .hero h1 > span {
    animation: rm-line 0.45s var(--rm-ease) both;
  }
  html.age-cleared .hero h1 > span + span {
    animation-delay: 0.06s;
  }
  html.age-cleared .hero-copy > .hero-intro {
    animation: rm-rise 0.4s var(--rm-ease) 0.08s both;
  }
  html.age-cleared .hero-copy > .button {
    animation: rm-rise 0.4s var(--rm-ease) 0.12s both;
  }
  html.age-cleared .hero-copy > .hero-meta {
    animation: rm-rise 0.4s var(--rm-ease) 0.16s both;
  }
  html.age-cleared .hero-art {
    animation: rm-rise-big 0.5s var(--rm-ease) both;
  }
  html.age-cleared .hero-bottom {
    animation: rm-fade 0.4s ease 0.2s both;
  }

  /* Cocktail pages: the copy rises in order, the bottle and its note lift in */
  html.age-cleared .detail-intro > * {
    animation: rm-rise 0.4s var(--rm-ease) 0.15s both;
  }
  html.age-cleared .detail-intro > :nth-child(1) { animation-delay: 0s; }
  html.age-cleared .detail-intro > :nth-child(2) { animation-delay: 0.03s; }
  html.age-cleared .detail-intro > :nth-child(3) { animation-delay: 0.05s; }
  html.age-cleared .detail-intro > :nth-child(4) { animation-delay: 0.09s; }
  html.age-cleared .detail-intro > :nth-child(5) { animation-delay: 0.11s; }
  html.age-cleared .detail-intro > :nth-child(6) { animation-delay: 0.13s; }
  html.age-cleared .detail-intro > h1 {
    animation-name: rm-line;
    animation-duration: 0.45s;
  }
  html.age-cleared .detail-visual {
    animation: rm-rise-big 0.5s var(--rm-ease) 0.04s both;
  }

  /* About and Contact */
  html.age-cleared .company-intro > * {
    animation: rm-rise 0.4s var(--rm-ease) 0.12s both;
  }
  html.age-cleared .company-intro > :nth-child(1) { animation-delay: 0s; }
  html.age-cleared .company-intro > :nth-child(2) { animation-delay: 0.03s; }
  html.age-cleared .company-intro > :nth-child(3) { animation-delay: 0.08s; }
  html.age-cleared .company-intro > :nth-child(4) { animation-delay: 0.11s; }
  html.age-cleared .company-hero h1 > span {
    animation: rm-line 0.45s var(--rm-ease) 0.03s both;
  }
  html.age-cleared .company-hero h1 > span + span {
    animation-delay: 0.09s;
  }
  html.age-cleared .company-hero h1 {
    animation: none;
  }
  html.age-cleared :is(.company-portrait, .contact-details) {
    animation: rm-rise-big 0.5s var(--rm-ease) 0.05s both;
  }

  /* Overlays */
  html:not(.age-cleared) .age-card {
    animation: rm-pop-in 0.3s var(--rm-ease) both;
  }
  .privacy-dialog[open] .privacy-content {
    animation: rm-pop-in 0.3s var(--rm-ease) both;
  }

  /* Room for the serving photo to drift without showing an edge */
  html.rm-ready .ritual-image > img {
    scale: 1.08;
  }

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

/* The header gains a soft shadow once the page is scrolled (sticky header, see tropical.css) */
.site-header {
  transition: box-shadow 0.3s ease;
}
.site-header.rm-scrolled {
  box-shadow: 0 12px 30px -18px rgba(0, 32, 26, 0.7);
}

@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; }
}

/* 1 — 18+ gate drains away (the drained copy is created by gate-drain.js). The copy keeps the
   gate's look; html.age-cleared would otherwise hide it straight away. */
html .age-gate.rc-drain {
  display: grid;
  transition: none !important;
}
.age-gate.rc-drain .age-card {
  animation: none;
}
.rc-drain-edge {
  position: fixed;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
  background: linear-gradient(180deg, rgba(248, 247, 115, 0.95), rgba(214, 236, 96, 0.7));
}

/* 2 — "TASTE THE SUMMER." fills like a poured glass: the letters start as outlines and the
   liquid rises inside them. */
@media (prefers-reduced-motion: no-preference) {
  html.age-cleared .hero h1 .lime-text {
    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(248, 247, 115, 0.7);
    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='%23f8f773'/%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='%23f8f773' fill-opacity='0.45'/%3E%3C/svg%3E");
    background-position: 0 0%, 0 0%;
  }
  86% {
    -webkit-text-stroke-color: rgba(248, 247, 115, 0.7);
  }
  99% {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(248, 247, 115, 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='%23f8f773'/%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='%23f8f773' 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) */
.rc-glint {
  display: block;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: var(--rc-mask) 50% 50% / contain no-repeat;
  mask: var(--rc-mask) 50% 50% / contain no-repeat;
}
.rc-glint:not([style*="--rc-mask"]) {
  display: none;
}
.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%);
}
.rc-flash {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.age-cleared .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.age-cleared .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 (drawn by slosh.js above the section, in its own colour) */
.cocktails, .corporate-section, .detail-story, .detail-serve, .detail-more, .company-story, .company-partners, .contact-partners {
  position: relative;
}
.rc-edge {
  position: absolute;
  left: 0;
  top: 1px;
  display: block;
  width: 100%;
  overflow: visible;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 1;
}

/* 6 — The cocktails section takes the colour of the cocktail you point at */
.cocktails, .detail-more {
  position: relative;
  isolation: isolate;
}
.rc-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* 7 — Fizz behind the bottle in each cocktail tile */
.rc-fizz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.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);
}

/* 11 — Back-to-top glass: the button fills with lime liquid as you scroll down */
.rc-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
.rc-glass-level {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.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='%23f8f773'/%3E%3Cstop offset='0.2' stop-color='%23d7e04a'/%3E%3Cstop offset='1' stop-color='%2368a83c'/%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%;
}
.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) {
  .back-to-top.show .rc-glass-wave {
    animation: rc-glass-wave 1.3s linear infinite;
  }
}
@keyframes rc-glass-wave {
  to { transform: translateX(-22px); }
}