/* The flask logo and its motion, shared by every page of the site: the landing
   page, the 404 page, the Break demo and the parity bench (which imports this
   file into its own build). Needs --ink, --paper, --green and --signal. */

:root { --liquid: var(--green); --rot: var(--signal); }
/* Reserve the scrollbar's space so the header doesn't shift between short and long pages. */
html { scrollbar-gutter: stable; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .flask, .logo-slot { width: 34px; height: 34px; display: block; }

/* flask motion (docs/BRAND.md, "Motion") */
.flask { overflow: visible; display: block; }
.flask .body { transform-origin: 32px 56px; }
.flask .bubble { transform-box: fill-box; transform-origin: center; }
.flask .cell { fill: var(--liquid); }
.flask .splash { fill: var(--rot); opacity: 0; }
@keyframes swirl {
  0% { transform: rotate(0); } 14% { transform: rotate(-9deg); } 30% { transform: rotate(7deg); }
  46% { transform: rotate(-4deg); } 62% { transform: rotate(2.5deg); } 78% { transform: rotate(-1deg); }
  100% { transform: rotate(0); }
}
@keyframes rise { 0% { transform: translateY(14px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-1px, 0) rotate(-3deg); }
  40% { transform: translate(1px, 0) rotate(3deg); } 60% { transform: translate(-1px, 0) rotate(-2deg); }
  80% { transform: translate(1px, 0) rotate(2deg); }
}
@keyframes drop { 0% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(15px); opacity: 1; } 100% { transform: translateY(17px); opacity: 0; } }
@keyframes spread { 0% { fill: var(--liquid); } 35% { fill: var(--paper); } 100% { fill: var(--rot); } }
@keyframes splash-up { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), -7px); } }
@keyframes jolt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }

.brand.swirl .flask .body, .brand:hover .flask .body { animation: swirl 1.4s cubic-bezier(.3,.6,.4,1) both; }
.brand.bubbling .bubble { animation: rise 1.4s linear infinite; }
.brand.bubbling .bubble.b2 { animation-delay: .45s; }
.brand.bubbling .bubble.b3 { animation-delay: .9s; }

/* Page-load intros (one picked at random by intro() in flask.js). */
.brand.intro-bubbles .flask .body { animation: swirl 1.4s cubic-bezier(.3,.6,.4,1) both; }
.brand.intro-bubbles .bubble { animation: rise 1.2s linear 2; }
.brand.intro-bubbles .bubble.b2 { animation-delay: .3s; }
.brand.intro-bubbles .bubble.b3 { animation-delay: .6s; }
.brand.intro-shake .flask .body { animation: shake .3s linear 5; }
.brand.intro-shake .bubble { animation: rise .8s linear 2; }
.brand.intro-shake .bubble.b3 { animation-delay: .4s; }
/* Break, then repair: the red bit sinks and spreads, then the liquid heals back. */
@keyframes heal { 0% { fill: var(--rot); } 40% { fill: var(--paper); } 100% { fill: var(--liquid); } }
@keyframes reappear { 0% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
.brand.intro-heal .bubble.b2 { animation: drop .5s cubic-bezier(.55, 0, 1, .45) forwards, reappear .4s ease-out 2.8s forwards; }
.brand.intro-heal .cell { animation: spread .3s linear var(--d) forwards, heal .4s linear calc(var(--d) + 1.5s) forwards; }
.brand.intro-heal .splash { animation: splash-up .4s ease-out .45s forwards; }
.brand.intro-heal .flask .body { animation: jolt .4s ease-out .45s; }

@media (prefers-reduced-motion: reduce) {
  .flask, .flask * { animation: none !important; }
}