@keyframes route-safe-in {
  from { opacity: .72; }
  to { opacity: 1; }
}
@keyframes sheet-in { from { transform:translate3d(0,28px,0) scale(.985); opacity:0; } to { transform:translate3d(0,0,0) scale(1); opacity:1; } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-8px); } 50% { transform:translateX(7px); } 75% { transform:translateX(-4px); } }
@keyframes toast-in { from { opacity:0; transform:translate3d(-50%,8px,0) scale(.96); } to { opacity:1; transform:translate3d(-50%,0,0) scale(1); } }
@keyframes nav-icon-pop {
  0% { transform: translateY(0) scale(.94); }
  58% { transform: translateY(-1px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes selected-control-glow {
  0% { filter: brightness(.96); }
  55% { filter: brightness(1.10); }
  100% { filter: brightness(1); }
}

/*
 * Mobile Safari-safe navigation.
 * Never transform/scale the full .screen because the page contains many
 * backdrop-filter Liquid Glass layers. Geometry transforms on an ancestor can
 * make those composited layers stretch for a frame. Use opacity-only entry.
 */
.screen.route-enter-safe { animation: route-safe-in 140ms ease-out both; }

button {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Glass containers: visual feedback only, never transform the container. */
.status-option,.settings-row,.language-row,.theme-tile,.character-choice,
.device-cosmic-card,.locked-setting-card,.cosmic-setting-row[type="button"] {
  transition:
    opacity 150ms ease-out,
    background-color 170ms ease-out,
    border-color 170ms ease-out,
    box-shadow 190ms ease-out,
    color 160ms ease-out,
    filter 150ms ease-out;
}
.status-option:active,.settings-row:active,.language-row:active,.theme-tile:active,.character-choice:active,
.device-cosmic-card:active,.locked-setting-card:active,.cosmic-setting-row[type="button"]:active {
  transform: none;
  filter: brightness(1.09);
  border-color: rgba(190,177,255,.48);
}

/* Small controls can still use lightweight press motion. */
.status-chip,.nav-item,.key,.round-add,.switch,.calendar-day,.calendar-month button,
.motion-style-grid button,.back-button,.primary-action,.secondary-action,.icon-delete,
.list-row-main,.home-reminders-head button {
  transition:
    transform 120ms var(--ease-out),
    opacity 150ms var(--ease-out),
    background-color 170ms var(--ease-out),
    border-color 170ms var(--ease-out),
    box-shadow 190ms var(--ease-out),
    color 160ms var(--ease-out),
    filter 160ms var(--ease-out);
}
.status-chip:active,.key:active,.nav-item:active,.round-add:active,.calendar-day:active,
.calendar-month button:active,.motion-style-grid button:active,.back-button:active,
.primary-action:active,.secondary-action:active,.icon-delete:active,.list-row-main:active,
.home-reminders-head button:active {
  transform: scale(.97);
  filter: brightness(1.07);
}
.switch:active { transform: scale(.98); }
.nav-item.active svg { animation: nav-icon-pop 220ms var(--ease-spring) both; }
.theme-tile.active,.character-choice.active,.motion-style-grid button.active,.status-chip.active,.status-option.active {
  animation: selected-control-glow 220ms ease-out both;
}

/* DOM ripple intentionally removed: large absolute ripple layers combined with
 * backdrop-filter/isolation can corrupt mobile Safari compositing bounds. */

.sheet-backdrop { animation:backdrop-in 170ms ease-out both; }
.passcode-sheet,.editor-sheet { animation:sheet-in 285ms var(--ease-spring) both; }
.passcode-sheet.is-error { animation:shake 260ms ease-out; }
.toast { animation:toast-in 200ms var(--ease-out) both; }

:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration:1ms !important;
  animation-iteration-count:1 !important;
  transition-duration:1ms !important;
  scroll-behavior:auto !important;
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:1ms !important;
  }
}