/* =========================================================================
   The showcase on the sales page: a device, a frame, and a caption.

   The frame inside is a fixed pixel size — that is the point of it, since the
   Lab lays itself out from its own width — so the surround scales the whole
   thing down to fit rather than letting it reflow. What a visitor sees is a
   phone-sized screen or a laptop-sized screen, shrunk, not a squashed one.
   ====================================================================== */

.sc {
	max-width: 960px;
	margin: 0 auto;
}

.sc__device {
	display: flex;
	justify-content: center;
}

/* --------------------------------------------------------- the screen --- */

.sc__screen {
	position: relative;
	overflow: hidden;
	background: var( --paper, #FFFCF5 );
	border: 8px solid var( --ink, #26313F );
	box-shadow: 0 16px 34px rgba( 38, 49, 63, .18 );

	/* content-box on purpose, so the width below is the glass and the bezel
	   is drawn outside it. With the usual border-box the frame inside would
	   be scaled to the full width and then clipped by the border — sixteen
	   pixels of the activity shaved off the right and the bottom, which on a
	   demonstration of a drag-and-drop is exactly where the pieces are. */
	box-sizing: content-box;

	/* Laptop by default; the phone shape is set below at the same width the
	   script swaps the frame, so the two can never disagree. */
	width: min( 100%, 940px );
	aspect-ratio: 1120 / 720;
	border-radius: 14px;
}

.sc__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 1120px;
	height: 720px;
	border: 0;
	/* Scaled from the top left, by script.

	   This was a stylesheet sum once and it was quietly wrong: dividing a
	   width by 1120 in calc() gives a length, and scale() wants a number, so
	   the whole declaration was dropped and the frame drew at full size —
	   but only at the window widths where the sum was not a plain ratio, so
	   it looked right on a laptop and a phone and broke in between.
	
	   Measuring the glass and dividing two numbers is duller and cannot do
	   that. Nothing is visible before the script runs, because the frame has
	   no address until it gives it one. */
	transform-origin: 0 0;
}

/* The still, which is what shows before the frame is opened and for anybody
   who has asked their machine not to animate. */
.sc__still {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var( --mist, #EEF2F7 ) center / cover no-repeat;
	transition: opacity .4s ease;
}

.sc.is-open .sc__still {
	opacity: 0;
	pointer-events: none;
}

.sc__stillnote {
	font-size: .9rem;
	font-weight: 600;
	color: var( --ink-soft, #5C6B7E );
	background: rgba( 255, 255, 255, .9 );
	padding: 8px 16px;
	border-radius: 999px;
}

/* The scale factor. 940 is the widest the glass is ever drawn and the frame
   inside it is 1120 across, so at full size it is shrunk to about 84 per
   cent. On a narrower window the glass is the width of the column, less the
   page gutter and the bezel, and the ratio follows from that. */
@media ( min-width: 900px ) {

	.sc__screen {
		border-radius: 14px 14px 6px 6px;
	}

}

/* ------------------------------------------------------------- phone --- */

@media ( max-width: 899px ) {

	.sc__screen {
		/* A phone: 390 x 760 inside, drawn as tall as the column allows. */
		width: min( 100%, 330px );
		aspect-ratio: 390 / 760;
		border-radius: 34px;
		border-width: 9px;
	}

	.sc__frame {
		width: 390px;
		height: 760px;
	}
}

/* ---------------------------------------------------------- the bar --- */

.sc__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.sc__now {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .98rem;
	min-width: 0;
}

.sc__now b {
	font-weight: 600;
}

.sc__dot {
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 999px;
	background: var( --line, #C8D0DA );
}

.sc.is-playing .sc__dot {
	background: var( --coral, #FF6B4A );
	animation: sc-live 1.8s ease-in-out infinite;
}

@keyframes sc-live {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

.sc__dots {
	display: flex;
	gap: 7px;
}

.sc__dots i {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var( --line, #C8D0DA );
	transition: background .3s ease, transform .3s ease;
}

.sc__dots i.is-on {
	background: var( --ink, #26313F );
	transform: scale( 1.35 );
}

.sc__sound {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	color: var( --ink, #26313F );
	background: #fff;
	border: 2px solid var( --line, #C8D0DA );
	border-radius: 999px;
	padding: 9px 16px;
	min-height: 44px;
	cursor: pointer;
}

.sc__sound:hover {
	border-color: var( --ink, #26313F );
}

.sc__sound.is-on {
	border-color: var( --blue, #2F6FEB );
	background: var( --blue-90, #EAF1FD );
}

@media ( max-width: 480px ) {

	.sc__bar {
		gap: 10px;
	}

	.sc__now {
		flex-basis: 100%;
		justify-content: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.sc.is-playing .sc__dot {
		animation: none;
	}
}