/* Motion is limited to the site shell, never the drawing editor or OBS. */
.copy-button[data-copied=true]{color:var(--sky-500)}
.achievement-celebrating{position:relative;overflow:visible}
.achievement-celebration{position:absolute;inset:0;pointer-events:none;z-index:3}
.achievement-celebration>span{position:absolute;right:12%;top:30%;width:1rem;height:1rem;color:var(--sky-500);opacity:0;--dx:-22px;--dy:-24px;--turn:-16deg}
.achievement-celebration>span:nth-child(2){right:6%;top:60%;--dx:18px;--dy:-20px;--turn:20deg}
.achievement-celebration>span:nth-child(3){right:27%;top:55%;--dx:-14px;--dy:-32px;--turn:-24deg}
.achievement-celebration>span:nth-child(4){right:20%;top:20%;--dx:10px;--dy:-28px;--turn:14deg}
.achievement-celebration .icon{width:100%;height:100%;fill:#b5e4ff;overflow:visible}
.navigation,.category-tabs{isolation:isolate}
.category-tabs{position:relative}
.navigation .nav-link,.category-tabs .tab{position:relative;z-index:1}
.selection-indicator{position:absolute;left:0;top:0;z-index:0;pointer-events:none;display:block;background:linear-gradient(140deg,#d2eaff,#e4f7ff);box-shadow:inset 0 1px 1px #ffffffa8}
.selection-indicator[hidden]{display:none}
.category-tabs>.selection-indicator{background:var(--control-selected-background);box-shadow:inset 0 1px 1px #d1f4ff,0 1px 3px #72afe32b}
.navigation[data-selection-motion=ready] .nav-link[aria-current=page],
.category-tabs[data-selection-motion=ready] .tab[aria-selected=true]{background:transparent;box-shadow:none}
.app-shell .feature-card,.app-shell .feature-card:hover{cursor:default;border-color:var(--border);box-shadow:var(--shadow-card)}

@media (prefers-reduced-motion: no-preference) {
  .app-shell .button[data-drawing-ready=true]:not(:disabled):not([hidden]){
    animation:heon-drawing-available 2400ms ease-in-out infinite;
  }
  .achievement-celebrating{animation:heon-achievement-glow 1500ms ease-out}
  .achievement-celebration>span{animation:heon-achievement-stars 1500ms ease-out}
  .app-shell .button,
  .app-shell .tab,
  .app-shell .nav-link {
    transition: background-color 180ms ease, border-color 180ms ease,
      box-shadow 180ms ease, color 180ms ease, scale 130ms ease,
      translate 240ms ease;
  }

  .app-shell .button:active:not(:disabled),
  .app-shell .tab:active:not(:disabled),
  .app-shell .nav-link:active {
    scale: .97;
  }

  [data-selection-motion=ready]>.selection-indicator{
    transition:transform 340ms cubic-bezier(.22,1,.36,1),width 340ms ease,height 340ms ease;
  }

  #dialog[open]{animation:heon-dialog-in 260ms cubic-bezier(.22,1,.36,1)}
  #dialog[open]::backdrop{animation:heon-backdrop-in 220ms ease-out}

  .app-shell .progress > span {
    transform-origin: left center;
  }

  .app-shell .sparkles .decoration--sparkle {
    animation: heon-star-shimmer 5.5s ease-in-out infinite;
  }

  .app-shell .sparkles .decoration--heart,
  .app-shell .sparkles .decoration--paw {
    animation: heon-heart-drift 7s ease-in-out infinite;
  }

  .app-shell .sparkles .decoration--star {
    animation: heon-star-shimmer 5.5s ease-in-out infinite,
      heon-heart-drift 7s ease-in-out infinite;
  }

  .app-shell .sparkles .decoration:nth-child(4n + 1) { animation-delay: -1.2s; }
  .app-shell .sparkles .decoration:nth-child(4n + 2) { animation-delay: -3.5s; }
  .app-shell .sparkles .decoration:nth-child(4n + 3) { animation-delay: -2.3s; }
  .app-shell .sparkles .decoration:nth-child(4n) { animation-delay: -4.7s; }
}

@keyframes heon-achievement-glow{
  0%,100%{box-shadow:var(--shadow-card)}
  35%{box-shadow:0 0 0 3px #9bd8ff88,0 0 24px #77bdff55,inset 0 1px 0 #fff}
}
@keyframes heon-drawing-available{
  0%,100%{box-shadow:0 0 0 0 #7bcfff00,0 0 5px #74baff22}
  50%{box-shadow:0 0 0 6px #7bcfff44,0 0 24px #74baff77}
}
@keyframes heon-achievement-stars{
  0%{opacity:0;translate:0 8px;scale:.5}
  25%{opacity:1;scale:1}
  100%{opacity:0;translate:var(--dx) var(--dy);rotate:var(--turn);scale:.7}
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .app-shell .button:hover:not(:disabled) {
    translate: 0 -2px;
  }
}

@keyframes heon-dialog-in{
  from{opacity:0;scale:.97;translate:0 8px}
  to{opacity:1;scale:1;translate:0 0}
}
@keyframes heon-backdrop-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes heon-star-shimmer {
  0%, 100% { opacity: .2; scale: .88; }
  50% { opacity: 1; scale: 1.16; }
}

@keyframes heon-heart-drift {
  0%, 100% { translate: -7px 0; rotate: -9deg; }
  50% { translate: 7px -22px; rotate: 9deg; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .button[data-drawing-ready=true]:not(:disabled):not([hidden]){
    outline:2px solid var(--sky-500);
    outline-offset:3px;
  }
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after,
  #dialog,
  #dialog::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}