/**
 * Icon motion.
 *
 * Rule that shapes all of this: **the resting state must be fully legible.**
 * There is no hover on a phone, so motion may only ever add emphasis — it can
 * never be the thing that reveals what an option is. The three headboard
 * heights differ at rest; hovering just replays the growth. The solid deck is
 * drawn at rest; hovering just slides it in again.
 *
 * Three triggers, all equivalent:
 *   :hover            — pointer devices
 *   .is-demo          — added once by configurator.js when a tile scrolls into
 *                       view, so touch users see the mechanism too
 *   :checked          — the selected tile holds a partial pose
 *
 * @see class-bbc-icons.php for the artwork and part names.
 */

.bbc-icon {
	overflow: visible;          /* drawers and parcels travel outside the box */
}

.bbc-icon * {
	transform-box: fill-box;
	transform-origin: center;
}

/* ============================================================== keyframes */

@keyframes bbc-ic-grow {
	from { transform: scaleY(.4); }
	to { transform: scaleY(1); }
}

@keyframes bbc-ic-slide-in {
	from { transform: translateX(-24px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes bbc-ic-pop {
	0% { transform: scale(.3); }
	55% { transform: scale(1.22); }
	100% { transform: scale(1); }
}

@keyframes bbc-ic-pulse {
	0%, 100% { transform: scaleY(1); opacity: 1; }
	45% { transform: scaleY(.55); opacity: .5; }
}

@keyframes bbc-ic-draw {
	from { stroke-dashoffset: var(--dash, 60); }
	to { stroke-dashoffset: 0; }
}

@keyframes bbc-ic-shine {
	0% { transform: translateX(0); opacity: 0; }
	30% { opacity: .95; }
	100% { transform: translateX(3.2px); opacity: 0; }
}

@keyframes bbc-ic-turn {
	0% { transform: rotate(0deg); }
	40% { transform: rotate(-26deg); }
	75% { transform: rotate(6deg); }
	100% { transform: rotate(0deg); }
}

@keyframes bbc-ic-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes bbc-ic-travel {
	from { transform: translateX(9px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes bbc-ic-settle {
	from { transform: translateY(-3px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* =================================================== resting = legible */

/* Everything information-bearing is drawn complete, at full strength. */
.bbc-ic__pillow,
.bbc-ic__slat,
.bbc-ic__button,
.bbc-ic__board,
.bbc-ic__parcel,
.bbc-ic__layer { opacity: 1; transform: none; }

.bbc-ic__headboard { transform: none; opacity: 1; }

.bbc-ic__lattice path,
.bbc-ic__bead,
.bbc-ic__cross { stroke-dashoffset: 0; }

/* Only genuinely incidental detail hides until prompted. */
.bbc-ic__caliper,
.bbc-ic__measure,
.bbc-ic__strut,
.bbc-ic__lift-arrow,
.bbc-ic__track,
.bbc-ic__shine {
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}

/* Closed mechanisms rest closed — that is their true state. */
.bbc-ic__lift,
.bbc-ic__lid,
.bbc-ic__lid-foot,
.bbc-ic__drawer,
.bbc-ic__split-l,
.bbc-ic__split-r,
.bbc-ic__spanner,
.bbc-ic__spin {
	transition: transform .42s cubic-bezier(.25, .8, .3, 1);
}

/* ================================================== demonstration state */

.bbc__opt:hover .bbc-ic__caliper,
.bbc__opt.is-demo .bbc-ic__caliper,
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__caliper,
.bbc__opt:hover .bbc-ic__measure,
.bbc__opt.is-demo .bbc-ic__measure,
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__measure { opacity: .75; }

.bbc__opt:hover .bbc-ic__strut,
.bbc__opt.is-demo .bbc-ic__strut,
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__strut { opacity: .8; }

.bbc__opt:hover .bbc-ic__lift-arrow,
.bbc__opt.is-demo .bbc-ic__lift-arrow { opacity: .85; }

.bbc__opt:hover .bbc-ic__track,
.bbc__opt.is-demo .bbc-ic__track { opacity: .7; }

/* ---- replays: emphasis only, never the source of meaning ---- */

.bbc__opt:hover .bbc-ic__headboard,
.bbc__opt.is-demo .bbc-ic__headboard {
	animation: bbc-ic-grow .55s cubic-bezier(.25, .9, .3, 1);
	transform-origin: center bottom;
}

.bbc__opt:hover .bbc-ic__board,
.bbc__opt.is-demo .bbc-ic__board { animation: bbc-ic-slide-in .5s cubic-bezier(.25, .8, .3, 1); }

.bbc__opt:hover .bbc-ic__slat,
.bbc__opt.is-demo .bbc-ic__slat {
	animation: bbc-ic-pulse .6s ease;
	animation-delay: calc(var(--i, 0) * 45ms);
}

.bbc__opt:hover .bbc-ic__button,
.bbc__opt.is-demo .bbc-ic__button {
	animation: bbc-ic-pop .45s cubic-bezier(.3, 1.4, .5, 1);
	animation-delay: calc(var(--i, 0) * 60ms);
}

.bbc__opt:hover .bbc-ic__pillow,
.bbc__opt.is-demo .bbc-ic__pillow {
	animation: bbc-ic-settle .45s ease;
	animation-delay: calc(var(--i, 0) * 70ms);
}

.bbc__opt:hover .bbc-ic__lattice path,
.bbc__opt.is-demo .bbc-ic__lattice path {
	--dash: 42;
	stroke-dasharray: 42;
	animation: bbc-ic-draw .6s ease;
}

.bbc__opt:hover .bbc-ic__bead,
.bbc__opt.is-demo .bbc-ic__bead {
	--dash: 58;
	stroke-dasharray: 58;
	animation: bbc-ic-draw .65s ease;
}

.bbc__opt:hover .bbc-ic__bead--inner,
.bbc__opt.is-demo .bbc-ic__bead--inner { animation-delay: .12s; }

.bbc__opt:hover .bbc-ic__shine,
.bbc__opt.is-demo .bbc-ic__shine { animation: bbc-ic-shine 1.1s ease-in-out; }

.bbc__opt:hover .bbc-ic__parcel--in,
.bbc__opt.is-demo .bbc-ic__parcel--in { animation: bbc-ic-travel .6s cubic-bezier(.25, .8, .3, 1); }

.bbc__opt:hover .bbc-ic__parcel--out,
.bbc__opt.is-demo .bbc-ic__parcel--out { animation: bbc-ic-settle .5s ease; }

.bbc__opt:hover .bbc-ic__spanner,
.bbc__opt.is-demo .bbc-ic__spanner { animation: bbc-ic-turn 1.05s ease-in-out; }

.bbc__opt:hover .bbc-ic__spin,
.bbc__opt.is-demo .bbc-ic__spin { animation: bbc-ic-spin 1.15s cubic-bezier(.5, 0, .2, 1); }

/* ---- mechanisms that genuinely open ---- */

/* hinged at the head end, so the foot rises — the way these actually open */
.bbc-ic__lift { transform-origin: 4px 100%; }

.bbc__opt:hover .bbc-ic__lift,
.bbc__opt.is-demo .bbc-ic__lift { transform: rotate(-17deg); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__lift { transform: rotate(-11deg); }

.bbc-ic__lid-foot { transform-origin: 100% 100%; }

.bbc__opt:hover .bbc-ic__lid-foot,
.bbc__opt.is-demo .bbc-ic__lid-foot { transform: rotate(15deg); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__lid-foot { transform: rotate(10deg); }

.bbc-ic__lid { transform-origin: 4px 100%; }

.bbc__opt:hover .bbc-ic__lid,
.bbc__opt.is-demo .bbc-ic__lid { transform: rotate(-19deg); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__lid { transform: rotate(-13deg); }

.bbc-ic__drawer { transition-delay: calc(var(--i, 0) * 65ms); }

.bbc__opt:hover .bbc-icon--base-2-drawer-left .bbc-ic__drawer,
.bbc__opt.is-demo .bbc-icon--base-2-drawer-left .bbc-ic__drawer,
.bbc__opt:hover .bbc-icon--base-4-drawer .bbc-ic__drawer,
.bbc__opt.is-demo .bbc-icon--base-4-drawer .bbc-ic__drawer { transform: translateX(-4px); }

.bbc__opt-input:checked + .bbc__opt-box .bbc-icon--base-2-drawer-left .bbc-ic__drawer,
.bbc__opt-input:checked + .bbc__opt-box .bbc-icon--base-4-drawer .bbc-ic__drawer { transform: translateX(-2.6px); }

.bbc__opt:hover .bbc-icon--base-2-drawer-right .bbc-ic__drawer,
.bbc__opt.is-demo .bbc-icon--base-2-drawer-right .bbc-ic__drawer { transform: translateX(4px); }

.bbc__opt-input:checked + .bbc__opt-box .bbc-icon--base-2-drawer-right .bbc-ic__drawer { transform: translateX(2.6px); }

/* footend drawers pull toward the viewer */
.bbc__opt:hover .bbc-icon--base-2-drawer-foot .bbc-ic__drawer,
.bbc__opt.is-demo .bbc-icon--base-2-drawer-foot .bbc-ic__drawer,
.bbc__opt:hover .bbc-icon--base-4-drawer-foot .bbc-ic__drawer,
.bbc__opt.is-demo .bbc-icon--base-4-drawer-foot .bbc-ic__drawer { transform: translateY(3px) scale(1.04); }

.bbc__opt-input:checked + .bbc__opt-box .bbc-icon--base-2-drawer-foot .bbc-ic__drawer,
.bbc__opt-input:checked + .bbc__opt-box .bbc-icon--base-4-drawer-foot .bbc-ic__drawer { transform: translateY(2px) scale(1.03); }

.bbc__opt:hover .bbc-ic__split-l,
.bbc__opt.is-demo .bbc-ic__split-l { transform: translateX(-2.2px); }
.bbc__opt:hover .bbc-ic__split-r,
.bbc__opt.is-demo .bbc-ic__split-r { transform: translateX(2.2px); }

.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__split-l { transform: translateX(-1.4px); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__split-r { transform: translateX(1.4px); }

/* duvet folds back down the bed */
.bbc-ic__duvet { transition: transform .42s cubic-bezier(.25, .8, .3, 1); }

.bbc__opt:hover .bbc-ic__duvet,
.bbc__opt.is-demo .bbc-ic__duvet { transform: translateY(3.4px); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__duvet { transform: translateY(2px); }

/* mattress layers separate */
.bbc-ic__layer { transition: transform .42s cubic-bezier(.25, .8, .3, 1); }

.bbc__opt:hover .bbc-ic__layer[style*="--i:1"],
.bbc__opt.is-demo .bbc-ic__layer[style*="--i:1"] { transform: translateY(-2.6px); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__layer[style*="--i:1"] { transform: translateY(-1.6px); }

.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__spanner { transform: rotate(-12deg); }
.bbc__opt-input:checked + .bbc__opt-box .bbc-ic__spin { transform: rotate(-18deg); }

/* ================================================== reduced motion */

@media (prefers-reduced-motion: reduce) {
	.bbc-icon * {
		transition: none !important;
		animation: none !important;
	}

	/* Show the open pose statically so the mechanism still reads. */
	.bbc-ic__lift { transform: rotate(-11deg); }
	.bbc-ic__lid { transform: rotate(-13deg); }
	.bbc-ic__lid-foot { transform: rotate(10deg); }
	.bbc-ic__strut,
	.bbc-ic__measure { opacity: .75; }

	.bbc-icon--base-2-drawer-left .bbc-ic__drawer { transform: translateX(-2.6px); }
	.bbc-icon--base-2-drawer-right .bbc-ic__drawer { transform: translateX(2.6px); }
	.bbc-icon--base-2-drawer-foot .bbc-ic__drawer,
	.bbc-icon--base-4-drawer-foot .bbc-ic__drawer { transform: translateY(2px); }
	.bbc-icon--base-4-drawer .bbc-ic__drawer { transform: translateX(-2.6px); }

	.bbc-ic__split-l { transform: translateX(-1.4px); }
	.bbc-ic__split-r { transform: translateX(1.4px); }
}

/* Reinforced base: the bracing draws itself in, so the upgrade is legible
   at a glance. Visible at rest as always — this is emphasis, not meaning. */
.bbc-ic__brace path { stroke-dasharray: 26; stroke-dashoffset: 0; }

.bbc__opt:hover .bbc-ic__brace path,
.bbc__opt.is-demo .bbc-ic__brace path {
	animation: bbc-ic-draw .55s ease;
	--dash: 26;
}