/* Responsive artwork keeps its entire orbit inside the hero. */
.welcome{container-type:inline-size;isolation:isolate;overflow:visible;min-height:clamp(219px,48cqi,265px)}
.welcome h1{font-size:clamp(34px,11.5cqi,54px)}
.welcome p{position:relative;z-index:1;font-size:clamp(9px,2.8cqi,12px)}
.welcome-circles{position:absolute;width:clamp(90px,32cqi,210px);aspect-ratio:1;right:4px;top:32px;pointer-events:none;z-index:0}
.welcome-circles i{position:absolute;display:block;border-radius:50%;background:#ff5d57;width:56%;height:56%;left:28%;top:6%;transform-origin:center}
.welcome-circles i:nth-child(2){background:#8c78ff;width:42%;height:42%;left:49%;top:49%}
.welcome-circles i:nth-child(3){background:#c8fa6e;width:26%;height:26%;left:9%;top:56%}
.welcome-circles i:nth-child(4){background:#ffdd74;width:14%;height:14%;left:42%;top:79%}
@media(min-width:1500px){.welcome h1{font-size:62px}.welcome-circles{width:225px;right:8px;top:28px}.welcome{min-height:280px}}
@media(max-width:370px){.welcome-circles{top:37px}}

/* Motion uses transforms and opacity, with no scroll-driven layout work. */
@keyframes club-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(6%,-7%,0) scale(1.035)}
  70%{transform:translate3d(-4%,4%,0) scale(.98)}
}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .welcome-circles i{animation:club-drift 12s ease-in-out infinite;will-change:transform}
  .welcome-circles i:nth-child(2){animation-duration:14s;animation-delay:-5s;animation-direction:reverse}
  .welcome-circles i:nth-child(3){animation-duration:10s;animation-delay:-3s}
  .welcome-circles i:nth-child(4){animation-duration:11s;animation-delay:-7s;animation-direction:reverse}
  .motion-paused .welcome-circles i{animation-play-state:paused}
  dialog[open]::backdrop{animation:backdrop-in 200ms ease-out both}
  .primary,.mobile-compose,.composer-trigger,.club-tile,.filter,.nav-item,.side-club,.rail-club,.icon-button,.reaction,.quiet,.text-button,.audience-option>span{
    transition:transform 200ms cubic-bezier(.22,1,.36,1),background-color 200ms ease,border-color 200ms ease,color 180ms ease,box-shadow 200ms ease;
  }
  .reaction svg,.icon-button svg{transition:fill 180ms ease,color 180ms ease}
  .primary:active,.mobile-compose:active{transform:scale(.96)}
  .filter:active,.nav-item:active,.icon-button:active,.reaction:active,.quiet:active{transform:scale(.96)}
  .composer-trigger:active,.club-tile:active{transform:scale(.985)}
}
@media(hover:hover) and (pointer:fine){
  .composer-trigger:hover{transform:translateY(-2px);border-color:#d7cbbb;box-shadow:0 8px 22px #3e2c1309}
  .mobile-compose:hover{transform:translateY(-2px);box-shadow:0 6px 18px #ff5d5726}
  .club-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px #3e2c1310}
  .rail-club:hover,.text-button:hover{color:#a94840}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .welcome-circles i{will-change:auto}
  .primary:hover,.composer-trigger:hover,.mobile-compose:hover,.club-tile:hover{transform:none}
}