/* ==========================================================================
   brand.css — palette + hero soap-bubble engine.
   These are the two things that define the brand: the wordmark's pink/blue
   and the suds drifting up behind the hero. Both are carried over untouched.
   Layout and components live in craft.css.
   ========================================================================== */

:root {
  --ink: #142d43;
  --ink-soft: #4f6072;
  --line: #e4eaf1;
  --bg-soft: #f6faff;
  --bg-tint: #edf8ff;
  --accent: #087bc1;
  --accent-dark: #06649f;
  --accent-soft: #dff2ff;
  --accent-deep: #104b76;
  --pink: #f13b8a;
  --pink-strong: #be246b;
  --pink-dark: #9e1955;
  --pink-soft: #ffe5f0;
  --pink-tint: #fff5fa;
}

/* --- Hero soap bubbles: unchanged ---------------------------------------- */
.hero-art { --bubble-opacity: .52; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; mask-image: linear-gradient(to top, transparent, #000 8%, #000 92%, transparent); }
/* Each stream carries a loose cluster of suds up the complete hero height. */
.bubble-track { --bubble-size: var(--size); position: absolute; top: 0; bottom: calc(0px - var(--bubble-size)); left: var(--x); width: var(--bubble-size); opacity: 0; animation: bubble-rise var(--duration) linear infinite; animation-delay: var(--delay); will-change: transform, opacity; }
.bubble-cluster { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--bubble-size); animation: bubble-sway var(--sway) ease-in-out infinite alternate; animation-delay: var(--delay); }
.soap-bubble {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(ellipse at 72% 80%, #f7bddc65, transparent 42%), radial-gradient(circle at 44% 38%, #ffffff08 35%, #d9f5ff24 58%, #9adcf46b 84%, #79cee6b3 100%);
  border: 1.5px solid #77cbe8c4;
  box-shadow: inset 3px 3px 5px #ffffffc9, inset -3px -4px 7px #77cbe844, 0 1px 3px #78c2df14;
  animation: bubble-wobble 4.8s ease-in-out infinite alternate;
}
.soap-bubble-pink {
  background: radial-gradient(ellipse at 72% 80%, #8ddcff63, transparent 42%), radial-gradient(circle at 44% 38%, #ffffff08 35%, #ffe0ee24 58%, #f4b9d96b 84%, #ec96c1b3 100%);
  border-color: #eba0c8d4;
  box-shadow: inset 3px 3px 5px #ffffffc9, inset -3px -4px 7px #e995c344, 0 1px 3px #dca0bc14;
}
.soap-bubble::after { content: ''; position: absolute; width: 34%; height: 26%; left: 13%; top: 11%; border-top: 2px solid #fffffff2; border-left: 2px solid #ffffffb3; border-radius: 80% 40% 0 30%; transform: rotate(-26deg); }
.soap-bubble::before { content: ''; position: absolute; width: 21%; height: 7%; right: 14%; bottom: 13%; border-radius: 50%; background: #ffffffa6; transform: rotate(-35deg); }
.soap-bubble:nth-child(1) { width: 56%; height: 56%; left: 20%; top: 30%; }
.soap-bubble:nth-child(2) { width: 32%; height: 32%; left: 2%; top: 60%; animation-delay: -1.8s; animation-duration: 5.7s; }
.soap-bubble:nth-child(3) { width: 40%; height: 40%; left: 58%; top: 10%; animation-delay: -3.2s; animation-duration: 6.1s; }
.soap-bubble:nth-child(4) { width: 22%; height: 22%; left: 44%; top: 2%; animation-delay: -2.4s; }
.soap-bubble:nth-child(5) { width: 16%; height: 16%; left: 6%; top: 38%; animation-delay: -3.5s; animation-duration: 4.2s; }
.soap-bubble:nth-child(6) { width: 20%; height: 20%; left: 67%; top: 74%; animation-delay: -.7s; animation-duration: 5.3s; }
.soap-bubble:nth-child(7) { width: 10%; height: 10%; left: 88%; top: 58%; animation-delay: -2.6s; animation-duration: 3.8s; }
.soap-bubble:nth-child(8) { width: 13%; height: 13%; left: 14%; top: 4%; animation-delay: -1.2s; animation-duration: 4.4s; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(1) { left: 10%; top: 18%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(2) { left: 48%; top: 5%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(3) { left: 52%; top: 45%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(4) { left: 28%; top: 67%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(5) { left: 27%; top: 4%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(6) { left: 7%; top: 75%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(7) { left: 87%; top: 28%; }
.bubble-track:nth-child(3n+2) .soap-bubble:nth-child(8) { left: 65%; top: 86%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(1) { left: 31%; top: 3%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(2) { left: 2%; top: 25%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(3) { left: 59%; top: 52%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(4) { left: 33%; top: 62%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(5) { left: 81%; top: 32%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(6) { left: 4%; top: 69%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(7) { left: 61%; top: 83%; }
.bubble-track:nth-child(3n) .soap-bubble:nth-child(8) { left: 6%; top: 3%; }
@keyframes bubble-sway {
  from { transform: translateX(-5%) rotate(-5deg); }
  to { transform: translateX(5%) rotate(5deg); }
}
@keyframes bubble-wobble {
  from { transform: translate(-5%, 6%) scale(1.025, .975); }
  to { transform: translate(7%, -8%) scale(.98, 1.02); }
}
@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10%, 88% { opacity: var(--bubble-opacity); }
  25% { transform: translate3d(calc(var(--drift) * .45), -25%, 0); }
  50% { transform: translate3d(calc(var(--drift) * -.25), -50%, 0); }
  75% { transform: translate3d(calc(var(--drift) * .6), -75%, 0); }
  100% { transform: translate3d(var(--drift), -100%, 0); opacity: 0; }
}
@media (min-width: 1024px) {
  .bubble-track:nth-child(n+4) { --bubble-opacity: .7; }
}
@media (max-width: 1023px) {
  .hero-art { --bubble-opacity: .58; }
  .bubble-track { --bubble-size: var(--mobile-size); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { display: none; }
}