/*
 * DJ Romello — Vinyl Logo Animation  v2.0
 * Enhanced: glint sweep · beat glow · faster spin · richer grooves
 */

/* ============================================================
   IMAGE LOGO
   ============================================================ */
.djr-logo-img {
	width:       225px;
	height:      auto;
	display:     block;
}

/* ============================================================
   PAGE-LOAD FADE-IN (legacy — no longer used)
   ============================================================ */
.djr-logo--animated {
	display:        flex;
	align-items:    center;
	gap:            13px;
	text-decoration: none;
	opacity:        0;
	animation:      djr-logo-fadein 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
@keyframes djr-logo-fadein {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   VINYL WRAPPER
   ============================================================ */
.djr-vinyl-wrap {
	position:    relative;
	flex-shrink: 0;
	line-height: 0;
	width:       68px;
	height:      68px;
}

/* — Red ambient halo (always-on, soft) — */
.djr-vinyl-wrap::before {
	content:       '';
	position:      absolute;
	inset:         -8px;
	border-radius: 50%;
	background:    radial-gradient(circle, rgba(220,20,60,0.30) 0%, transparent 68%);
	filter:        blur(7px);
	animation:     djr-halo-beat 1.8s ease-in-out infinite;
	pointer-events: none;
	z-index:       0;
}
@keyframes djr-halo-beat {
	0%, 100% { opacity: 0.45; transform: scale(1);    }
	50%      { opacity: 0.9;  transform: scale(1.15); }
}

/* — Light glint — sweeps across grooves independently of disc spin — */
.djr-vinyl-wrap::after {
	content:        '';
	position:       absolute;
	inset:          0;
	border-radius:  50%;
	background:     conic-gradient(
		from 0deg,
		transparent              0%,
		transparent             68%,
		rgba(255,255,255,0.24)  78%,
		rgba(255,255,255,0.10)  84%,
		rgba(255,255,255,0.03)  90%,
		transparent            100%
	);
	animation:      djr-glint-sweep 2.4s linear infinite;
	z-index:        4;
	pointer-events: none;
	mix-blend-mode: screen;
}
@keyframes djr-glint-sweep {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ============================================================
   THE VINYL DISC — spin + beat glow combined
   ============================================================ */
.djr-vinyl-record {
	position:      relative;
	width:         68px;
	height:        68px;
	border-radius: 50%;
	z-index:       1;

	background-color:  #0b0b0e;
	background-image:
		/* Surface sheen: highlights upper-left quadrant */
		radial-gradient(
			ellipse 70% 50% at 33% 25%,
			rgba(255,255,255,0.08) 0%,
			transparent 62%
		),
		/* Groove rings — tighter spacing for realism */
		repeating-radial-gradient(
			circle at 50% 50%,
			transparent              0px,
			transparent              2px,
			rgba(255,255,255,0.030)  2px,
			rgba(255,255,255,0.030)  2.5px,
			transparent              2.5px,
			transparent              4.5px,
			rgba(255,255,255,0.018)  4.5px,
			rgba(255,255,255,0.018)  5px
		);

	/* Spin at 5 s + red beat pulse on box-shadow */
	animation:
		djr-vinyl-spin   5s  linear      infinite,
		djr-record-beat  1.8s ease-in-out infinite;

	will-change: transform, box-shadow;
}

/* Hover: slows to a near-stop like a hand resting on the record */
.djr-logo--animated:hover .djr-vinyl-record {
	animation:
		djr-vinyl-spin   20s linear       infinite,
		djr-record-beat  1.8s ease-in-out infinite;
}

/* Beat glow — red pulse radiates outward in rhythm */
@keyframes djr-record-beat {
	0%, 100% {
		box-shadow:
			0 0 0 1.5px rgba(255,255,255,0.07),
			0 0 0 2px   rgba(0,0,0,0.65),
			0 4px 20px  rgba(0,0,0,0.90),
			inset 0 1px 2px rgba(255,255,255,0.05),
			0 0  0px rgba(220,20,60,0.0);
	}
	50% {
		box-shadow:
			0 0 0 1.5px rgba(255,255,255,0.10),
			0 0 0 2px   rgba(0,0,0,0.65),
			0 4px 20px  rgba(0,0,0,0.90),
			inset 0 1px 2px rgba(255,255,255,0.06),
			0 0 20px rgba(220,20,60,0.55),
			0 0 38px rgba(220,20,60,0.18);
	}
}

/* Outer rim track */
.djr-vinyl-record::before {
	content:        '';
	position:       absolute;
	inset:          3px;
	border-radius:  50%;
	border:         1px solid rgba(255,255,255,0.05);
	pointer-events: none;
	z-index:        2;
}

/* ============================================================
   SPIN KEYFRAME
   ============================================================ */
@keyframes djr-vinyl-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ============================================================
   CENTER LABEL
   ============================================================ */
.djr-vinyl-label {
	position:      absolute;
	top:  50%; left: 50%;
	transform:     translate(-50%, -50%);
	width:         25px;
	height:        25px;
	border-radius: 50%;
	background:    radial-gradient(circle at 38% 32%, #f02040 0%, #c0102c 45%, #7a0018 100%);
	box-shadow:
		0 0 10px rgba(220,20,60,0.80),
		0 0  3px rgba(220,20,60,1.0),
		inset 0 1px 2px rgba(255,255,255,0.20);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         3;
	/* Label pulses brighter on the beat */
	animation: djr-label-beat 1.8s ease-in-out infinite;
}
@keyframes djr-label-beat {
	0%, 100% { box-shadow: 0 0 8px rgba(220,20,60,0.7), 0 0 3px rgba(220,20,60,0.9), inset 0 1px 2px rgba(255,255,255,0.18); }
	50%      { box-shadow: 0 0 18px rgba(220,20,60,1.0), 0 0 6px rgba(255,50,80,1.0), inset 0 1px 2px rgba(255,255,255,0.30); }
}

/* ============================================================
   SPINDLE HOLE
   ============================================================ */
.djr-vinyl-dot {
	width:         5px;
	height:        5px;
	border-radius: 50%;
	background:    #06060a;
	box-shadow:    0 0 0 0.5px rgba(255,255,255,0.12);
}

/* ============================================================
   LOGO TEXT
   ============================================================ */
.djr-logo-text {
	font-family:    'Helvetica Neue', Arial, sans-serif;
	font-size:      1.25rem;
	font-weight:    900;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color:          #ffffff;
	line-height:    1;
	white-space:    nowrap;
}
.djr-logo-text em {
	color:       #dc143c;
	font-style:  normal;
}

/* ============================================================
   FOOTER VARIANT — smaller, same animations
   ============================================================ */
.djr-footer .djr-vinyl-wrap { width: 36px; height: 36px; }

.djr-footer .djr-vinyl-record {
	width:             36px;
	height:            36px;
	animation-duration: 7s, 1.8s;
}
.djr-footer .djr-vinyl-label  { width: 13px; height: 13px; }
.djr-footer .djr-vinyl-dot    { width: 2.5px; height: 2.5px; }
.djr-footer .djr-logo-text    { font-size: 1.1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
	.djr-vinyl-wrap   { width: 38px; height: 38px; }
	.djr-vinyl-record { width: 38px; height: 38px; }
	.djr-vinyl-label  { width: 14px; height: 14px; }
	.djr-logo-text    { font-size: 1.1rem; }
}