/* Sleigh dock + growing gift bag (shared by Elf Factory, toy detail, My Sleigh art, letter "ideas" step) */

/* Bag fullness: gifts peek out from stage 2; growth eases between stages. */
.scs-cast--sleigh .scs-bag { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.scs-cast--sleigh .scs-bag__gifts { transition: opacity .3s ease; }
.scs-cast--sleigh[data-bag="0"] .scs-bag__gifts,
.scs-cast--sleigh[data-bag="1"] .scs-bag__gifts { opacity: 0; }

/* Add animation (driven by .is-bumping on any [data-scs-sleigh-art]) */
.is-bumping .scs-bag__body { transform-box: fill-box; transform-origin: 50% 100%; animation: scs-bag-squash .55s cubic-bezier(.3, 1.6, .5, 1) 1; }
.is-bumping .scs-dock__deer--front .cast-ear-target,
.is-bumping .scs-ms-art__deer .cast-ear-target { transform-box: fill-box; transform-origin: 0% 100%; animation: cast-twitch-once .6s ease-in-out 1; }
.is-bumping .scs-dock__deer--back .cast-head { transform-box: fill-box; transform-origin: 85% 100%; animation: scs-head-bob .7s ease-in-out 1; }
.is-bumping .scs-dock__fly { animation: scs-gift-fly .6s ease-in 1 forwards; }
.is-bumping .scs-dock__spark { animation: scs-gift-spark .7s ease-out .25s 1 forwards; }
@keyframes scs-bag-squash { 0% { transform: scale(1, 1); } 35% { transform: scale(1.14, .82); } 65% { transform: scale(.94, 1.1); } 100% { transform: scale(1, 1); } }
@keyframes scs-head-bob { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-7deg); } 70% { transform: rotate(2deg); } }
@keyframes scs-gift-fly { 0% { transform: translate(-120px, -90px) scale(.7) rotate(-20deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0, 0) scale(.35) rotate(10deg); opacity: 0; } }
@keyframes scs-gift-spark { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Dock ---------- */
.scs-dock { position: relative; z-index: 40; padding: 0 var(--scs-gutter) 24px; box-sizing: border-box; }
.scs-dock.is-fixed {
	position: fixed; left: 0; right: 0; bottom: 0;
	padding: 0 max(var(--scs-gutter), env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(var(--scs-gutter), env(safe-area-inset-left));
	pointer-events: none;
	transition: transform .2s ease, visibility 0s linear 0s;
}
.scs-dock.is-tucked { transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.scs-menu-open .scs-dock.is-fixed { display: none; }

.scs-dock__panel {
	pointer-events: auto; position: relative; box-sizing: border-box;
	max-width: calc(var(--scs-container) - 2 * 32px); margin: 0 auto;
	display: flex; align-items: center; gap: 12px 28px;
	padding: 12px 24px 12px 16px;
	background: var(--scs-paper); border: var(--scs-border); border-radius: 28px; box-shadow: 4px 6px 0 var(--scs-ink);
}

.scs-dock__art { position: relative; display: flex; align-items: flex-end; width: 330px; height: 104px; flex: none; }
.scs-dock__deer--back { width: 90px; margin-right: -14px; }
.scs-dock__deer--front { width: 92px; margin-right: -10px; }
.scs-dock__sleigh { position: relative; width: 170px; }
.scs-dock__fly, .scs-dock__spark { position: absolute; box-sizing: border-box; opacity: 0; pointer-events: none; }
.scs-dock__fly { right: 44px; top: 10px; width: 30px; height: 30px; border-radius: 4px; background: var(--scs-red); border: 3px solid var(--scs-sun); }
.scs-dock__spark { right: 34px; top: 0; width: 50px; height: 50px; border-radius: 50%; border: 3px dotted var(--scs-sun); }

.scs-dock__text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scs-dock__count { font-family: var(--scs-font-display); font-weight: 600; font-size: 24px; line-height: 1.2; }
.scs-dock__hint { font-size: 15px; line-height: 1.45; color: var(--scs-ink-soft); }
.scs-dock__note { font-size: 13px; line-height: 1.4; color: var(--scs-ink-muted); font-style: italic; }
.scs-dock__already { margin: 0; padding: 8px 14px; background: var(--scs-paper-2); border-radius: 12px; font-weight: 700; font-size: 15px; flex: none; }
.scs-dock__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.scs-dock__view .scs-icon { margin-left: -4px; }

/* Tablet: smaller herd, stacked actions */
@media (max-width: 1099px) {
	.scs-dock__panel { gap: 12px 20px; padding: 10px 18px 10px 12px; }
	.scs-dock__art { width: 230px; height: 76px; }
	.scs-dock__deer--back { width: 62px; margin-right: -10px; }
	.scs-dock__deer--front { width: 64px; margin-right: -8px; }
	.scs-dock__sleigh { width: 122px; }
	.scs-dock__fly { right: 30px; top: 6px; width: 22px; height: 22px; }
	.scs-dock__spark { right: 22px; top: -4px; width: 40px; height: 40px; }
	.scs-dock__text { flex-basis: 150px; }
	.scs-dock__count { font-size: 20px; }
	.scs-dock__actions { flex-direction: column; gap: 8px; }
	.scs-dock__already { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); border: 2px solid var(--scs-ink); white-space: nowrap; }
}

/* Phones: compact dock — sleigh, count and View my sleigh */
@media (max-width: 767px) {
	.scs-dock.is-fixed { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
	.scs-dock__panel { gap: 10px; padding: 6px 8px 6px 10px; border-radius: 20px; box-shadow: 3px 4px 0 var(--scs-ink); }
	.scs-dock__art { width: 64px; height: 44px; }
	.scs-dock__deer { display: none; }
	.scs-dock__sleigh { width: 64px; }
	.scs-dock__fly { right: 14px; top: 0; width: 14px; height: 14px; border-width: 2px; }
	.scs-dock__spark { right: 8px; top: -8px; width: 28px; height: 28px; border-width: 2px; }
	.scs-dock__text { flex: 1 1 auto; }
	.scs-dock__count { font-size: 16px; line-height: 1.2; }
	.scs-dock__hint { display: none; }
	.scs-dock__note { font-size: 12px; }
	.scs-dock__actions { flex-direction: row; }
	.scs-dock__letter { display: none; }
	.scs-dock__view { min-height: 44px; padding: 0 14px; font-size: 15px; box-shadow: 2px 3px 0 var(--scs-ink); }
	.scs-dock__view .scs-icon { display: none; }
}

/* Keyboard focus scrolling keeps targets clear of the fixed dock. */
html:has(body.scs-has-dock) { scroll-padding-bottom: calc(var(--scs-dock-h) + 16px); }

/* Category tile used when an idea has no picture (cards, detail, My Sleigh) */
.scs-toy-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--tile, var(--scs-ph-bg)); }