/* About: two people, one house, in photographs (inc/ext/duo.php, assets/js/duo.js).
   Two arched doors; the chosen one opens wider; each shows, in turn, the part of the house its person looks after. */
.duo { display: flex; flex-direction: column; gap: 18px; }
.duo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.duo-chip { appearance: none; display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border: 1px solid var(--pietra); border-radius: 999px; background: transparent; font: inherit; font-size: 15px; line-height: 1.2; color: var(--ink); cursor: pointer; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.duo-chip:hover { border-color: var(--pietra-2); }
.duo-chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--calce); }
.duo-chip-faces { display: inline-flex; }
.duo-chip-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px var(--calce); }
.duo-chip-faces img + img { margin-left: -9px; }
.duo-chip[aria-selected="true"] .duo-chip-faces img { box-shadow: 0 0 0 2px var(--ink); }

.duo-stage { display: flex; gap: clamp(10px, 1.6vw, 20px); height: clamp(380px, 62svh, 620px); }
.duo-door { --grow: 1; position: relative; flex: var(--grow) 1 0; min-width: 0; border-radius: var(--arch); overflow: hidden; isolation: isolate; background: var(--noce); box-shadow: 0 0 0 1px var(--pietra), 0 40px 80px -50px rgba(20, 15, 12, .65); transform: translateZ(0); transition: flex-grow 1.2s cubic-bezier(.6, .05, .25, 1); }
.duo[data-who="a"] .duo-door--a, .duo[data-who="b"] .duo-door--b { --grow: 1.8; }
.duo-photos, .duo-photo { position: absolute; inset: 0; margin: 0; }
.duo-photo { opacity: 0; transition: opacity 1.4s var(--ease); }
.duo-photo.is-on { opacity: 1; z-index: 1; }
.duo-photo.was-on { opacity: 1; z-index: 0; transition: none; }
.duo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); scale: 1.06; translate: calc(var(--lx, 0) * -10px) calc(var(--ly, 0) * -8px); transition: translate .6s var(--ease); }
.duo-photo.is-on img { animation: duo-ken 9s cubic-bezier(.25, .6, .25, 1) both; }
@keyframes duo-ken { from { scale: 1.02; } to { scale: 1.1; } }
/* the door that is not chosen stays in the half-light */
.duo-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(31, 25, 21, 0) 40%, rgba(31, 25, 21, .55) 72%, rgba(31, 25, 21, .88) 100%); }
.duo-door::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(31, 25, 21, .42); opacity: 0; transition: opacity 1s var(--ease); }
.duo[data-who="a"] .duo-door--b::after, .duo[data-who="b"] .duo-door--a::after { opacity: 1; }

.duo-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 0 16px clamp(18px, 2.4vw, 30px); text-align: center; color: var(--calce); pointer-events: none; }
.duo-room { margin: 0 0 8px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--cera-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 12px rgba(20, 15, 12, .4); }
.duo-room.is-swap { animation: duo-up .8s var(--ease) both; }
@keyframes duo-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.duo-pips { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.duo-pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(237, 236, 232, .38); transition: background-color .6s var(--ease), transform .6s var(--ease); }
.duo-pips i.is-on { background: var(--cera); transform: scale(1.35); }
.duo-face { width: clamp(64px, 6.4vw, 84px); height: clamp(64px, 6.4vw, 84px); border-radius: 50%; object-fit: cover; object-position: 50% 28%; box-shadow: 0 0 0 2px rgba(243, 227, 194, .9), 0 0 0 6px rgba(31, 25, 21, .25), 0 10px 26px rgba(20, 15, 12, .45); }
.duo-name { margin: 12px 0 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; white-space: nowrap; transition: opacity .6s var(--ease); }
.duo-role { margin: 2px 0 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--night-text); white-space: nowrap; transition: opacity .6s var(--ease); }
.duo-hit { appearance: none; position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.duo[data-who="a"] .duo-door--a .duo-hit, .duo[data-who="b"] .duo-door--b .duo-hit { cursor: default; }

.duo-caption { display: grid; gap: 4px; max-width: 46em; min-height: 6.4em; }
.duo-kicker { margin: 0; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--fumo-2); }
.duo-text { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ink); }
.duo-caption.is-swap .duo-kicker, .duo-caption.is-swap .duo-text { animation: duo-up .8s var(--ease) both; }
.duo-caption.is-swap .duo-text { animation-delay: .06s; }
.duo-hint { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--fumo); transition: opacity .8s var(--ease); }
.duo.is-touched .duo-hint { opacity: 0; }

@media (max-width: 760px) {
	.duo-stage { height: clamp(340px, 108vw, 460px); gap: 8px; }
	.duo[data-who="a"] .duo-door--a, .duo[data-who="b"] .duo-door--b { --grow: 2.1; }
	.duo-chip { font-size: 14px; padding-right: 13px; }
	.duo-chip-faces img { width: 30px; height: 30px; }
	.duo-room { font-size: 11px; letter-spacing: .14em; }
	.duo-name { font-size: 17px; }
	.duo-role { font-size: 10.5px; letter-spacing: .16em; }
	.duo[data-who="a"] .duo-door--b :is(.duo-name, .duo-role, .duo-room), .duo[data-who="b"] .duo-door--a :is(.duo-name, .duo-role, .duo-room) { opacity: 0; }
	.duo-face { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
	.duo-door { transition: none; }
	.duo-photo { transition-duration: .6s; }
	.duo-photo.is-on img { animation: none; scale: 1.03; }
	.duo-photo img { translate: none; }
	.duo-room.is-swap, .duo-caption.is-swap .duo-kicker, .duo-caption.is-swap .duo-text { animation: none; }
}