@property --glass-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}
@property --glass-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* The light sits inside each control, with a different tint for each role. */
:is(body .btn:not(.btn-close), body .instagram-cta a.btn-outline,
    body .whatsapp-widget, .about-promo-portrait .about-promo-play,
    body #google-consent .google-consent-actions button, body .bo-preview-actions .bo-preview-action) {
  --glass-spring: cubic-bezier(.22, 1, .36, 1);
  --glass-light: radial-gradient(ellipse at var(--glass-x, 30%) var(--glass-y, 0%),
    var(--glass-glint, #ffffff52) 0%, var(--glass-glow, #ffffff14) 32%, transparent 72%);
  --glass-rim: inset 0 1px 0 #ffffff20, inset 0 -1px 0 #14283812;
  background-image: var(--glass-light);
  box-shadow: var(--glass-rim), 0 2px 8px #14283819;
  transition: scale .46s var(--glass-spring), translate .42s var(--glass-spring),
    transform .42s var(--glass-spring),
    background-color .46s ease, box-shadow .42s ease, color .3s ease,
    --glass-x .18s ease-out, --glass-y .18s ease-out;
}

body .btn:not(.btn-close), body .bo-preview-actions .bo-preview-action.is-primary {
  --glass-glint: #ffffff26;
  --glass-glow: #ffffff0c;
  background-color: var(--glass-primary-fill, var(--primary-color));
  border-color: var(--glass-primary-fill, var(--primary-color));
  color: var(--glass-primary-text, #fff);
}
body .btn:not(.btn-close):is(:hover, :focus-visible):not(:disabled) {
  color: var(--glass-primary-text, #fff);
}
/* Lead Magnet declares its own foreground and transitions for the disabled state. */
body #lead-download-submit:not(:disabled):is(:hover, :focus-visible),
body #lead-download-submit:not(:disabled) {
  color: var(--glass-primary-text, #fff);
  background-color: var(--glass-primary-fill, var(--primary-color));
  border-color: var(--glass-primary-fill, var(--primary-color));
}

body .instagram-cta a.btn-outline,
body #google-consent .google-consent-actions button {
  background-color: #f4f8fa;
}
body .whatsapp-widget:is(:hover, :focus-visible) {
  transform: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(body .btn:not(.btn-close), body .instagram-cta a.btn-outline,
      body .whatsapp-widget, body #google-consent .google-consent-actions button,
      body .bo-preview-actions .bo-preview-action):hover:not(:disabled) {
    scale: 1.012;
    translate: 0 -1px;
    box-shadow: var(--glass-rim), 0 3px 10px #14283822;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :is(body .btn:not(.btn-close), body .instagram-cta a.btn-outline,
      body .whatsapp-widget, body #google-consent .google-consent-actions button,
      body .bo-preview-actions .bo-preview-action):active:not(:disabled) {
    scale: .96;
    translate: 0 1px;
    transition-duration: .13s;
  }
}

@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  @media (prefers-reduced-transparency: no-preference) {
    body .btn:not(.btn-close):not(:disabled),
    body .whatsapp-widget,
    .about-promo-portrait .about-promo-play {
      -webkit-backdrop-filter: blur(6px) saturate(115%);
      backdrop-filter: blur(6px) saturate(115%);
    }
    body .btn:not(.btn-close):not(:disabled),
    body #lead-download-submit:not(:disabled):is(:hover, :focus-visible) {
      background-color: color-mix(in srgb, var(--glass-primary-fill, var(--primary-color)) 91%, transparent);
    }
    body .whatsapp-widget:not(:hover):not(:focus-visible) {
      background-color: #c1ecd19c;
    }
    body .whatsapp-widget:is(:hover, :focus-visible) {
      background-color: #bce8cbb8;
    }
    body .whatsapp-widget {
      --glass-glint: #ffffff80;
      --glass-glow: #ffffff28;
      --glass-rim: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #205a3820;
      border-color: #51826638;
    }
    body .about-promo-portrait:not(:hover):not(:focus-visible) .about-promo-play {
      --glass-glint: #ffffff26;
      --glass-glow: #ffffff0c;
      background-color: color-mix(in srgb, var(--secondary-color, var(--primary-color, #007bff)) 35%, transparent);
    }
    body .about-promo-portrait:is(:hover, :focus-visible) .about-promo-play {
      background-color: color-mix(in srgb, var(--secondary-color, var(--primary-color, #007bff)) 52%, transparent);
    }
  }
}

/* Only the hero CTA needs to borrow texture from a large photographic background. */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  @media (prefers-reduced-transparency: no-preference) {
    body .hero:has(.hero-image, .hero-video) .hero-content .btn {
      --glass-glint: #ffffff20;
      --glass-glow: #ffffff0a;
      --glass-rim: inset 0 1px 0 #ffffff27, inset 0 -1px 0 #ffffff08;
      background-color: #17292eb3;
      background-color: color-mix(in srgb, color-mix(in srgb, var(--primary-color) 66%, #17292e) 76%, transparent);
      background-color: color-mix(in srgb, oklch(from var(--primary-color) min(l, .44) min(c, .24) h) 76%, transparent);
      border-color: #ffffff22;
      color: #fff;
      -webkit-backdrop-filter: blur(7px) saturate(115%);
      backdrop-filter: blur(7px) saturate(115%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(body .btn:not(.btn-close), body .instagram-cta a.btn-outline,
      body .whatsapp-widget, .about-promo-portrait .about-promo-play,
      body #google-consent .google-consent-actions button, body .bo-preview-actions .bo-preview-action) { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body .whatsapp-widget, .about-promo-portrait .about-promo-play {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body .whatsapp-widget:not(:hover):not(:focus-visible) { background-color: #e2f4e8; }
  .about-promo-portrait .about-promo-play { background-color: var(--secondary-color, #474f49); }
}