/*
 * remix-ditto's theme pack (apps.php themePack; owner 2026-10-07 — a demo to pitch HYBE): 5 Ditto themes and 5 backgrounds added
 * to Studio's. A pack theme stands on a Studio theme (#studio.st-<base>) and adds its own: #studio.st-pack.st-ditto-*.
 *   - the "Ditto Remix" logo with "Powered by [Musicshake]" (main.js: .logo .pkbrand, shown with #studio.pk-brand)
 *   - NewJeans photos left / right of the logo (.pk-deco)
 *   - a member peeking over a part button now and then (.pk-peek, main.js peekOnce): rises, waves, sinks back
 * Images: bg/<id>.jpg (+ bg/thumb/<id>.jpg), deco/photo1-4.jpg, peek/<member>.png, ditto-remix-logo.svg — while one is
 * missing its gradient / nothing shows instead.
 */

/* ---- the logo: "Ditto Remix", Powered by Musicshake ---------------------------------------------------------------- */
#studio .logo .pkbrand { display: none; }
#studio.pk-brand .logo img.ms { display: none; }
#studio.pk-brand .logo .pkbrand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#studio.pk-brand .logo .pkbrand > img { width: min(250px, 58vw); height: auto; filter: drop-shadow(0 2px 8px rgba(30, 60, 120, .35)); }
#studio.pk-brand .logo .pw { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1 var(--font); letter-spacing: .06em;
	color: rgba(255, 255, 255, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); text-transform: uppercase; }
#studio.pk-brand .logo .pw img { width: auto; height: 13px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }

/* ---- the top's photos: polaroids left and right of the logo ------------------------------------------------------- */
#studio .pk-deco { display: none; }
#studio.pk-brand .pk-deco { display: block; position: absolute; top: var(--safe-t); left: 0; right: 0; height: 92px; pointer-events: none; z-index: 0; }
#studio .pk-deco .ph { position: absolute; width: 62px; height: 74px; object-fit: cover; background: #fff; padding: 4px 4px 12px; border-radius: 3px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35); animation: pk-sway 6s ease-in-out infinite; }
#studio .pk-deco .ph0 { left: 10px; top: 8px; --r: -9deg; }
#studio .pk-deco .ph1 { left: 64px; top: 22px; --r: 6deg; animation-delay: -2s; width: 54px; height: 64px; }
#studio .pk-deco .ph2 { right: 64px; top: 20px; --r: -5deg; animation-delay: -4s; width: 54px; height: 64px; }
#studio .pk-deco .ph3 { right: 10px; top: 6px; --r: 8deg; animation-delay: -1s; }
@keyframes pk-sway { 0%, 100% { transform: rotate(var(--r)); } 50% { transform: rotate(calc(var(--r) * -.4)) translateY(2px); } }
@media (max-width: 560px) { #studio .pk-deco .ph1, #studio .pk-deco .ph2 { display: none; } #studio .pk-deco .ph { width: 46px; height: 56px; padding: 3px 3px 9px; } }

/* ---- a member peeking over a part button ------------------------------------------------------------------------------ */
.pk-peek { position: absolute; overflow: hidden; pointer-events: none; z-index: 3; }
.pk-peek img { position: absolute; left: 50%; bottom: -2px; width: 100%; height: auto; transform-origin: 50% 100%; --sx: 1;
	transform: translate(-50%, 105%) scaleX(var(--sx)); }
.pk-peek.flip img { --sx: -1; }
.pk-peek.go img { animation: pk-peek 3.9s cubic-bezier(.3, .1, .3, 1) forwards; }
@keyframes pk-peek {
	0% { transform: translate(-50%, 105%) scaleX(var(--sx)) rotate(0); }
	16% { transform: translate(-50%, 6%) scaleX(var(--sx)) rotate(-3deg); }
	26% { transform: translate(-50%, 2%) scaleX(var(--sx)) rotate(5deg); }
	36% { transform: translate(-50%, 2%) scaleX(var(--sx)) rotate(-5deg); }
	46% { transform: translate(-50%, 2%) scaleX(var(--sx)) rotate(5deg); }
	56% { transform: translate(-50%, 2%) scaleX(var(--sx)) rotate(-3deg); }
	72% { transform: translate(-50%, 4%) scaleX(var(--sx)) rotate(0); }
	100% { transform: translate(-50%, 105%) scaleX(var(--sx)) rotate(0); }
}

/* ---- the five themes ----------------------------------------------------------------------------------------------- */
/* Snow Day (on Crystal): icy blue frost, snow falling */
#studio.st-ditto-snow { --accent: #8fd3ff; }
#studio.st-ditto-snow .pbtn { background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(170, 215, 255, .28)); color: #23486e; }
html[data-st=ditto-snow] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
	background-image: radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 70% 10%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(2.5px 2.5px at 85% 55%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 10% 85%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 55% 45%, #fff 50%, transparent 51%);
	background-size: 320px 320px; animation: pk-snow 14s linear infinite; }
@keyframes pk-snow { from { background-position: 0 -320px; } to { background-position: 40px 320px; } }
/* Camcorder (on Image): warm film, REC, scan lines */
#studio.st-ditto-film { --accent: #ffb26b; }
#studio.st-ditto-film .pbtn { background: rgba(40, 24, 10, .55); border: 1px solid rgba(255, 190, 120, .45); color: #ffd9a8; font-family: ui-monospace, Menlo, monospace; }
#studio.st-ditto-film.pk-brand .pk-deco::before { content: "● REC"; position: absolute; left: 14px; bottom: -4px; font: 700 11px/1 ui-monospace, Menlo, monospace; color: #ff4d4d;
	text-shadow: 0 0 6px rgba(255, 60, 60, .7); animation: pk-blink 1.2s steps(2) infinite; }
