/* MINVODY consistency audit — Phase 3
   Shared water-bubble material, motion language and reduced-motion behavior. */

:root{
  --ease-premium:cubic-bezier(.16,1,.3,1);
  --duration-fast:180ms;
  --duration-ui:350ms;
  --duration-reveal:750ms;
  --duration-image:900ms;

  --bubble-size-small:38px;
  --bubble-size-medium:64px;
  --bubble-size-large:94px;
  --bubble-opacity:.68;
}

/* Responsive media wrappers must remain layout-neutral so the approved image
   positioning, crops and hover transforms keep using their existing boxes. */
.hero__media picture,
.about__media picture,
.news__img picture,
.split__media picture,
.hero-stack__img picture,
.product-card__media picture,
.article-card__media picture,
.bproduct picture{display:contents}

/* Shared approved page-wide water material. Density is selected in markup;
   the position sequence deliberately retains the previous visual rhythm. */
.page-bubbles{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.page-bubble{
  position:absolute;
  width:var(--size,var(--bubble-size-medium));
  height:var(--size,var(--bubble-size-medium));
  top:var(--top);
  left:var(--left,auto);
  right:var(--right,auto);
  border:1px solid rgba(112,187,232,.23);
  border-radius:50%;
  opacity:var(--opacity,var(--bubble-opacity));
  background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.82) 0 4%,rgba(255,255,255,.37) 9%,rgba(188,228,249,.25) 32%,rgba(103,180,227,.135) 62%,rgba(90,163,230,.023) 75%);
  box-shadow:inset -10px -12px 21px rgba(58,137,197,.105),inset 6px 6px 13px rgba(255,255,255,.41),0 14px 30px rgba(44,107,166,.068),0 0 27px rgba(90,163,230,.058);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  animation:minvodyWaterFloat var(--dur,15s) var(--ease-premium) var(--delay,0s) infinite alternate;
  will-change:transform,opacity;
}

.page-bubble:nth-child(1){--size:calc(var(--bubble-size-medium) - 6px);--top:2%;--left:4%;--dur:13s;--opacity:.68}
.page-bubble:nth-child(2){--size:calc(var(--bubble-size-large) - 2px);--top:9%;--right:5%;--dur:18s;--delay:-6s;--opacity:.62}
.page-bubble:nth-child(3){--size:calc(var(--bubble-size-small) - 4px);--top:17%;--left:2%;--dur:12s;--delay:-4s;--opacity:.75}
.page-bubble:nth-child(4){--size:calc(var(--bubble-size-medium) + 6px);--top:25%;--right:8%;--dur:16s;--delay:-9s;--opacity:.62}
.page-bubble:nth-child(5){--size:calc(var(--bubble-size-large) + 12px);--top:34%;--left:5%;--dur:19s;--delay:-3s;--opacity:.58}
.page-bubble:nth-child(6){--size:calc(var(--bubble-size-small) + 4px);--top:42%;--right:3%;--dur:12s;--delay:-7s;--opacity:.74}
.page-bubble:nth-child(7){--size:calc(var(--bubble-size-medium) + 2px);--top:51%;--left:2%;--dur:15s;--delay:-10s;--opacity:.65}
.page-bubble:nth-child(8){--size:var(--bubble-size-large);--top:60%;--right:6%;--dur:19s;--delay:-5s;--opacity:.58}
.page-bubble:nth-child(9){--size:var(--bubble-size-small);--top:69%;--left:8%;--dur:12s;--delay:-8s;--opacity:.76}
.page-bubble:nth-child(10){--size:calc(var(--bubble-size-medium) + 8px);--top:78%;--right:3%;--dur:17s;--delay:-2s;--opacity:.61}
.page-bubble:nth-child(11){--size:calc(var(--bubble-size-large) + 4px);--top:87%;--left:4%;--dur:19s;--delay:-11s;--opacity:.58}
.page-bubble:nth-child(12){--size:32px;--top:95%;--right:11%;--dur:12s;--delay:-6s;--opacity:.76}
.page-bubble:nth-child(13){--size:44px;--top:13%;--right:22%;--dur:14s;--delay:-8s;--opacity:.65}
.page-bubble:nth-child(14){--size:72px;--top:38%;--left:18%;--dur:18s;--delay:-12s;--opacity:.58}
.page-bubble:nth-child(15){--size:58px;--top:64%;--left:25%;--dur:16s;--delay:-5s;--opacity:.66}
.page-bubble:nth-child(16){--size:36px;--top:83%;--right:20%;--dur:12s;--delay:-9s;--opacity:.72}

