/* Interaction states: only enabled controls respond; the editor canvas stays still. */
:root{
  --ui-ease:cubic-bezier(.2,.75,.25,1);
  --ui-fast:160ms;
  --ui-glow:0 0 0 3px #7254d518,0 8px 22px #5637971c;
}
:where(button,a[href],.dropzone,.project-card[data-project]){
  transition:background-color var(--ui-fast) ease,color var(--ui-fast) ease,
    border-color var(--ui-fast) ease,box-shadow 200ms ease,
    transform 200ms var(--ui-ease),opacity var(--ui-fast) ease;
}
button,a[href]{touch-action:manipulation}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
button:disabled{transform:none;box-shadow:none}
:where(button,a[href],[role="button"],input,select,textarea):focus-visible{
  outline:3px solid #8060dc;outline-offset:3px;
}
:where(input,select,textarea){
  transition:border-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease;
}
.primary{background-image:linear-gradient(120deg,#ffffff0e,transparent)}
a.secondary{display:inline-block;text-decoration:none}
.nav.active{box-shadow:inset 3px 0 0 var(--purple)}
.tools button.selected,.caption-presets button[aria-pressed="true"]{
  box-shadow:0 0 0 2px #7254d518;
}
.sticker-tile.selected{box-shadow:0 0 0 2px #7254d51a}
.project-card:not([data-project]){cursor:default}
.choice-icon,.choice>b>span,.primary.big>span{
  transition:transform 220ms var(--ui-ease);
}
.progress-bar>div{transition:width 220ms ease}
.dropzone.drag{box-shadow:var(--ui-glow)}
#toast{transition:opacity 180ms ease,transform 220ms var(--ui-ease)}
.view:not(.hidden){animation:ui-view-in 240ms var(--ui-ease) both}
dialog[open]{animation:ui-dialog-in 200ms var(--ui-ease) both}
dialog[open]::backdrop{animation:ui-fade-in 160ms ease both}
#home:not(.hidden) .paper{animation:ui-paper-in 850ms var(--ui-ease) backwards}
#home .p1{--paper-angle:-13deg}
#home .p2{--paper-angle:12deg;animation-delay:90ms}
#home .p3{--paper-angle:-5deg;animation-delay:180ms}

@media(hover:hover) and (pointer:fine){
  .primary:enabled:hover,a.primary:hover{
    background-color:#6240c6;box-shadow:0 0 0 4px #7254d51b,0 8px 20px #6040b42e;
    transform:translateY(-2px);
  }
  .secondary:enabled:not(.selected):hover,a.secondary:hover{
    background-color:#ebe2fb;border-color:#a88bdc;box-shadow:var(--ui-glow);
    color:#5b37ac;transform:translateY(-1px);
  }
  .admin-tabs .selected:enabled:hover{background-color:#6240c6;box-shadow:var(--ui-glow)}
  :is(.small-button,.back-button,.text-button,dialog .close,.tools button,.caption-presets button):enabled:hover{
    background-color:#eee6fa;color:#6140b8;border-color:#b69ade;box-shadow:0 0 0 3px #7254d511;
    transform:translateY(-1px);
  }
  .tools button.selected:enabled:hover{background-color:#e2d5f8}
  .nav:enabled:hover{background-color:#ede6fa;color:#5d3ab4}
  .nav.active:enabled:hover{background-color:#e2d7f6}
  .choice:enabled:hover,.project-card[data-project]:hover{
    background-color:#fdfaff;border-color:#b49adc;box-shadow:var(--ui-glow);
    transform:translateY(-3px);
  }
  .choice:enabled:hover .choice-icon{transform:rotate(-5deg) scale(1.06)}
  .choice:enabled:hover>b>span,.primary.big:enabled:hover>span{transform:translate(2px,-2px)}
  .dropzone:not([aria-disabled="true"]):hover{
    background-color:#f0e8fc;border-color:#a48ad6;box-shadow:var(--ui-glow);
  }
  .sticker-tile:enabled:hover{border-color:#b39bdc;background-color:#ede5f8;box-shadow:0 3px 10px #6040921a}
  .sticker-tile.selected:enabled:hover{border-color:var(--purple)}
  .swatch:enabled:hover,.color-palette button:enabled:hover{
    outline:2px solid #a58acd;outline-offset:3px;transform:scale(1.1);
  }
  :is(.small-button,.text-button).danger:enabled:hover{
    color:#ac3544;background-color:#fff0f1;border-color:#d69ba3;box-shadow:0 0 0 3px #bf526212;
  }
  a[href]:not(.brand):not(.primary):not(.secondary):hover{color:#5b37ac;text-decoration:underline;text-underline-offset:3px}
  .brand:hover .brand-icon{transform:rotate(-2deg)}
}
.brand-icon{transition:transform 220ms var(--ui-ease)}
/* Press feedback also works on touch screens, without sticky hover states. */
button:enabled:active,a.primary:active,a.secondary:active,.project-card[data-project]:active{
  transform:translateY(1px) scale(.98);transition-duration:70ms;
}
.choice:enabled:active,.project-card[data-project]:active{transform:translateY(1px) scale(.99)}
.nav:enabled:active{background-color:#e1d4f7}
@media(max-width:760px){
  .nav.active{box-shadow:inset 0 2px 0 var(--purple)}
}
@keyframes ui-view-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ui-paper-in{
  from{opacity:0;transform:translateY(12px) rotate(var(--paper-angle)) scale(.96)}
  to{opacity:1;transform:translateY(0) rotate(var(--paper-angle)) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  button:enabled:hover,button:enabled:active,a.primary:hover,a.primary:active,
  a.secondary:hover,a.secondary:active,.project-card[data-project]:hover,.project-card[data-project]:active,
  .choice:enabled:hover .choice-icon,.choice:enabled:hover>b>span,.primary.big:enabled:hover>span{transform:none}
  .brand:hover .brand-icon{transform:rotate(-7deg)}
}