/* PT Events: the guest carousel on the home page. Edge to edge under the headline; carousel.js sizes it to the first screen and moves the guests. */
.carousel { --ch: clamp(300px, 50svh, 680px); position: relative; flex: none; width: auto; min-height: 0; height: var(--ch); margin: calc(max(0px, .98 * min(1.38 * var(--ch), 50vw) - var(--ch)) + clamp(28px, 3vw, 44px)) calc(-1 * var(--side)) 0; }
@media (max-width: 760px) { .carousel { --ch: clamp(300px, 50svh, 440px); } }

/* Each guest: a grey cut-out with the colour version on top, shown in colour while in focus */
.carousel .g { position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 1; transform-origin: 50% 100%; opacity: 0; will-change: transform; transition: transform 1.1s cubic-bezier(.65,0,.35,1), opacity .8s ease; }
.carousel.ready .g.vis { opacity: 1; }
.carousel .g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.carousel .g .grey { filter: grayscale(1) contrast(1.05); }
.carousel .g .col { opacity: 0; filter: sepia(.07) saturate(1.05) brightness(1.01); transition: opacity .6s ease; }
.carousel .g.focus .col { opacity: 1; transition: opacity 1s ease .35s; }
/* "grey" and "col" are also the grey band and package column classes: undo those styles so both cut-outs sit on nothing but the yellow disc */
.carousel .g img.grey { background: none; }
.carousel .g img.col { padding: 0; margin: 0; border-radius: 0; background: none; display: block; grid-row: auto; }

/* The yellow disc: one shared disc that slides to whoever is in focus (each guest's own disc only records where it should sit) */
.carousel .g .disc { display: none; }
.carousel .sdisc { display: none; }
.carousel.ready .sdisc { display: block; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; background: var(--sun); transform: translate(-50%, -50%); pointer-events: none; transition: left 1.1s cubic-bezier(.65,0,.35,1), top 1.1s cubic-bezier(.65,0,.35,1), width 1.1s cubic-bezier(.65,0,.35,1); }