@keyframes pk-blink { 50% { opacity: 0; } }
html[data-st=ditto-film] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .18;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5) 0 1px, transparent 1px 3px); }
/* Y2K Bunny (on Jelly): pastel pink and baby blue */
#studio.st-ditto-y2k { --accent: #ff9fd0; }
#studio.st-ditto-y2k .pbtn { background: linear-gradient(180deg, #ffd1ea, #b9d8ff); color: #6a3a7a; box-shadow: inset 0 -4px 8px rgba(120, 60, 140, .2), inset 0 3px 6px rgba(255, 255, 255, .7); }
/* School (on Paper): cream and navy */
#studio.st-ditto-school { --accent: #2f4a8a; }
#studio.st-ditto-school .pbtn { background: #f4ecd8; color: #22356b; border: 1.5px solid #22356b; }
/* Starry Night (on Neon): deep navy, glitter */
#studio.st-ditto-night { --accent: #8fb0ff; }
#studio.st-ditto-night .pbtn { color: #cfe0ff; text-shadow: 0 0 8px rgba(143, 176, 255, .8); }
html[data-st=ditto-night] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
	background-image: radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent), radial-gradient(1px 1px at 60% 35%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 80% 15%, #fff, transparent), radial-gradient(1px 1px at 35% 60%, #fff, transparent);
	background-size: 260px 260px; animation: pk-twinkle 3s ease-in-out infinite alternate; }
@keyframes pk-twinkle { from { opacity: .35; } to { opacity: .8; } }

/* ---- the five backgrounds (a photo when there, its gradient until then) -------------------------------------------- */
html[data-bg=ditto-snow] body::before { background-image: url(bg/ditto-snow.jpg), linear-gradient(180deg, #cfe6f7, #7fa9cf 60%, #4d6f96); }
html[data-bg=ditto-snow] { background: #7fa9cf; }
html[data-bg=ditto-film] body::before { background-image: url(bg/ditto-film.jpg), linear-gradient(180deg, #5a3b22, #2a1a10); }
html[data-bg=ditto-film] { background: #3a2616; }
html[data-bg=ditto-y2k] body::before { background-image: url(bg/ditto-y2k.jpg), linear-gradient(160deg, #ffc8e6, #c8dcff 55%, #e8d2ff); }
html[data-bg=ditto-y2k] { background: #e2cff5; }
html[data-bg=ditto-school] body::before { background-image: url(bg/ditto-school.jpg), linear-gradient(180deg, #e9dcc0, #b9a27a); }
html[data-bg=ditto-school] { background: #cdb88f; }
html[data-bg=ditto-night] body::before { background-image: url(bg/ditto-night.jpg), linear-gradient(180deg, #0b1636, #1d2c63 60%, #2b2050); }
html[data-bg=ditto-night] { background: #13204a; }

/* Settings: the themes' and backgrounds' swatches */
.segs .bs-ditto-snow { background: linear-gradient(160deg, #ffffff, #9fd2ff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.segs .bs-ditto-film { background: linear-gradient(160deg, #ffb26b, #5a3b22); }
.segs .bs-ditto-y2k { border-radius: 12px; background: linear-gradient(180deg, #ffd1ea, #b9d8ff); }
.segs .bs-ditto-school { background: #f4ecd8; box-shadow: inset 0 0 0 2px #22356b; }
.segs .bs-ditto-night { background: radial-gradient(circle at 50% 40%, #3c5cc0, #0b1636 75%); }
.segs .bgp-ditto-snow { background-image: url(bg/thumb/ditto-snow.jpg), linear-gradient(180deg, #cfe6f7, #4d6f96); }
.segs .bgp-ditto-film { background-image: url(bg/thumb/ditto-film.jpg), linear-gradient(180deg, #5a3b22, #2a1a10); }
.segs .bgp-ditto-y2k { background-image: url(bg/thumb/ditto-y2k.jpg), linear-gradient(160deg, #ffc8e6, #c8dcff); }
.segs .bgp-ditto-school { background-image: url(bg/thumb/ditto-school.jpg), linear-gradient(180deg, #e9dcc0, #b9a27a); }
.segs .bgp-ditto-night { background-image: url(bg/thumb/ditto-night.jpg), linear-gradient(180deg, #0b1636, #2b2050); }