.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* ── Navbar: starts transparent, frosts in on scroll ── */
.nav {
  --nb:    0;   /* 0→1 driven by JS */
  --nblur: 0px;
  background:      rgba(252, 249, 248, var(--nb));
  backdrop-filter: blur(var(--nblur));
  -webkit-backdrop-filter: blur(var(--nblur));
  /* layered shadow: subtle border line + depth */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, calc(var(--nb) * 0.06)),
    0 4px 32px rgba(0, 0, 0, calc(var(--nb) * 0.12)),
    0 1px 8px  rgba(0, 0, 0, calc(var(--nb) * 0.05));
  transition:
    background      0.1s linear,
    backdrop-filter 0.1s linear,
    -webkit-backdrop-filter 0.1s linear,
    box-shadow      0.1s linear;
}

.tonal-shift-via-blur {
  backdrop-filter: blur(20px);
}
.no-border { border: none !important; }
.flat { box-shadow: none !important; }

/* ── Service card hover: CTA card shake ── */
@keyframes cta-shake {
  0%   { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-6px) rotate(-0.4deg); }
  30%  { transform: translateX(5px) rotate(0.3deg); }
  45%  { transform: translateX(-4px) rotate(-0.2deg); }
  60%  { transform: translateX(3px) rotate(0.15deg); }
  75%  { transform: translateX(-2px) rotate(-0.1deg); }
  90%  { transform: translateX(1px); }
  100% { transform: translateX(0) rotate(0deg); }
}
.cta-shake {
  animation: cta-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes scroll-horizontal {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll-horizontal {
  animation: scroll-horizontal 20s linear infinite;
}

@keyframes float-liquid {
  0%   { transform: translate(0, 0) scale(1);      border-radius: 58% 42% 45% 55% / 52% 48% 58% 42%; }
  33%  { transform: translate(10%, -8%) scale(1.1); border-radius: 42% 58% 55% 45% / 38% 62% 42% 58%; }
  66%  { transform: translate(-8%, 12%) scale(0.95); border-radius: 62% 38% 42% 58% / 58% 42% 38% 62%; }
  100% { transform: translate(0, 0) scale(1);      border-radius: 58% 42% 45% 55% / 52% 48% 58% 42%; }
}

@keyframes float-liquid-alt {
  0%   { transform: translate(0, 0) scale(1);       border-radius: 42% 58% 55% 45% / 58% 42% 48% 52%; }
  33%  { transform: translate(-12%, 10%) scale(1.1); border-radius: 58% 42% 38% 62% / 42% 58% 62% 38%; }
  66%  { transform: translate(10%, -15%) scale(1.2); border-radius: 38% 62% 58% 42% / 62% 38% 42% 58%; }
  100% { transform: translate(0, 0) scale(1);       border-radius: 42% 58% 55% 45% / 58% 42% 48% 52%; }
}

.animate-mesh-liquid {
  animation: float-liquid 14.6s ease-in-out infinite;
}
.animate-mesh-liquid-delayed {
  animation: float-liquid-alt 17.8s ease-in-out infinite;
}
.animate-mesh-liquid-slow {
  animation: float-liquid 21.1s ease-in-out infinite reverse;
}

.artwork-mask {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}