/**
* Animated landing hero (mascot + speech bubble).
*
* Revert without deleting files:
* - Set data-hero-bubble="off" on , or open ?hero=static
*
* Preview grow animation when OS "reduce motion" is on: ?hero=motion
*
* Full removal: remove the landing-hero.css / landing-hero.js tags from index.html
* and restore the static ![]()
block (see index.html comment).
*/
html[data-hero-bubble="off"] .hero-mascot-wrap .speech-bubble-wrap {
display: none;
}
html[data-hero-bubble="off"] .hero-mascot-wrap .hero-stage {
display: block;
}
html[data-hero-bubble="off"] .hero-mascot-wrap .hero-logo {
width: min(180px, 42vw);
margin: 0 auto;
}
html[data-hero-bubble="on"] .hero-mascot-wrap {
--tail-y: 46px;
--bubble-gap: -18px;
--bubble-bg-opacity: 0.6;
--bubble-max-width: 340px;
--hero-figure-width: min(192px, 36vw);
--bubble-offset-y: 12px;
--grow-delay-ms: 1200;
--pulse-duration: 4.7s;
--pulse-delay: 0.1s;
--pulse-scale-x: 1.019;
--pulse-scale-y: 1.015;
}
.hero-mascot-wrap {
width: 100%;
margin: 0 auto 0.5rem;
}
.hero-mascot-wrap .svg-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.hero-mascot-link {
display: block;
color: inherit;
text-decoration: none !important;
-webkit-text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hero-mascot-link:hover,
.hero-mascot-link:focus,
.hero-mascot-link:focus-visible,
.hero-mascot-link:visited,
.hero-mascot-link .speech-line {
color: inherit;
text-decoration: none !important;
-webkit-text-decoration: none;
}
html[data-hero-bubble="off"] .hero-mascot-link {
width: fit-content;
margin: 0 auto;
}
@media (hover: hover) and (pointer: fine) {
.hero-mascot-link:hover .hero-logo,
.hero-mascot-link:focus-visible .hero-logo {
filter: brightness(1.04);
}
}
.hero-mascot-wrap .hero-stage {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
gap: 0;
width: 100%;
}
.hero-mascot-wrap .hero-figure {
flex: 0 0 auto;
width: var(--hero-figure-width, min(200px, 36vw));
position: relative;
}
html[data-hero-bubble="on"] .hero-mascot-wrap .hero-logo {
display: block;
width: 100%;
height: auto;
margin: 0;
position: relative;
z-index: 2;
pointer-events: none;
}
/* Jello mascot canvas (js/landing-hero-jello.js) — swapped in over the ![]()
when WebGL is available. Hero PNGs are 819x1024; JS re-syncs the ratio. */
html[data-hero-bubble="on"] .hero-mascot-wrap .hero-jello-canvas {
display: block;
width: 100%;
height: auto;
aspect-ratio: 819 / 1024;
position: relative;
z-index: 2;
will-change: transform;
}
html[data-hero-bubble="on"] .hero-mascot-wrap .hero-logo.hero-logo--jello {
display: none;
}
.speech-bubble-wrap {
position: relative;
flex: 1 1 0;
min-width: 0;
max-width: var(--bubble-max-width);
margin-top: var(--bubble-offset-y, 0);
margin-left: var(--bubble-gap);
align-self: flex-start;
}
.speech-bubble-wrap.is-animating.is-goo-on {
filter: url(#goo);
}
.speech-bubble-wrap.is-settled {
filter: none;
}
.speech-bubble {
--tail-bg: rgb(255 255 255 / var(--bubble-bg-opacity));
position: relative;
width: 100%;
padding: 0.85rem 1rem 0.65rem;
border: none;
border-radius: 1.15rem;
background-color: var(--tail-bg);
box-shadow: none;
transform-origin: left var(--tail-y);
overflow: visible;
visibility: visible;
}
/* Pending: keep bubble slot in the flex row (mascot stays put) but collapse inner content. */
html[data-hero-bubble="on"] .speech-bubble-wrap.is-grow-pending {
pointer-events: none;
}
html[data-hero-bubble="on"] .speech-bubble-wrap.is-grow-pending .speech-bubble {
visibility: hidden;
height: 0;
min-height: 0;
padding: 0;
border: none;
background: transparent;
overflow: hidden;
}
html[data-hero-bubble="on"] .speech-bubble-wrap.is-grow-pending .speech-frame,
html[data-hero-bubble="on"] .speech-bubble-wrap.is-grow-pending .speech-tail {
display: none;
}
html[data-hero-bubble="on"] .speech-bubble-wrap.is-grow-pending .speech-bubble,
html[data-hero-bubble="on"] .speech-bubble-wrap.is-growing .speech-bubble {
overflow: hidden;
will-change: transform, border-radius;
}
html[data-hero-bubble="on"] .speech-bubble-wrap.is-growing .speech-bubble {
visibility: visible;
}
html[data-hero-bubble="on"] .speech-bubble-wrap.is-growing .speech-line {
opacity: 0;
}
.speech-bubble-wrap.is-animating.is-goo-on {
filter: url(#goo);
}
.speech-bubble-wrap.is-settled .speech-bubble {
overflow: visible;
transform: scale(1, 1);
border-radius: 1.15rem;
}
.speech-tail {
position: absolute;
left: -14px;
top: var(--tail-y);
z-index: 0;
width: 14px;
height: 22px;
transform: translateY(-50%);
overflow: visible;
pointer-events: none;
opacity: 0;
}
.speech-tail-fill {
fill: var(--tail-bg);
stroke: none;
}
.speech-frame {
position: absolute;
left: -14px;
top: 0;
width: calc(100% + 14px);
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 0;
display: none;
}
.speech-frame-fill {
fill: var(--tail-bg);
stroke: none;
}
.speech-frame-stroke {
fill: none;
stroke: transparent;
stroke-width: 2;
stroke-linecap: butt;
stroke-linejoin: round;
}
.speech-bubble-wrap.is-settled .speech-frame {
display: block;
}
.speech-bubble-wrap.is-settled .speech-bubble {
background-color: transparent;
animation: hero-bubble-pulse var(--pulse-duration) ease-in-out var(--pulse-delay) infinite;
border-radius: 1.15rem;
}
.speech-bubble-wrap.is-settled .speech-tail {
display: none;
}
.speech-bubble.reset-pseudos .speech-tail {
animation: none !important;
opacity: 0 !important;
}
.speech-line {
position: relative;
z-index: 1;
margin: 0;
font-size: clamp(0.76rem, 2.65vw, 0.9rem);
font-weight: 500;
line-height: 1.42;
letter-spacing: -0.01em;
text-align: left;
hyphens: auto;
opacity: 1;
}
@keyframes tail-fade-in {
0%,
72% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hero-bubble-pulse {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(var(--pulse-scale-x), var(--pulse-scale-y));
}
}
/* Phones & small tablets: keep mascot size; bubble shrinks to remaining row width */
@media (max-width: 520px) {
html[data-hero-bubble="on"] .hero-mascot-wrap {
--hero-figure-width: min(168px, 36vw);
--bubble-max-width: min(
340px,
calc(100vw - 3rem - var(--hero-figure-width) - var(--bubble-gap, 0px) - 6px)
);
--bubble-gap: -18px;
--bubble-offset-y: 8px;
}
.hero-mascot-wrap {
margin-bottom: 0.25rem;
}
.hero-mascot-wrap .hero-figure {
flex: 0 0 auto;
}
.hero-mascot-wrap .hero-stage {
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
max-width: 100%;
}
.speech-bubble-wrap {
align-self: flex-start;
flex: 1 1 0;
width: auto;
}
.speech-bubble {
padding: 0.45rem 0.6rem 0.35rem;
}
.speech-line {
font-size: clamp(0.58rem, 2.4vw, 0.68rem);
line-height: 1.32;
letter-spacing: -0.02em;
}
}
/* Stack only on very narrow viewports (e.g. iPhone SE portrait) */
@media (max-width: 319px) {
.hero-mascot-wrap .hero-stage {
flex-direction: column;
align-items: center;
}
.speech-bubble-wrap {
max-width: min(var(--bubble-max-width), 92vw);
margin-top: 0.75rem;
margin-left: 0;
align-self: center;
}
html[data-hero-bubble="on"] .speech-bubble-wrap.is-grow-pending {
margin-top: 0;
max-height: 0;
overflow: hidden;
}
.speech-frame {
display: none !important;
}
.speech-bubble-wrap.is-settled .speech-bubble {
background-color: var(--tail-bg);
}
.speech-bubble-wrap.is-settled .speech-tail {
display: block;
}
.speech-tail {
left: 50%;
top: -12px;
transform: translateX(-50%) rotate(-90deg);
transform-origin: center bottom;
}
}
@media (prefers-reduced-motion: reduce) {
html:not(.force-motion) .speech-bubble-wrap {
filter: none;
}
html:not(.force-motion) .speech-bubble-wrap.is-settled .speech-bubble {
animation: none;
transform: scale(1, 1);
}
}