/* rdo stickers (R16): in-house photos (transparent WebP with a white die-cut
   border, R15) drawn as stickers stuck on the page. PHP marks the panel
   `.is-sticker` and prints --tilt (fixed set, by .obj number or photo index)
   and --src (the image, used as the sheen's mask). Supplier JPGs have no
   class and stay as they are. Loaded on registers, maker pages and records. */

.rdo-panel.is-sticker {
	--sticker-ease: cubic-bezier(.2, .7, .2, 1);
	--sticker-shadow: drop-shadow(6px 10px 10px rgba(42, 59, 40, .22));
	--sticker-lift-shadow: drop-shadow(16px 26px 18px rgba(42, 59, 40, .18));
	background: transparent; /* no Mist fill: the sticker sits on the page */
	overflow: visible;       /* tilt, shadow and lift are never clipped */
}

/* Room: the photo sits at 80 % of its 4:5 panel (10 % all round). */
.rdo-panel.is-sticker img,
.rdo-panel.is-sticker::after {
	inset: 10%;
	width: 80%;
	height: 80%;
	transform: rotate(var(--tilt, 0deg));
	transition: transform .35s var(--sticker-ease), filter .35s var(--sticker-ease);
}
.rdo-panel.is-sticker img {
	filter: var(--sticker-shadow); /* follows the die-cut outline, not a box */
}

/* Sheen: a light sweep across the sticker, masked by the same image. */
.rdo-panel.is-sticker::after {
	content: '';
	position: absolute;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .16) 44%, rgba(255, 255, 255, .05) 52%, transparent 62%);
	background-size: 220% 220%;
	background-position: 100% 100%;
	-webkit-mask: var(--src) center / contain no-repeat;
	mask: var(--src) center / contain no-repeat;
	opacity: 0;
	transition: transform .35s var(--sticker-ease), background-position .6s var(--sticker-ease), opacity .2s linear;
}
/* No photo shown (the preview pane between rows, a variant without a photo): no sheen. */
.rdo-panel.is-sticker:has(> img[hidden])::after,
.rdo-panel.is-sticker:not(:has(img))::after { display: none; }

/* No outline box around a sticker (the plain photos keep theirs). */
.rdo-register[data-view="sheet"] .rdo-rec:hover .rdo-rec__thumb.is-sticker,
.rdo-card__link:hover .rdo-card__img.is-sticker { outline: 0; }

/* Lift: hover on devices that hover, and keyboard focus on the card's link. */
@media (hover: hover) {
	.rdo-register[data-view="sheet"] .rdo-rec:hover .rdo-rec__thumb.is-sticker img,
	.rdo-register[data-view="sheet"] .rdo-rec:hover .rdo-rec__thumb.is-sticker::after,
	.rdo-card__link:hover .is-sticker img,
	.rdo-card__link:hover .is-sticker::after,
	.rdo-record__img.is-sticker:hover img,
	.rdo-record__img.is-sticker:hover::after {
		transform: rotate(calc(var(--tilt, 0deg) * .4)) translateY(-6px) scale(1.035);
	}
	.rdo-register[data-view="sheet"] .rdo-rec:hover .rdo-rec__thumb.is-sticker img,
	.rdo-card__link:hover .is-sticker img,
	.rdo-record__img.is-sticker:hover img { filter: var(--sticker-lift-shadow); }
	.rdo-register[data-view="sheet"] .rdo-rec:hover .rdo-rec__thumb.is-sticker::after,
	.rdo-card__link:hover .is-sticker::after,
	.rdo-record__img.is-sticker:hover::after { background-position: 0 0; opacity: 1; }
}
.rdo-register[data-view="sheet"] .rdo-rec:has(.rdo-rec__link:focus-visible) .rdo-rec__thumb.is-sticker img,
.rdo-register[data-view="sheet"] .rdo-rec:has(.rdo-rec__link:focus-visible) .rdo-rec__thumb.is-sticker::after,
.rdo-card__link:focus-visible .is-sticker img,
.rdo-card__link:focus-visible .is-sticker::after,
.rdo-record__img.is-sticker:has(.rdo-record__zoom:focus-visible) img,
.rdo-record__img.is-sticker:has(.rdo-record__zoom:focus-visible)::after {
	transform: rotate(calc(var(--tilt, 0deg) * .4)) translateY(-6px) scale(1.035);
}
.rdo-register[data-view="sheet"] .rdo-rec:has(.rdo-rec__link:focus-visible) .rdo-rec__thumb.is-sticker img,
.rdo-card__link:focus-visible .is-sticker img,
.rdo-record__img.is-sticker:has(.rdo-record__zoom:focus-visible) img { filter: var(--sticker-lift-shadow); }
.rdo-register[data-view="sheet"] .rdo-rec:has(.rdo-rec__link:focus-visible) .rdo-rec__thumb.is-sticker::after,
.rdo-card__link:focus-visible .is-sticker::after,
.rdo-record__img.is-sticker:has(.rdo-record__zoom:focus-visible)::after { background-position: 0 0; opacity: 1; }

/* Small images (register list thumbnails, record thumbnail row): flat, no
   tilt, no lift, a smaller shadow. */
.rdo-register:not([data-view="sheet"]) .rdo-rec__thumb.is-sticker img {
	inset: 4%;
	width: 92%;
	height: 92%;
	transform: none;
	filter: drop-shadow(2px 3px 3px rgba(42, 59, 40, .2));
}
.rdo-register:not([data-view="sheet"]) .rdo-rec__thumb.is-sticker::after { display: none; }
@media (max-width: 699.98px) { /* the phone list is the only view below 700 px (52 × 64 thumbnails) */
	.rdo-register[data-view] .rdo-rec__thumb.is-sticker img {
		inset: 4%;
		width: 92%;
		height: 92%;
		transform: none;
		filter: drop-shadow(2px 3px 3px rgba(42, 59, 40, .2));
	}
	.rdo-register[data-view] .rdo-rec__thumb.is-sticker::after { display: none; }
}
.rdo-record__thumb.is-sticker { background: transparent; }
.rdo-record__thumb.is-sticker img { filter: drop-shadow(2px 3px 3px rgba(42, 59, 40, .2)); }

/* Reduced motion: no transitions, no sheen; tilt and shadow stay. */
@media (prefers-reduced-motion: reduce) {
	.rdo-panel.is-sticker img,
	.rdo-panel.is-sticker::after { transition: none; }
	.rdo-panel.is-sticker::after { display: none; }
}