:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); --motion-fast: 150ms; }

/* The fallback belongs to normal flow: no overlay can trap a failed startup. */
.boot-state { max-width: 488px; margin: 48px auto; padding: 24px; }
.boot-word { display: block; margin-bottom: 32px; font: 700 28px Unbounded, sans-serif; letter-spacing: -.06em; }
.boot-state p { color: var(--muted); font-size: 13px; }
.boot-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.boot-preview span { aspect-ratio: 1 / 1.35; border-radius: var(--radius-md); background: var(--surface); }
.boot-word, .motion-brand { color: transparent; background: linear-gradient(110deg, var(--muted) 10%, var(--white) 30%, #666 45%, var(--white) 60%, var(--muted) 80%); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; animation: brand-sweep 1100ms var(--motion-ease) both; }
@keyframes brand-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

.motion-pending { opacity: 0; transform: translateY(16px); }
.motion-pending:focus-within { opacity: 1; transform: none; }
.motion-reveal { animation: card-reveal 480ms var(--motion-ease) var(--reveal-delay, 0ms) both; }
.motion-enter { animation: card-reveal 480ms var(--motion-ease) both; }
@keyframes card-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

[data-image-state] { position: relative; background: var(--surface-2); }
[data-image-state] > img { transition: opacity 320ms ease, transform 300ms var(--motion-ease); }
[data-image-state="loading"] > img, [data-image-state="error"] > img { opacity: 0; }
[data-image-state="loading"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.08) 48%, transparent 70%); transform: translateX(-100%); animation: photo-shimmer 1400ms ease-in-out infinite; }
@keyframes photo-shimmer { to { transform: translateX(100%); } }
[data-image-state="error"]::after { content: 'Фото временно недоступно'; position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--muted); font: 500 12px/1.6 Manrope, sans-serif; text-align: center; pointer-events: none; }

button:not(:disabled), a.full-button { transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease; -webkit-tap-highlight-color: transparent; }
button:not(:disabled):not(.card-open):active, a.full-button:active { transform: scale(.96); }
.card-open:active .product-photo img { transform: scale(.975); }
.favorite.active { background: var(--white); color: var(--ink); }
.favorite.active .icon { fill: currentColor; }
.modal-backdrop { animation: backdrop-enter 240ms ease both; }
.modal { animation: modal-enter 240ms var(--motion-ease) both; }
@keyframes backdrop-enter { from { background-color: transparent; } to { background-color: rgba(0,0,0,.67); } }
@keyframes modal-enter { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
a.full-button { display: block; text-align: center; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .product-card { transition: border-color 220ms ease; }
  .product-card:hover { border-color: #666; }
  .photo-card:hover .product-photo img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-pending { opacity: 1; transform: none; }
  .boot-word, .motion-brand { background: none; color: var(--paper); }
  button:active, .card-open:active .product-photo img, .photo-card:hover .product-photo img { transform: none !important; }
}