/* ==========================================================================
   Phone home: the link stack, made better
   ========================================================================== */

.phone { display: none; }

@media (max-width: 899px) {
	.phone {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-height: 100dvh;
		padding: 0 16px calc(28px + var(--safe-b));
	}
}

.phone__status {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -16px;
	padding: calc(8px + var(--safe-t)) 16px 8px;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.65));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--line-soft);
	font-family: var(--f-display);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--red);
	text-shadow: var(--text-glow);
}

.phone__signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.phone__signal i { width: 3px; background: var(--red); box-shadow: var(--glow); animation: signal 3s steps(1) infinite; }
.phone__signal i:nth-child(1) { height: 4px; }
.phone__signal i:nth-child(2) { height: 7px; animation-delay: 0.4s; }
.phone__signal i:nth-child(3) { height: 10px; animation-delay: 0.8s; }
.phone__signal i:nth-child(4) { height: 12px; animation-delay: 1.2s; }
@keyframes signal { 80% { opacity: 0.25; } }

.phone__carrier { flex: 1; }
.phone__icon-btn { position: relative; display: grid; place-items: center; width: 36px; height: 30px; margin-left: 2px; }
.phone__icon-btn .pd-icon { width: 24px; }
.phone__icon-btn .badge { position: absolute; top: -4px; right: -2px; min-width: 16px; height: 16px; font-size: 9px; }
.phone__icon-btn.is-signed-in::after { content: ''; position: absolute; right: 4px; bottom: 2px; width: 7px; height: 7px; background: #42ff7a; box-shadow: 0 0 6px #42ff7a; }
.phone__time { font-family: var(--f-num); font-size: 13px; letter-spacing: 0.05em; }
.phone__battery { position: relative; width: 24px; height: 11px; border: 1.5px solid var(--red); }
.phone__battery::after { content: ''; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: var(--red); }
.phone__battery i { position: absolute; inset: 1px; right: 30%; background: var(--red); animation: battery 6s ease-in-out infinite; }
@keyframes battery { 50% { right: 10%; } }

.phone__hero {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 16px 0 4px;
	text-align: center;
}

.phone__eye {
	width: min(56vw, 240px);
	margin-bottom: 10px;
	filter: drop-shadow(0 0 14px rgb(255 69 69 / calc(0.9 * var(--glow-k)))) drop-shadow(0 0 40px rgb(255 69 69 / calc(0.5 * var(--glow-k))));
	animation: eye-bob 6s ease-in-out infinite;
}
@keyframes eye-bob { 50% { transform: translateY(-8px); } }

.phone__name { display: flex; justify-content: center; margin: 14px 0 10px; }
.phone__tagline {
	font-family: var(--f-display);
	font-size: clamp(16px, 5.2vw, 24px);
	text-transform: uppercase;
	text-shadow: var(--text-glow);
	text-wrap: balance;
}
.phone__subline { color: var(--pink); font-size: 20px; }

/* Now playing card */
.phone__now {
	display: grid;
	grid-template-columns: 58px 1fr 72px 44px;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 8px;
	border: 2px solid var(--red);
	background:
		repeating-linear-gradient(0deg, rgb(255 69 69 / 0.05) 0 1px, transparent 1px 3px),
		rgb(10 0 0 / 0.88);
	box-shadow: var(--glow);
}
.phone__now-play { position: relative; display: grid; place-items: center; width: 58px; height: 58px; color: var(--white); }
.phone__now-disc .pd-icon { width: 58px; }
.phone__now-glyph {
	position: absolute;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--black);
	border: 2px solid var(--white);
}
.phone__now-glyph .pd-glyph { width: 12px; height: 12px; }
.phone__now.is-playing .phone__now-disc { animation: spin 1.8s linear infinite; }
.phone__now-info { display: grid; gap: 3px; min-width: 0; color: var(--white); text-decoration: none; }
.phone__now-title { font-family: var(--f-display); font-size: 14px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone__now-meta { color: var(--pink); font-size: 17px; line-height: 1; }
.phone__now-bar { height: 4px; background: var(--red-ink); }
.phone__now-bar i { display: block; width: 0; height: 100%; background: var(--red); box-shadow: var(--glow); }
.phone__now-viz { width: 72px; height: 40px; }
.phone__now-next { display: grid; place-items: center; height: 44px; border: 2px solid var(--red-deep); color: var(--white); }
.phone__now-next .pd-glyph { width: 16px; height: 16px; }

/* The links */
.phone__links { display: grid; gap: 12px; }

.phone-link {
	--d: 0ms;
	position: relative;
	display: grid;
	grid-template-columns: 54px 1fr 28px;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0 14px;
	min-height: 78px;
	padding: 10px 14px 10px 10px;
	border: 2px solid var(--red);
	border-radius: 2px;
	background: linear-gradient(100deg, rgb(255 69 69 / 0.95) 0%, rgb(160 24 24 / 0.8) 34%, rgb(24 2 2 / 0.92) 100%);
	box-shadow: var(--glow);
	color: var(--white);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	animation: link-in 0.6s var(--ease-out) both;
	animation-delay: var(--d);
	transition: transform 0.15s var(--ease-out), box-shadow 0.2s;
}

/* Scanlines and the sweeping light from the original buttons. */
.phone-link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px);
}
.phone-link::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 50%;
	z-index: -1;
	background: linear-gradient(110deg, transparent, rgb(255 255 255 / 0.32), transparent);
	transform: skewX(-12deg);
	animation: link-sweep 5.5s ease-in-out infinite;
	animation-delay: calc(var(--d) * 3 + 1s);
}

.phone-link:active { transform: scale(0.975); box-shadow: var(--glow-strong); }

.phone-link__icon { grid-row: 1 / 3; width: 54px; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.5)); }
.phone-link__label {
	align-self: end;
	font-family: var(--f-display);
	font-size: 21px;
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgb(0 0 0 / 0.35);
}
.phone-link__sub { align-self: start; color: var(--blush); font-size: 18px; line-height: 1.1; }
.phone-link__label:only-of-type { grid-row: 1 / 3; align-self: center; }
.phone-link__go { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid rgb(255 255 255 / 0.6); }
.phone-link__go .pd-glyph { width: 14px; height: 14px; }

/* App links glow a little brighter than plain links. */
.phone-link:not([data-app]) { background: linear-gradient(100deg, rgb(60 6 6 / 0.95), rgb(14 1 1 / 0.92)); }

@keyframes link-in {
	from { opacity: 0; transform: translateY(18px) scale(0.98); filter: brightness(2); }
}
@keyframes link-sweep {
	0%, 70% { left: -60%; }
	100% { left: 130%; }
}

.phone__foot { display: grid; gap: 10px; margin-top: 8px; }
.phone__ticker {
	overflow: hidden;
	border-block: 1.5px solid var(--red-deep);
	padding: 8px 0;
	color: var(--red);
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	text-shadow: var(--text-glow);
}
.phone__ticker span { display: inline-block; animation: ticker-phone 18s linear infinite; }
@keyframes ticker-phone { to { transform: translateX(-50%); } }
.phone__legal { color: var(--pink); font-size: 17px; text-align: center; }

/* Opening an app from the stack */
.phone-link.is-launching { animation: link-launch 0.4s var(--ease-out); }
@keyframes link-launch { 40% { filter: brightness(2); transform: scale(0.97); } }