/* Sentence cloud — shared by the homepage hero and the AISPA hero.
   Only the quote pieces live here; each page keeps its own hero container so
   the two can differ in size and background while the quotes stay identical. */
.cloud-layer{position:absolute;inset:0;z-index:2}
.cloud-span{
    position:absolute;line-height:1.6;white-space:normal;
    pointer-events:auto;cursor:default;
    transition:opacity .35s ease, filter .35s ease, transform .28s ease;
    will-change:transform,opacity;letter-spacing:-.01em;
    font-weight:500;text-rendering:optimizeLegibility;
    max-width:var(--slot-width, 38ch);text-align:var(--align, left);
    overflow-wrap:break-word;word-break:normal;
}
.cloud-span .label{
    display:block;
    background:linear-gradient(135deg, var(--c1), var(--c2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cloud-company{
    display:block;font-size:0.65em;font-weight:700;
    margin-top:3px;letter-spacing:.03em;
    color:var(--fg3);
}
.cloud-span:hover,.cloud-span:active{
    opacity:1 !important;filter:brightness(1.15) saturate(1.08);
    z-index:10;
}
.cloud-span:hover .cloud-company{color:var(--fg2)}
@keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-11px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7px,8px)}}
@keyframes f3{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,9px)}}
@keyframes f4{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-7px)}}
@keyframes f5{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,4px)}}
@keyframes f6{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,11px)}}


/* Mobile: quotes stop intercepting taps so the hero stays scrollable. */
@media(max-width:768px){
    .cloud-span{max-width:90vw !important;pointer-events:none;opacity:0.75 !important;filter:brightness(1.05) saturate(1.05)}
    .cloud-layer{padding:0 12px;overflow:visible;z-index:8;pointer-events:none}
}