/**
 * "Bubble" logo variant (inc/seeds-bubble-logo.php): size, switching and motion.
 * The petal ring turns by --ring (loop), --spin (hover, set by seeds-v3.js) and --enter (entrance);
 * --turn adds them up for the ring and, negated, for the petal highlights so the light stays top left.
 */
@property --ring { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --enter { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

/* Only one style is visible when both are printed (local switcher). */
:root:not([data-logo-style="bubble"]) .h-wordmark--classic + .h-wordmark--bubble { display: none !important; }
:root[data-logo-style="bubble"] .h-wordmark--classic:has(+ .h-wordmark--bubble) { display: none !important; }

/* Flower box 1.5 × --wm (it includes the motion dashes, so it may overhang), letters .8 × --wm tall:
   the petals end up about 1.7 × the letter height, as in the reference. */
.h-wordmark--bubble { gap: 0; }
.h-wordmark--bubble .bb-flower { flex: none; width: calc(var(--wm) * 1.5); height: calc(var(--wm) * 1.5); margin: calc(var(--wm) * -.25) calc(var(--wm) * -.14) calc(var(--wm) * -.25) calc(var(--wm) * -.2); overflow: visible; }
/* The bubble lockup is wider than the classic one; on desktop it scales a bit smaller so the nav keeps its room. */
@media (min-width: 1000px) { .h-header .h-wordmark--bubble { --wm: clamp(36px, 2.7vw, 54px); } }
.h-wordmark--bubble .bb-word { flex: none; height: calc(var(--wm) * .8); width: auto; aspect-ratio: 726 / 136; overflow: visible; }

.bb-flower { --turn: calc(var(--ring) + var(--spin) + var(--enter)); transition: --spin .9s var(--h-spring, cubic-bezier(.34, 1.56, .64, 1)); }
.bb-ring { rotate: var(--turn); }
.bb-gloss { rotate: calc(-1 * var(--turn)); }
.bb-ring, .bb-gloss, .bb-head, .bb-petal { transform-origin: 0 0; }
.bb-eye, .bb-spark, .bb-dash, .bb-mouth, .bw-l { transform-box: fill-box; transform-origin: center; }
.bw-l { transform-origin: 50% 90%; }

/* Entrance (homepage, and when the logo is switched in the colour menu). */
.h-wordmark--enter .bb-flower { animation: bb-enter 1s var(--h-spring) both; }
.h-wordmark--enter .bb-head, .h-wordmark--enter .bb-ink > .bb-face { animation: bb-pop .62s var(--h-spring) both; }
.h-wordmark--enter .bb-petal { animation: bb-pop .5s var(--h-spring) both; animation-delay: calc(.12s + var(--i) * .05s); }
.h-wordmark--enter .bb-eye { animation: bb-eye-open .34s var(--h-spring) both; animation-delay: calc(.45s + var(--i) * .07s); }
.h-wordmark--enter .bb-mouth { animation: bb-grin .4s .58s var(--h-spring) both; }
.h-wordmark--enter .bb-spark { animation: bb-spark .5s var(--h-spring) both; animation-delay: calc(.75s + var(--i) * .08s); }
.h-wordmark--enter .bb-dash { animation: bb-pop .4s var(--h-spring) both; animation-delay: calc(.8s + var(--i) * .06s); }
.h-wordmark--enter .bw-l { animation: bb-rise .6s var(--h-spring) both; animation-delay: calc(.5s + var(--i) * .055s); }
@keyframes bb-enter { from { --enter: -103deg; } to { --enter: 0deg; } }
@keyframes bb-pop { from { transform: scale(0); } }
@keyframes bb-eye-open { from { transform: scaleY(0); } }
@keyframes bb-grin { from { transform: scale(.2, 0); } }
@keyframes bb-spark { from { transform: scale(0) rotate(-90deg); } }
@keyframes bb-rise { from { opacity: 0; transform: translateY(60px); } }

/* Loop: the ring sways, eyes blink, sparkles twinkle, the dashes flick now and then. Loops use rotate/scale,
   entrances use transform, so both can run on the same element. */
.bb-alive { animation: bb-sway 7s ease-in-out infinite; }
.h-wordmark--enter .bb-alive { animation: bb-enter 1s var(--h-spring) both, bb-sway 7s 1s ease-in-out infinite; }
.bb-alive .bb-eye { animation: bb-blink 5.4s infinite; animation-delay: calc(var(--i) * .04s); }
.h-wordmark--enter .bb-alive .bb-eye { animation: bb-eye-open .34s var(--h-spring) both, bb-blink 5.4s 1.4s infinite; animation-delay: calc(.45s + var(--i) * .07s), 1.4s; }
.bb-alive .bb-spark { animation: bb-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
.h-wordmark--enter .bb-alive .bb-spark { animation: bb-spark .5s var(--h-spring) both, bb-twinkle 2.4s 1.3s ease-in-out infinite; animation-delay: calc(.75s + var(--i) * .08s), calc(1.3s + var(--i) * -1.2s); }
.bb-alive .bb-dash { animation: bb-flick 3.8s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(1.2s + var(--i) * .07s); }
.h-wordmark--enter .bb-alive .bb-dash { animation: bb-pop .4s var(--h-spring) both, bb-flick 3.8s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(.8s + var(--i) * .06s), calc(1.6s + var(--i) * .07s); }
@keyframes bb-sway { 0%, 100% { --ring: -5deg; } 50% { --ring: 5deg; } }
@keyframes bb-blink { 0%, 93%, 100% { scale: 1 1; } 95.5% { scale: 1 .08; } }
@keyframes bb-twinkle { 0%, 100% { scale: 1; } 50% { scale: .45; } }
@keyframes bb-flick { 0%, 14%, 100% { scale: 1; } 4% { scale: .35; } 9% { scale: 1.18; } }

@media (prefers-reduced-motion: reduce) {
	.h-wordmark--bubble *, .bb-flower { animation: none !important; transition: none !important; }
}