/* Homepage polish. Decorations never intercept input or change app artwork. */
.home-page .home-hero {
  position: relative;
  isolation: isolate;
  gap: clamp(32px, 5vw, 76px);
  padding-block: 62px 76px;
}
.home-page .home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 84% 37%, #c6b9f523, transparent 57%),
              radial-gradient(ellipse at 51% 80%, #d9f56f19, transparent 46%);
}
.home-page .home-hero h1 {text-wrap: balance; letter-spacing: -.065em}
.home-page .home-title-accent {white-space: nowrap}
.home-title-accent::after {
  content: '';
  position: absolute;
  inset: auto 0 -.035em;
  height: .055em;
  min-height: 2px;
  border-radius: 60% 40% 50% 40%;
  background: linear-gradient(90deg, var(--cobalt), #a3a6fa 65%, transparent);
  opacity: .65;
}
.home-page .hero-description {max-width: 440px}
.home-page .home-search {box-shadow: 0 4px 20px #20283804; transition: border-color .2s, box-shadow .2s}
.home-page .home-search:focus-within {box-shadow: 0 6px 28px #284bed14}
.home-page .home-hero-stage {padding: 34px 16px; isolation: isolate}
.home-page .home-hero-stage::before {
  inset: 25px 13px;
  border-radius: 27px;
  transform: rotate(3deg);
}
.home-hero-stage > .home-playground {position: relative; z-index: 1; box-shadow: 0 20px 50px #20272612}
.home-orbital-art {position: absolute; inset: -18px -12px; overflow: hidden; pointer-events: none; z-index: 0}
.home-orbit-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#817cae18 1px, transparent 1px), linear-gradient(90deg, #817cae18 1px, transparent 1px);
  background-size: 27px 27px;
  mask-image: radial-gradient(ellipse, #000 15%, transparent 69%);
}
.home-orbit-halo {position: absolute; inset: 4% 0; border-radius: 50%; background: radial-gradient(ellipse, #c6b9f54d, #d9f56f1f 58%, transparent 72%)}
.home-orbit-ring, .home-orbit-track {position: absolute; border: 1px solid #a19ac342; border-radius: 50%; pointer-events: none}
.home-orbit-ring-wide {width: 115%; height: 74%; top: 12%; left: -8%; transform: rotate(-34deg)}
.home-orbit-track {inset: 0 5%; border-style: dashed; border-color: #a19ac34a; animation: home-orbit-spin 34s linear infinite}
.home-orbit-dot {position: absolute; top: 11%; left: 15%; width: 9px; height: 9px; border-radius: 50%; background: #92ad46; box-shadow: 0 0 0 5px #d9f56f38}
.home-float-token {position: absolute; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; border: 1px solid #c3b9df; box-shadow: 0 6px 14px #2421320d; animation: home-token-drift 7s ease-in-out infinite}
.home-float-token > .icon {width: 22px; height: 22px}
.home-token-play {top: 0; left: 12%; background: #d9f56f; color: #25321d; rotate: -13deg}
.home-token-code {bottom: 1%; right: 12%; background: #eee9ff; color: #4d4492; rotate: 12deg; animation-delay: -3.5s}
.home-orbit-spark {position: absolute; right: 1%; top: 16%; color: #7c72aa; rotate: 13deg; animation: home-spark-turn 12s ease-in-out infinite}
.home-orbit-spark .icon {width: 24px; height: 24px}

.home-playground .home-motion-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 3px;
  border: 0;
  background: transparent;
  color: var(--hp-muted);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: none;
  white-space: nowrap;
}
.home-playground .home-motion-control:hover {color: var(--hp-ink)}
.home-playground .home-motion-control[hidden] {display: none !important}
.home-motion-symbol {width: 11px; height: 11px; border-inline: 3px solid currentColor; flex: 0 0 11px}
.home-motion-control[aria-pressed=true] .home-motion-symbol {height: 0; width: 0; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; flex-basis: 9px}

.home-page .home-section-heading h2 {text-wrap: balance}
.home-page .project-card {border-radius: 18px; box-shadow: 0 3px 12px #24273a03}
.home-page .card-art-link {overflow: hidden; border-radius: 17px 17px 0 0}
.home-page .project-card .artwork {transition: scale .45s cubic-bezier(.2,.7,.2,1)}
.home-page .home-card {transition: transform .25s, box-shadow .25s, border-color .25s}
.home-page .home-launch .icon, .home-page .text-link > .icon, .home-page .hero-actions .icon {transition: translate .2s}
.home-page .home-features {position: relative; box-shadow: 0 10px 36px #24273a04}
.home-page .home-feature-tab {transition: background .2s, color .2s, border-color .2s}
.home-page .home-feature-panel:not([hidden]) {animation: home-panel-enter .35s ease both}
.home-page .home-collection-link {transition: translate .2s, background .2s}
.home-page .home-browser-art {animation: home-browser-float 8s ease-in-out infinite}
.home-page .home-orbits span {animation: home-orbit-sway 13s ease-in-out infinite}
.home-page .home-orbits span:nth-child(2) {animation-delay: -6.5s}
.home-page .home-connection-line {border: 0; height: 2px; background: repeating-linear-gradient(90deg, #7a7291 0 5px, transparent 5px 11px); background-size: 22px 2px; animation: home-data-flow 1.4s linear infinite}
.home-page .hp-live > span {animation: home-status-pulse 3s ease-in-out infinite}
.home-page .hp-story-star {animation: home-spark-turn 12s ease-in-out infinite}
.home-page .hp-composition-orbit {animation: home-orbit-sway 13s ease-in-out infinite}
.home-page .home-weekly-orbit {animation: home-browser-float 8s ease-in-out infinite}
.home-page .home-weekly, .home-page .home-journal {box-shadow: 0 6px 22px #24273a04}
.home-page .home-create-banner {isolation: isolate; border: 1px solid #ffffff0c}
.home-create-banner > :not(.home-banner-art) {position: relative; z-index: 1}
.home-banner-art {position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; mask-image: linear-gradient(90deg, transparent 20%, #000 78%)}
.home-banner-art > span {position: absolute; width: 390px; height: 390px; top: -48%; right: 0; border: 1px solid #d9f56f38; border-radius: 50%; animation: home-banner-orbit 26s linear infinite}
.home-banner-art > span:nth-child(2) {inset: auto -6% -90% auto; width: 530px; height: 530px; border-color: #c6b9f53d; animation-direction: reverse; animation-duration: 34s}
.home-banner-art > span:nth-child(3) {inset: 8% -12% auto auto; width: 320px; height: 320px; border-color: #c6b9f51f; animation-delay: -12s}
.home-banner-art > span::before {content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; left: -4px; background: #d9f56f}

/* Loop only the graphics whose own section is on screen. */
.home-page :is(.home-orbit-track,.home-orbit-spark,.home-float-token,.home-browser-art,.home-orbits span,.home-connection-line,.hp-live > span,.hp-story-star,.hp-composition-orbit,.home-weekly-orbit,.home-banner-art > span) {animation-play-state: paused}
.home-page[data-home-motion=playing] [data-home-motion-visible=true] :is(.home-orbit-track,.home-orbit-spark,.home-float-token,.home-browser-art,.home-orbits span,.home-connection-line,.hp-live > span,.hp-story-star,.hp-composition-orbit,.home-weekly-orbit,.home-banner-art > span) {animation-play-state: running}

@keyframes home-orbit-spin {to {transform: rotate(360deg)}}
@keyframes home-token-drift {0%,100% {translate: 0 0} 50% {translate: 0 -7px}}
@keyframes home-spark-turn {0%,100% {rotate: -8deg} 50% {rotate: 16deg}}
@keyframes home-browser-float {0%,100% {translate: 0 0} 50% {translate: 0 -6px}}
@keyframes home-orbit-sway {0%,100% {rotate: -8deg} 50% {rotate: 8deg}}
@keyframes home-data-flow {to {background-position-x: 22px}}
@keyframes home-status-pulse {0%,100% {opacity: .65; scale: 1} 50% {opacity: 1; scale: 1.25}}
@keyframes home-banner-orbit {to {rotate: 360deg}}
@keyframes home-panel-enter {from {opacity: .5; translate: 0 6px} to {opacity: 1; translate: 0 0}}

@media (prefers-reduced-motion: no-preference) {
  .home-motion-ready[data-home-motion=playing] [data-home-reveal] {transition: opacity .55s ease, translate .65s cubic-bezier(.2,.7,.2,1); transition-delay: var(--home-reveal-delay, 0ms)}
  .home-motion-ready[data-home-motion=playing] [data-home-reveal]:not([data-home-revealed=true]) {opacity: 0; translate: 0 14px}
  .home-motion-ready [data-home-revealed=true] {opacity: 1; translate: 0 0}
}
@media (hover: hover) and (pointer: fine) {
  .home-page .project-card:hover .artwork {scale: 1.025}
  .home-page .home-card:hover {transform: translateY(-5px); border-color: #9e9cbb; box-shadow: 0 16px 32px #24273a0d}
  .home-page .home-launch:hover .icon, .home-page .text-link:hover > .icon, .home-page .hero-actions .button:hover .icon {translate: 3px 0}
  .home-page .home-collection-link:hover {translate: 3px 0}
}
:root[data-theme=gaming] .home-page .home-hero::before {background: radial-gradient(ellipse at 84% 37%, #5e4cb423, transparent 57%), radial-gradient(ellipse at 50% 80%, #92bd6310, transparent 46%)}
:root[data-theme=gaming] .home-page .home-hero-stage > .home-playground {box-shadow: 0 24px 60px #02050d55}
:root[data-theme=gaming] .home-orbit-grid {background-image: linear-gradient(#c6b9f51a 1px, transparent 1px), linear-gradient(90deg, #c6b9f51a 1px, transparent 1px)}
:root[data-theme=gaming] .home-orbit-halo {background: radial-gradient(ellipse, #7962b729, #a1bc6510 58%, transparent 72%)}
:root[data-theme=gaming] .home-token-code {background: #353050; border-color: #736294; color: #d7caff}
:root[data-theme=gaming] .home-orbit-spark {color: #b9a6ee}

@media (max-width: 1050px) {
  .home-page .home-hero {padding-block: 42px 54px}
  .home-page .home-hero-stage {padding-inline: 10px}
}
@media (max-width: 800px) {
  .home-page .home-hero {gap: 18px; padding-block: 36px 44px}
  .home-page .home-hero-stage {padding-block: 27px}
  .home-page .hero-description {max-width: 550px}
  .home-float-token {width: 37px; height: 37px; border-radius: 11px}
  .home-float-token > .icon {width: 18px; height: 18px}
}
@media (max-width: 560px) {
  .home-page .home-hero {gap: 16px}
  .home-page .home-hero-stage {padding: 25px 0}
  .home-page .home-hero-stage::before {inset: 24px 10px}
  .home-orbital-art {inset: 0 -6px}
  .home-orbit-spark {display: none}
  .home-token-play {top: 1px; left: 9%}
  .home-token-code {bottom: 0; right: 9%}
  .home-float-token {width: 32px; height: 32px; border-radius: 10px}
  .home-float-token > .icon {width: 16px; height: 16px}
  .home-page .home-title-accent {white-space: normal}
  .home-title-accent::after {display: none}
  .home-playground .home-motion-control {min-height: 40px}
  .home-playground .hp-footer {padding-block: 4px}
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important}
  .home-page [data-home-reveal] {opacity: 1; translate: none}
  .home-page .project-card:hover .artwork {scale: 1}
  .home-page .home-card:hover, .home-page .home-collection-link:hover {transform: none; translate: none}
}
.home-page:is([data-home-motion=paused],[data-home-motion=reduced],[data-home-motion=stopped]) .home-feature-panel {animation: none}
@media (forced-colors: active) {
  .home-orbital-art, .home-banner-art {display: none}
  .home-page .home-title-accent {color: LinkText}
  .home-motion-symbol {color: ButtonText}
}