/* Peony motion: shared timing tokens and the small physical responses that make touches feel real.
 * Only transform, scale, translate and opacity move here (plus two small outline rings), so the
 * compositor can run them at full frame rate even while the main thread is painting polish. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.32, 0, .67, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --spring-press: cubic-bezier(.3, 1.35, .5, 1);
  --spring-pop: cubic-bezier(.3, 1.5, .45, 1);
  --spring-soft: cubic-bezier(.22, 1, .36, 1);
  --t-press: 90ms;
  --t-quick: 160ms;
  --t-base: 240ms;
  --t-slow: 380ms;
  --t-spring-press: 350ms;
  --t-spring-pop: 620ms;
  --t-spring-soft: 600ms;
}
/* Real springs where the browser can express them (same curves as motion.js). */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-press: linear(0, 0.0181 2.7%, 0.0947 6.7%, 0.2285 11.3%, 0.397 16.5%, 0.5724 22%, 0.7311 27.9%, 0.8584 34.1%, 0.9487 40.6%, 1.0039 47.3%, 1.031 54.3%, 1.0384 61.4%, 1.0344 68.8%, 1.0256 76.3%, 1.0161 84.1%, 1.0084 92%, 1);
    --spring-pop: linear(0, 0.0162 2%, 0.0867 5%, 0.2134 8.5%, 0.3781 12.3%, 0.5556 16.5%, 0.7221 20.9%, 0.8604 25.5%, 0.9616 30.4%, 1.0251 35.4%, 1.0562 40.6%, 1.0632 46%, 1.0554 51.5%, 1.0408 57.1%, 1.0253 62.9%, 1.0124 68.8%, 1.0034 74.8%, 0.9983 81%, 0.9962 87.2%, 0.9961 93.5%, 1);
    --spring-soft: linear(0, 0.0183 2.7%, 0.0936 6.7%, 0.2204 11.3%, 0.375 16.5%, 0.5321 22%, 0.6731 27.9%, 0.7878 34.1%, 0.8732 40.6%, 0.9319 47.3%, 0.9688 54.3%, 0.9898 61.4%, 1.0002 68.8%, 1.0043 76.3%, 1.005 84.1%, 1.0042 92%, 1);
  }
}

/* ---- Press. Things you touch give a little under the finger (instantly), then spring back.
 * The individual scale property composes with any positioning transform, so centred controls
 * (like the nail tech's hold button) no longer jump when pressed. */
button:active:not(:disabled), a.primary:active, a.secondary:active, summary:active { scale: var(--press, .97); }
.primary, .secondary, .icon-button, .quiet-button, .dialog-close, .sheet-back, .look-card, .style-card, .saved-card > button,
.finish-tools button, .editor-tabs button, .color-filter button, .zoom-tools button, .comparison-modes button, .share-formats button,
.segmented button, .edge-tools button, .retry-tools button, .shade-tools button, .compare, #toggleOutlines, #savedTop, .save-result-close,
.save-result-share, .save-result-continue, #demoPlayback, .tech-hold, .tech-close, .discovery-result, .discovery-launch {
  transition: scale var(--t-spring-press) var(--spring-press), color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
:is(.primary, .secondary, .icon-button, .quiet-button, .dialog-close, .sheet-back, .look-card, .style-card, .saved-card > button,
.finish-tools button, .editor-tabs button, .color-filter button, .zoom-tools button, .comparison-modes button, .share-formats button,
.segmented button, .edge-tools button, .retry-tools button, .shade-tools button, .compare, #toggleOutlines, #savedTop, .save-result-close,
.save-result-share, .save-result-continue, #demoPlayback, .tech-hold, .tech-close, .discovery-result, .discovery-launch):active:not(:disabled) {
  transition-duration: var(--t-press), var(--t-base), var(--t-base), var(--t-base), var(--t-base);
  transition-timing-function: var(--ease-out);
}
.icon-button, .dialog-close, .sheet-back, .zoom-tools button, .save-result-close, #demoPlayback, .tech-close { --press: .9; }
.full, #saveProject, .look-card, .saved-card > button, .discovery-result { --press: .985; }
.sheet-handle, .color-card, #privacyInfo { --press: 1; }

/* ---- Swatches. The chip presses in; the ring tightens onto the chosen shade while the last one lets go. */
body[data-screen='editor'] .color-card i, .color-card i {
  outline: 2px solid transparent;
  outline-offset: 11px;
  transition: scale var(--t-spring-press) var(--spring-press), translate var(--t-spring-pop) var(--spring-pop), outline-offset var(--t-spring-pop) var(--spring-pop), outline-color var(--t-base) var(--ease-out);
}
body[data-screen='editor'] .color-card.active i, .color-card.active i { outline-color: var(--plum); outline-offset: 4px; translate: 0 -2px; }
.color-card:active i { scale: .9; transition-duration: var(--t-press), var(--t-spring-pop), var(--t-spring-pop), var(--t-base); transition-timing-function: var(--ease-out); }
.color-card span { transition: color var(--t-base) var(--ease-out); }
@media (hover: none) { .color-card:hover i { transform: none; } }
/* A new family arrives as a quick cascade from the left. */
.swatch-cascade .color-card { animation: peony-swatch-in 440ms var(--ease-out) backwards; animation-delay: calc(var(--i, 14) * 22ms); }
@keyframes peony-swatch-in { from { opacity: 0; translate: 10px 6px; } }

