/* Recordo hero animations
   Layered phone-float, dotted orbit rings, pulsing brand halo.
   Respects prefers-reduced-motion. */

.recordo-hero-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 6;
	max-width: 560px;
	margin-inline: auto;
	overflow: visible;
	perspective: 1400px;
}

/* Halo: brand-blue radial glow that pulses behind the phone */
.recordo-hero-stage::before {
	content: "";
	position: absolute;
	inset: 8% 8%;
	border-radius: 50%;
	background: radial-gradient(closest-side,
		rgba(37, 59, 131, 0.32) 0%,
		rgba(37, 59, 131, 0.18) 38%,
		rgba(255, 255, 255, 0) 72%);
	filter: blur(8px);
	z-index: 0;
	animation: recordo-halo 5.5s ease-in-out infinite;
}

/* Soft surface card under the phone (catches light) */
.recordo-hero-stage::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 4%;
	height: 18%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(37, 59, 131, 0.20) 0%, rgba(0, 0, 0, 0) 70%);
	filter: blur(12px);
	z-index: 0;
	animation: recordo-shadow 4.4s ease-in-out infinite;
}

/* Orbit rings (dotted, slowly rotating, opposite directions) */
.recordo-orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px dashed rgba(37, 59, 131, 0.25);
	z-index: 1;
	pointer-events: none;
}
.recordo-orbit--outer {
	inset: -4%;
	border-color: rgba(37, 59, 131, 0.28);
	border-style: dashed;
	animation: recordo-spin 60s linear infinite;
}
.recordo-orbit--mid {
	inset: 6%;
	border-color: rgba(37, 59, 131, 0.22);
	animation: recordo-spin-reverse 45s linear infinite;
}
.recordo-orbit--inner {
	inset: 16%;
	border-color: rgba(37, 59, 131, 0.18);
	animation: recordo-spin 32s linear infinite;
}

/* Floating accent dots that ride the orbits */
.recordo-orbit-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #253B83;
	box-shadow: 0 0 0 4px rgba(37, 59, 131, 0.18), 0 0 20px rgba(37, 59, 131, 0.45);
}
.recordo-orbit-dot--top    { top: -5px;  left: 50%; transform: translateX(-50%); }
.recordo-orbit-dot--right  { right: -5px; top: 50%; transform: translateY(-50%); background: #253B83; box-shadow: 0 0 0 4px rgba(37, 59, 131, 0.18), 0 0 20px rgba(37, 59, 131, 0.45); }
.recordo-orbit-dot--bottom { bottom: -5px; left: 36%; background: #E87117; box-shadow: 0 0 0 4px rgba(232, 113, 23, 0.18), 0 0 20px rgba(232, 113, 23, 0.45); }

/* Phone wrapper: floats + tilts independently */
.recordo-phone {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	animation: recordo-float 6s ease-in-out infinite, recordo-tilt 9s ease-in-out infinite;
	will-change: transform;
}
.recordo-phone img {
	width: 88%;
	height: auto;
	filter: drop-shadow(0 30px 40px rgba(37, 59, 131, 0.28));
}

/* Pulse rings: emanate outward from the phone like a recording mic */
.recordo-pulse {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px solid rgba(37, 59, 131, 0.55);
	transform: translate(-50%, -50%);
	z-index: 0;
	opacity: 0;
	animation: recordo-pulse 3.6s ease-out infinite;
}
.recordo-pulse:nth-child(2) { animation-delay: 1.2s; }
.recordo-pulse:nth-child(3) { animation-delay: 2.4s; }

/* Keyframes */
@keyframes recordo-float {
	0%, 100% { transform: translateY(0) translateZ(0); }
	50%      { transform: translateY(-14px) translateZ(0); }
}
@keyframes recordo-tilt {
	0%, 100% { transform: rotateZ(-1.4deg); }
	50%      { transform: rotateZ(1.4deg); }
}
@keyframes recordo-halo {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50%      { opacity: 0.85; transform: scale(1.04); }
}
@keyframes recordo-shadow {
	0%, 100% { opacity: 0.55; transform: scaleX(1); }
	50%      { opacity: 0.85; transform: scaleX(0.88); }
}
@keyframes recordo-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes recordo-spin-reverse {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0deg); }
}
@keyframes recordo-pulse {
	0%   { width: 50%; opacity: 0.7; border-width: 1.8px; }
	100% { width: 130%; opacity: 0; border-width: 0.5px; }
}

/* Accessibility: no motion if user opted out */
@media (prefers-reduced-motion: reduce) {
	.recordo-hero-stage::before,
	.recordo-hero-stage::after,
	.recordo-phone,
	.recordo-orbit,
	.recordo-pulse {
		animation: none !important;
	}
}

/* Tighter on small screens */
@media (max-width: 781px) {
	.recordo-hero-stage { max-width: 380px; aspect-ratio: 4 / 5; }
}