.page-bubbles[data-bubble-density="light"] .page-bubble:nth-child(n+9),
.page-bubbles[data-bubble-density="standard"] .page-bubble:nth-child(n+13),
.page-bubbles[data-bubble-density="rich"] .page-bubble:nth-child(n+17){display:none}

@keyframes minvodyWaterFloat{
  0%{transform:translate3d(0,7px,0);opacity:var(--opacity,var(--bubble-opacity))}
  55%{opacity:var(--opacity,var(--bubble-opacity))}
  100%{transform:translate3d(11px,-17px,0);opacity:.58}
}

/* The tiny dark-footer bubbles keep their approved distinct treatment, while
   sharing one implementation and the same offscreen scheduling behavior. */
.ft__bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.ft__bubbles span{position:absolute;bottom:-20px;border-radius:50%;background:rgba(255,255,255,.12);animation:minvodyFooterRise linear infinite;will-change:transform,opacity}
.ft__bubbles span:nth-child(1){left:12%;width:4px;height:4px;animation-duration:15s}
.ft__bubbles span:nth-child(2){left:38%;width:6px;height:6px;animation-duration:19s;animation-delay:-6s}
.ft__bubbles span:nth-child(3){left:64%;width:3px;height:3px;animation-duration:17s;animation-delay:-3s}
.ft__bubbles span:nth-child(4){left:86%;width:5px;height:5px;animation-duration:19s;animation-delay:-11s}
@keyframes minvodyFooterRise{to{transform:translateY(-420px);opacity:0}}

/* Shared interaction and reveal rhythm. Bespoke hero/mineral transforms are
   intentionally excluded. */
.reveal{
  transform:translateY(18px);
  transition-duration:var(--duration-reveal);
  transition-timing-function:var(--ease-premium);
}
.product-card,
.article-card,
.contact-reveal{
  transform:translateY(18px);
  transition-duration:var(--duration-reveal);
  transition-timing-function:var(--ease-premium);
}
.product-card__media img,
.article-card__media img,
.news__img img{
  transition-duration:var(--duration-image);
  transition-timing-function:var(--ease-premium);
}
.btn,
.about__cta,
.bottles__cta,
.news__all,
.nav__contact{
  transition-timing-function:var(--ease-premium);
}
html[data-brand] .benefit:hover,
html[data-brand] .product:hover,
html[data-brand] .retailer:hover,
.brand:hover,
.news__card:hover{transform:translateY(-2px)}

/* CSS animations retain their exact phase when paused and continue smoothly
   on re-entry. Individual page bubbles are observed separately. */
.motion-paused,
.motion-paused::before,
.motion-paused::after,
.motion-paused .page-bubble,
.motion-paused .ft__bubbles span,
html.motion-document-paused .page-bubble,
html.motion-document-paused .ft__bubbles span,
html.motion-document-paused .contact-form-section::before,
html.motion-document-paused .contact-form-section::after{
  animation-play-state:paused!important;
}
.page-bubble.motion-paused{animation-play-state:paused!important;will-change:auto}

@media(max-width:640px){
  /* Every preset resolves to approximately half its desktop population. */
  .page-bubble:nth-child(even){display:none}
  .page-bubble{transform:scale(.8)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

  .page-bubble,
  .ft__bubbles span,
  .contact-form-section::before,
  .contact-form-section::after{
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
  }

  .reveal,
  .milestone,
  .product-card,
  .article-card,
  .contact-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  [data-drift],
  .about__media img{
    transform:none!important;
    will-change:auto!important;
  }
}

/* Class mirror keeps behavior correct when the OS preference changes while a
   page is already open, and makes the policy consistent in older engines. */
html.motion-reduced{scroll-behavior:auto!important}
html.motion-reduced *,
html.motion-reduced *::before,
html.motion-reduced *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.motion-reduced .page-bubble,
html.motion-reduced .ft__bubbles span,
html.motion-reduced .contact-form-section::before,
html.motion-reduced .contact-form-section::after{animation:none!important;transform:none!important;will-change:auto!important}
html.motion-reduced .reveal,
html.motion-reduced .milestone,
html.motion-reduced .product-card,
html.motion-reduced .article-card,
html.motion-reduced .contact-reveal{opacity:1!important;transform:none!important;transition:none!important}
html.motion-reduced [data-drift],
html.motion-reduced .about__media img{transform:none!important;will-change:auto!important}