/* ---- Segmented controls: one highlight glides to the chosen option (motion.js places it). */
[data-segmented] { position: relative; isolation: isolate; }
[data-segmented] > .seg-pill {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0;
  border-radius: var(--radius-s); background: #fff; box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; will-change: transform;
  transition: transform var(--t-spring-soft) var(--spring-soft), width var(--t-spring-soft) var(--spring-soft), height var(--t-spring-soft) var(--spring-soft), opacity var(--t-quick) var(--ease-out);
}
[data-segmented] > :not(.seg-pill) { position: relative; z-index: 1; }
[data-segmented].seg-ready > :is(button.active, button[aria-pressed='true']) { background: transparent !important; box-shadow: none !important; }
[data-segmented='blush'] > .seg-pill { background: var(--blush); box-shadow: none; border-radius: var(--radius-pill); }

/* ---- Messages rise in on a spring and leave quickly. */
#toast { transform: translate(-50%, 12px) scale(.96); transition: opacity var(--t-quick) var(--ease-in), transform var(--t-base) var(--ease-in); }
#toast.visible { transform: translate(-50%, 0) scale(1); transition: opacity var(--t-base) var(--ease-out), transform var(--t-spring-pop) var(--spring-pop); }

/* ---- The drawer settles on the sheet curve; while a finger drags it, it follows exactly. */
@media (max-width: 700px) {
  body[data-screen='editor'] .controls-panel { transition: height var(--drawer-duration, 440ms) var(--ease-sheet); }
  body.drawer-dragging .controls-panel { transition: none !important; }
}

/* ---- Finding nails: a porcelain veil rests on the photo while a slow sheen crosses it. */
.scan-veil { position: absolute; inset: 0; pointer-events: none; background: rgb(var(--porcelain-rgb) / .2); }
.scan-shimmer:not(.spot) { background: none; }
.scan-shimmer::before {
  width: 62%;
  background: linear-gradient(105deg, #fff0 16%, #ffffff26 36%, #ffffff85 50%, #ffffff26 64%, #fff0 84%);
  animation: peony-scan 2s var(--ease-in-out) infinite;
}

/* ---- The polish flow and layout cross-fades (polish-flow.js). */
.polish-flow, .stage-fade { position: absolute; display: block; pointer-events: none; }
.stage-fade { z-index: 2; }

/* ---- Status lines fade up when they appear instead of popping in. */
body[data-screen='editor'] .photo-status:not([hidden]), body[data-screen='editor'] #qualityCard:not([hidden]) { animation: peony-rise-small var(--t-slow) var(--ease-out) both; }
@keyframes peony-rise-small { from { opacity: 0; transform: translateY(-4px); } }
/* A nail that needs a check: the dot on Touch up pulses twice after the reveal, then rests. */
#toggleOutlines.needs-check::after { animation: peony-dot 1.1s var(--ease-out) 1.3s 2; }
@keyframes peony-dot { 0% { scale: 1; } 30% { scale: 1.9; } 60%, 100% { scale: 1; } }

/* ---- Screens. The editor arrives photo first, then the drawer; the start screen rises in. */
body.enter-editor .preview-panel { animation: peony-rise 560ms var(--ease-out) both; }
body.enter-editor .controls-panel { animation: peony-drawer-in 640ms var(--ease-sheet) 70ms both; }
body.enter-welcome .welcome-copy > * { animation: peony-rise 700ms var(--ease-out) both; }
body.enter-welcome .welcome-copy > :nth-child(2) { animation-delay: 70ms; }
body.enter-welcome .welcome-copy > :nth-child(3) { animation-delay: 130ms; }
body.enter-welcome .welcome-copy > :nth-child(4) { animation-delay: 190ms; }
body.enter-welcome .welcome-demo { animation: peony-card-in 900ms var(--ease-out) 110ms both; }
@keyframes peony-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes peony-drawer-in { from { opacity: 0; transform: translateY(56px); } }
@keyframes peony-card-in { from { transform: translateY(26px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled), a.primary:active, a.secondary:active, summary:active, .color-card:active i { scale: none; }
  .color-card.active i, body[data-screen='editor'] .color-card.active i { translate: none; }
  .swatch-cascade .color-card { animation: none; }
  [data-segmented] > .seg-pill { transition: opacity var(--t-quick) linear; }
  #toast, #toast.visible { transform: translate(-50%, 0); }
  body.enter-editor .preview-panel, body.enter-editor .controls-panel, body.enter-welcome .welcome-copy > *, body.enter-welcome .welcome-demo,
  body[data-screen='editor'] .photo-status:not([hidden]), body[data-screen='editor'] #qualityCard:not([hidden]), #toggleOutlines.needs-check::after { animation: none; }
}