/* Premium polish for the Pass Studio — purely additive: entrance, hover and
   press animations plus smoother transitions. No design-system tokens or
   component behaviour are changed; this only layers motion on top. */

@keyframes spoonity-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spoonity-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spoonity-shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
@keyframes spoonity-swatch { from { opacity: 0; } to { opacity: 1; } }
/* The one delight: the pass gently flips in when the pass type changes. */
@keyframes spoonity-pass-flip {
  from { opacity: 0; transform: perspective(1100px) rotateY(-14deg) scale(.95); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(1100px) rotateY(0deg) scale(1); }
}
.spoonity-pass-flip { animation: spoonity-pass-flip .5s cubic-bezier(.2, .8, .2, 1) both; transform-style: preserve-3d; }

/* Brand-palette swatches cascade in as they're extracted (opacity only, so the
   button hover transform still applies cleanly). */
.spoonity-swatch-in { animation: spoonity-swatch .32s ease both; }

/* Moving sheen on the publish progress bar's fill. */
.spoonity-bar-shine { position: relative; overflow: hidden; }
.spoonity-bar-shine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-120%);
  animation: spoonity-shimmer 1.3s ease-in-out infinite;
}

/* The studio eases up into view on load. */
#root > div { animation: spoonity-rise .5s cubic-bezier(.2, .8, .2, 1) both; }

/* Modals / overlays (publish, export JSON, crop, slot editor) fade in. */
#root div[style*="position: fixed"] { animation: spoonity-fade .2s ease both; }

/* Buttons feel responsive: a gentle hover lift + brightness, satisfying press.
   transform/filter aren't set inline, so this layers cleanly over components. */
#root button {
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease,
              filter .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}
#root button:not(:disabled):hover  { transform: translateY(-1px); filter: brightness(1.05); }
#root button:not(:disabled):active { transform: translateY(0) scale(.97); filter: brightness(.97); transition-duration: .06s; }

/* Inputs & selects ease their focus / hover state. */
#root input, #root select, #root textarea {
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
#root select:hover:not(:disabled) { border-color: var(--border-focused, #ff7e3d) !important; }

/* Placeholders read as clearly empty — noticeably lighter than entered values,
   so a field's filled/empty state is obvious at a glance. */
#root input::placeholder, #root textarea::placeholder { color: var(--typography-tertiary); opacity: .5; }

/* A touch more horizontal breathing room so values don't crowd the edges. */
#root input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="color"]) {
  padding-left: 14px !important; padding-right: 14px !important;
}

/* Color swatches in the picker get a clear hover pop. */
#root button[aria-label^="#"]:not(:disabled):hover { transform: translateY(-1px) scale(1.08); }

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  #root > div,
  #root .spoonity-pass-flip,
  #root div[style*="position: fixed"] { animation: none; }
  #root button:not(:disabled):hover,
  #root button:not(:disabled):active { transform: none; }
}

/* In dark mode the solid-black Apple mark would vanish on dark surfaces in the
   studio chrome — invert it to read as light. (The phone preview manages its
   own appearance separately and is excluded.) */
.dark #root img[src*="apple-mark"] { filter: invert(1) brightness(1.4); }

/* Dark mode readability: the default tertiary token is too dim on the studio's
   dark surfaces (~3.3–3.9:1). Lift muted label/hint text to clear ~4.5:1, and
   keep placeholders legible without looking like entered values. */
.dark { --typography-tertiary: #9aa6b8; }
.dark #root input::placeholder, .dark #root textarea::placeholder { opacity: 0.62; }