/* IDR Rolling Banner: two-face roll-over around the homepage multiplex banner.
 * Prefix idrroll- (the cube on the same page uses #idrCube / .idr-*).
 * Same mechanic as the cube: perspective + preserve-3d + a transform transition
 * with the cube's easing; here the prism turns 90deg about X (a vertical roll).
 * Face 1 (the existing .slim-banner) stays in normal flow, so the panel keeps the
 * banner's exact footprint; face 2 sits absolutely on top of the same box. */

.idrroll {
	--idrroll-half: 110px;           /* set to half the banner height by idr-roll.js */
	position: relative;
	perspective: 1400px;
	overflow: hidden;
}

.idrroll-prism {
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(calc(-1 * var(--idrroll-half))) rotateX(0deg);
	transition: transform 2.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}
.idrroll.is-face2 .idrroll-prism {
	transform: translateZ(calc(-1 * var(--idrroll-half))) rotateX(90deg);
}

.idrroll-face {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.idrroll-face--1 {
	position: relative;
	transform: rotateX(0deg) translateZ(var(--idrroll-half));
}
.idrroll-face--2 {
	position: absolute;
	inset: 0;
	transform: rotateX(-90deg) translateZ(var(--idrroll-half));
}

/* ── Face 2: app row, styled after the Neon Angel artwork ── */
.idrroll-apps {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 22px 16px;
	font-family: Arial, Helvetica, sans-serif;
	background:
		radial-gradient(ellipse 60% 90% at 12% 110%, rgba(255, 140, 0, 0.22), transparent 60%),
		radial-gradient(ellipse 60% 90% at 88% 110%, rgba(255, 60, 200, 0.22), transparent 60%),
		radial-gradient(ellipse 80% 120% at 50% -20%, #6a1aa8 0%, #2a0650 55%, #12021f 100%);
}
.idrroll-apps-head {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.idrroll-apps-title {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.3px;
	background: linear-gradient(180deg, #fff3b0 0%, #ffd34d 45%, #f0a020 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 18px rgba(255, 190, 60, 0.25);
}
.idrroll-apps-sub {
	color: #ffe9a8;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.85;
}

.idrroll-apps-row {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}
.idrroll-app {
	--c: #ff3ad6;                       /* border colour */
	--g: rgba(255, 58, 214, 0.55);      /* glow colour */
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 8px;
	border-radius: 12px;
	border: 2px solid var(--c);
	background: linear-gradient(180deg, rgba(24, 8, 44, 0.94), rgba(8, 2, 18, 0.96));
	box-shadow: 0 0 6px var(--g), 0 0 18px var(--g), inset 0 0 14px var(--g);
	text-align: center;
}
.idrroll-app--dab         { --c: #ff3ad6; --g: rgba(255, 58, 214, 0.5); }
.idrroll-app--alexa       { --c: #3a8dff; --g: rgba(58, 141, 255, 0.5); }
.idrroll-app--tunein      { --c: #19e3b1; --g: rgba(25, 227, 177, 0.45); }
.idrroll-app--radioplayer { --c: #ff8a1f; --g: rgba(255, 138, 31, 0.5); }
.idrroll-app--mytuner     { --c: #ff3050; --g: rgba(255, 48, 80, 0.5); }
.idrroll-app--radionest   { --c: #6a6bff; --g: rgba(106, 107, 255, 0.5); }

.idrroll-app-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	color: #fff;
	white-space: nowrap;
}
.idrroll-ico { width: 40px; height: 30px; flex-shrink: 0; }
.idrroll-ico--round { width: 30px; height: 30px; }
.idrroll-app-name { font-size: 24px; font-weight: 900; letter-spacing: 0.5px; }
.idrroll-app-name--sm { font-size: 17px; font-weight: 800; letter-spacing: 0; }
.idrroll-my { font-weight: 600; font-size: 0.85em; }
.idrroll-app-text {
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	max-width: 150px;
}

.idrroll-alexa { flex-direction: column; gap: 0; }
.idrroll-alexa-word { color: #3bc8ff; font-size: 25px; font-weight: 600; letter-spacing: 0.5px; line-height: 1; }
.idrroll-alexa-smile { width: 54px; height: 9px; }

.idrroll-tunein { gap: 0; font-weight: 900; font-size: 17px; letter-spacing: 1px; }
.idrroll-tunein-t { color: #19e3b1; border: 2px solid #19e3b1; border-right: 0; padding: 4px 7px; border-radius: 3px 0 0 3px; }
.idrroll-tunein-i { color: #0b1a17; background: #19e3b1; border: 2px solid #19e3b1; padding: 4px 7px; border-radius: 0 3px 3px 0; }

.idrroll-rp-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: #e4002b;
	color: #fff;
	font: 900 20px/1 Georgia, "Times New Roman", serif;
	flex-shrink: 0;
}

/* Narrow screens: 3 x 2 grid inside the banner's own (taller) mobile footprint. */
@media (max-width: 1100px) {
	.idrroll-apps-row { gap: 10px; }
	.idrroll-app-name { font-size: 20px; }
	.idrroll-app-name--sm { font-size: 14px; }
	.idrroll-ico { width: 32px; height: 24px; }
	.idrroll-ico--round, .idrroll-rp-mark { width: 24px; height: 24px; font-size: 16px; }
	.idrroll-app-text { font-size: 12px; }
}
@media (max-width: 900px) {
	.idrroll-apps { padding: 10px 10px 12px; gap: 8px; }
	.idrroll-apps-title { font-size: 16px; }
	.idrroll-apps-sub { display: none; }
	.idrroll-apps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.idrroll-app { gap: 6px; padding: 6px 4px; border-radius: 10px; }
	.idrroll-app-brand { height: 26px; gap: 5px; }
	.idrroll-app-name { font-size: 17px; }
	.idrroll-app-name--sm { font-size: 12px; }
	.idrroll-ico { width: 26px; height: 20px; }
	.idrroll-ico--round, .idrroll-rp-mark { width: 20px; height: 20px; font-size: 13px; border-radius: 5px; }
	.idrroll-alexa-word { font-size: 18px; }
	.idrroll-alexa-smile { width: 40px; height: 7px; }
	.idrroll-tunein { font-size: 12px; }
	.idrroll-tunein-t, .idrroll-tunein-i { padding: 2px 4px; }
	.idrroll-app-text { font-size: 10.5px; line-height: 1.25; }
}

@media (max-width: 400px) {
	.idrroll-app-brand { gap: 3px; }
	.idrroll-app-name--sm { font-size: 11px; }
	.idrroll-ico { width: 22px; height: 17px; }
	.idrroll-ico--round, .idrroll-rp-mark { width: 17px; height: 17px; font-size: 11px; border-radius: 4px; }
	.idrroll-tunein { font-size: 11px; }
}

/* Reduced motion: cross-fade instead of the 3D roll. */
@media (prefers-reduced-motion: reduce) {
	.idrroll-prism,
	.idrroll.is-face2 .idrroll-prism,
	.idrroll-face--1,
	.idrroll-face--2 { transform: none; transition: none; }
	.idrroll-face { transition: opacity 0.8s ease; }
	.idrroll-face--2 { opacity: 0; }
	.idrroll.is-face2 .idrroll-face--1 { opacity: 0; }
	.idrroll.is-face2 .idrroll-face--2 { opacity: 1; }
}