/*
Theme Name:     Musicon Child Theme
Description:    Rocky Street obsidian look for the Musicon theme.
Template:       musicon
Version:        1.0.0
Tags:           custom-colors, editor-style, featured-images, translation-ready
*/

/* =====================================================================
   ROCKY STREET - OBSIDIAN LOOK
   Colours and sizes you might want to change are all in this first block.
   ===================================================================== */

@property --rs-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rs-spin { to { --rs-angle: 360deg; } }

:root {
	--rs-obsidian: #050507;
	--rs-glass: rgba(8, 8, 13, .60);
	--rs-glass-dense: rgba(6, 6, 10, .84);
	--rs-line: rgba(255, 255, 255, .08);
	--rs-ink: #f1f0f7;
	--rs-mute: #9ba1ba;
	--rs-gold: #fcd34d;
	--rs-violet: #c4b5fd;
	--rs-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* the travelling edge highlight */
	--rs-edge-speed: 9s;
	--rs-arc-cover: 52deg;   /* length on square album covers (about 150px) */
	--rs-arc-wide: 24deg;    /* length on wide panels (about 150px) */
}

/* ---------- backdrop: obsidian with faint glints ---------- */
html, html.dark, body {
	background-color: var(--rs-obsidian) !important;
	--body-bg-color: var(--rs-obsidian);
	--color-border: var(--rs-line);
}
body {
	background-image:
		radial-gradient(1100px 480px at 8% -6%, rgba(124, 58, 237, .10), transparent 60%),
		radial-gradient(900px 500px at 105% 30%, rgba(56, 189, 248, .07), transparent 60%),
		radial-gradient(700px 420px at 40% 112%, rgba(252, 211, 77, .045), transparent 60%),
		linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .025) 45%, rgba(196, 181, 253, .04) 50%, transparent 58%) !important;
	background-attachment: fixed !important;
	font-family: var(--rs-font);
}
body, button, input, select, textarea, .site-content { font-family: var(--rs-font); }

/* ---------- type ---------- */
h1, h2, h3, h4, .entry-title, .block-loop-title, .block-loop-heading, .user-display-name {
	font-family: var(--rs-font);
	letter-spacing: -.005em;
}
h1, h2, .block-loop-heading { font-weight: 400; }

/* ---------- glass: header, sidebar, profile header, tabs, menus, modals ---------- */
#header, .site-header {
	background-color: var(--rs-glass-dense) !important;
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
	border-color: var(--rs-line) !important;
}
#aside, .site-sidebar {
	background-color: var(--rs-glass) !important;
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border-color: var(--rs-line) !important;
}
.header-user, .header-station, .entry-header-container {
	background-color: transparent !important;
}
.user-navigation, .page-navigation {
	background-color: var(--rs-glass) !important;
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border-color: var(--rs-line) !important;
}
.dropdown-menu, .modal-content, .plyr__queue, .play-embed, .track-list {
	background-color: var(--rs-glass-dense) !important;
	-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
	border: 1px solid var(--rs-line) !important;
	border-radius: 16px;
}

/* ---------- the player bar (Plyr) ---------- */
.fixed-bottom {
	background-color: var(--rs-glass-dense) !important;
	-webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
	border-top: 1px solid var(--rs-line) !important;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, .6);
}

/* ---------- the travelling blue-to-purple edge ----------
   Applied to album/track covers in every grid, and to panels.
   To put it on anything else, give that block the extra CSS class:  rs-glow  */
.block-loop-item .post-thumbnail,
.rs-glow,
.wp-block-group.rs-glow {
	position: relative;
	--rs-arc: var(--rs-arc-cover);
}
.rs-glow, .wp-block-group.rs-glow { --rs-arc: var(--rs-arc-wide); }

.block-loop-item .post-thumbnail::before,
.rs-glow::before {
	content: '';
	position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
	background: conic-gradient(from var(--rs-angle),
		transparent 0deg,
		transparent calc(360deg - var(--rs-arc)),
		rgba(30, 64, 175, 0) calc(360deg - var(--rs-arc)),
		#1d4ed8 calc(360deg - var(--rs-arc) * .62),
		#4338ca calc(360deg - var(--rs-arc) * .34),
		#6d28d9 calc(360deg - var(--rs-arc) * .12),
		#7c3aed calc(360deg - var(--rs-arc) * .02),
		transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: rs-spin var(--rs-edge-speed) linear infinite;
}
/* stagger so neighbouring covers never move in step */
.block-loop-item:nth-child(2n) .post-thumbnail::before { animation-delay: -2.2s; }
.block-loop-item:nth-child(3n) .post-thumbnail::before { animation-delay: -4.4s; }
.block-loop-item:nth-child(5n) .post-thumbnail::before { animation-delay: -6.6s; }
.block-loop-item:nth-child(7n) .post-thumbnail::before { animation-delay: -8s; }

.block-loop-item .post-thumbnail { box-shadow: 0 8px 28px rgba(0, 0, 0, .55); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
.block-loop-item:hover .post-thumbnail { transform: translateY(-3px); box-shadow: 0 16px 38px -6px rgba(0, 0, 0, .8), 0 0 24px -2px rgba(139, 92, 246, .3); }
.block-loop-item:hover .post-thumbnail::before { padding: 1.6px; }

/* ---------- section headings on grids ---------- */
.block-loop-heading { color: #fbf8ef; text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }
.block-loop-more { color: var(--rs-violet); }
.block-loop-item .entry-title a { color: #fbf8ef; }
.block-loop-item:hover .entry-title a { color: var(--rs-gold); }
.entry-artist, .entry-meta, .entry-subtitle { color: var(--rs-mute); }

/* ---------- store buttons (Easy Digital Downloads) ---------- */
.edd-submit, .edd-submit.button, a.edd-add-to-cart, .edd_purchase_submit_wrapper a {
	background: linear-gradient(90deg, #fcd34d, #fbbf24) !important;
	color: #1a1300 !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 600;
	letter-spacing: .06em;
	box-shadow: 0 0 22px rgba(252, 211, 77, .25);
	transition: box-shadow .3s, transform .2s;
}
.edd-submit:hover, a.edd-add-to-cart:hover { box-shadow: 0 0 32px rgba(252, 211, 77, .5); transform: translateY(-1px); }

/* ---------- form fields ---------- */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=url], textarea, select {
	background: rgba(8, 8, 13, .7) !important;
	color: var(--rs-ink) !important;
	border: 1px solid var(--rs-line) !important;
}
input:focus, textarea:focus, select:focus {
	border-color: rgba(196, 181, 253, .55) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .25) !important;
	outline: none;
}
::placeholder { color: rgba(155, 161, 186, .7) !important; }

/* ---------- footer copy block ---------- */
#footer .wp-block-group.has-background { background-color: transparent !important; }

/* ---------- small polish ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(196, 181, 253, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(196, 181, 253, .3); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(124, 58, 237, .55); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.block-loop-item .post-thumbnail::before, .rs-glow::before { animation: none; }
}