/* Cyberpunk Style Addons: homepage hero + release cards.
 * Spacing and typography live in the cp-hero-* / cp-rel-* global classes.
 * This file only holds what Elementor can't express: the canvas stage,
 * pseudo-element overlays, the logo draw-on and the glitch keyframes.
 */

/* ---------- Stage ---------- */
.cp-hero {
	position: relative;
	isolation: isolate;
	background-color: #0B0D0F;
}

.cp-hero > * {
	position: relative;
	z-index: 2;
}

.cp-hero > .cp-hero-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
	background: #02070b url(hero-poster.webp) 50% 42% / cover no-repeat;
}

/* portrait screens: the tall scene (same framing at the top, the wet floor
 * runs down behind the whole copy block) */
@media (max-width: 1024px) and (orientation: portrait) {
	.cp-hero > .cp-hero-stage {
		background-image: url(hero-poster-m.webp);
		background-position: 50% 0;
	}
}

.cp-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity .9s ease;
}

.cp-hero-stage.is-live .cp-hero-canvas {
	opacity: 1;
}

/* scanlines + vignette + fade into the next section.
 * Elementor gives every container its own ::before (content: var(--background-overlay),
 * size, position, opacity, transition), which hides plugin overlays. Every overlay
 * below therefore restates content (!important), box, opacity and transition. */
.cp-hero > .cp-hero-stage::before,
.cp-hero > .cp-hero-stage::after {
	content: '' !important;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 1;
	border: 0;
	border-radius: 0;
	transition: none;
	pointer-events: none;
}

.cp-hero > .cp-hero-stage::before {
	background:
		linear-gradient(90deg, rgba(2, 7, 11, .82) 0%, rgba(2, 7, 11, .45) 32%, rgba(2, 7, 11, 0) 55%),
		radial-gradient(120% 90% at 60% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .6) 100%),
		linear-gradient(180deg, rgba(11, 13, 15, 0) 62%, rgba(11, 13, 15, .85) 88%, #0B0D0F 100%);
}

.cp-hero > .cp-hero-stage::after {
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
	mix-blend-mode: multiply;
	opacity: .55;
}

@media (max-width: 1024px) {
	.cp-hero > .cp-hero-stage::before {
		background:
			radial-gradient(120% 80% at 50% 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%),
			linear-gradient(180deg, rgba(2, 7, 11, .1) 0%, rgba(2, 7, 11, 0) 30%, rgba(2, 7, 11, .55) 62%, #0B0D0F 100%);
	}
}

@media (max-width: 1024px) and (orientation: portrait) {
	.cp-hero > .cp-hero-stage::before {
		background:
			radial-gradient(130% 60% at 50% 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%),
			linear-gradient(180deg, rgba(2, 7, 11, .1) 0%, rgba(2, 7, 11, 0) 22%, rgba(2, 7, 11, 0) 30%, rgba(2, 7, 11, .6) 40%, rgba(2, 7, 11, .84) 50%, rgba(2, 7, 11, .9) 78%, #0B0D0F 100%);
	}

	.cp-hero .cp-kicker,
	.cp-hero-title,
	.cp-hero-lead {
		text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .85);
	}
}

/* portrait: plain black overlay behind the copy block, 100% at the bottom of
 * the hero fading to 0% at the kicker. Anchored to the copy (not to a % of the
 * hero) so it lines up on every phone height. */
@media (max-width: 1024px) and (orientation: portrait) {
	.cp-hero .cp-hero-inner::before {
		content: '' !important;
		display: block;
		position: absolute;
		z-index: -1;
		top: -12px;
		left: 50%;
		width: 100vw;
		height: calc(100% + 412px);
		opacity: 1;
		border: 0;
		mix-blend-mode: normal;
		transition: none;
		transform: translateX(-50%);
		background: linear-gradient(0deg, #0B0D0F 0%, #0B0D0F 35%, rgba(11, 13, 15, 0) 100%);
		pointer-events: none;
	}
}

/* ---------- Copy ---------- */
/* Balanced rag on every headline and lead, so short texts break into even
 * blocks instead of one long line and a widow. */
.cp-hero-title,
.cp-hero-lead,
.cp-h1,
.cp-h2,
.cp-h3,
.cp-lead {
	text-wrap: balance;
}

.cp-body,
.cp-rel-title {
	text-wrap: pretty;
}

/* hero lead: from tablet up the 460px measure breaks it at the comma
 * ("...in my own studio, / so you can finish your tracks faster."),
 * which reads better than an evenly balanced split mid phrase */
@media (min-width: 768px) {
	.cp-hero-lead {
		text-wrap: wrap;
	}
}

/* neon highlight in the hero H1: bold words turn yellow */
.cp-hero-title strong,
.cp-hero-title b {
	color: #FFE330;
	font-weight: inherit;
	text-shadow: 0 0 18px rgba(255, 227, 48, .45), 0 0 46px rgba(255, 227, 48, .18);
}

/* ---------- Logo ---------- */
.cp-hero-logo {
	position: relative;
}

/* dark halo behind the script so it reads over the bright bars */
.cp-hero-logo::before {
	content: '';
	position: absolute;
	inset: -30% -6%;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(1, 6, 10, .78) 0%, rgba(1, 6, 10, .45) 45%, rgba(1, 6, 10, 0) 72%);
	filter: blur(6px);
	pointer-events: none;
}

.cp-logo-host {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.cp-hero-logo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.cp-hero-logo .cp-logo-main {
	filter:
		drop-shadow(0 0 1px rgba(0, 0, 0, .95))
		drop-shadow(0 2px 6px rgba(0, 0, 0, .9))
		drop-shadow(0 0 10px rgba(0, 255, 231, .55))
		drop-shadow(0 0 28px rgba(0, 255, 231, .3));
}

/* thicker strokes: the hairline script needs weight to survive on a busy background */
.cp-hero-logo .cp-logo-main path {
	fill: #ffffff;
	stroke: #ffffff;
	stroke-width: .55px;
	stroke-linejoin: round;
}

/* boot: cyan neon outline traces itself, then the tube lights up */
.cp-hero-logo.is-boot .cp-logo-main path {
	fill: rgba(255, 255, 255, 0);
	stroke: #00FFE7;
	stroke-width: .7px;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.cp-hero-logo.is-boot.is-drawing .cp-logo-main path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.5s cubic-bezier(.65, .05, .3, 1);
}

.cp-hero-logo.is-boot.is-on .cp-logo-main path {
	fill: #ffffff;
	stroke: #ffffff;
	stroke-width: .55px;
	transition: fill .08s, stroke .3s, stroke-width .3s;
}

.cp-hero-logo.is-on .cp-logo-main {
	animation: cp-logo-ignite .9s steps(1) 1;
}

@keyframes cp-logo-ignite {
	0% { opacity: 1; }
	12% { opacity: .25; }
	22% { opacity: 1; }
	34% { opacity: .5; }
	40% { opacity: 1; }
	100% { opacity: 1; }
}

.cp-hero-logo .cp-logo-ghost {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}

.cp-hero-logo .cp-logo-ghost path {
	stroke: none;
}

.cp-logo-ghost-a path { fill: #00FFE7; }
.cp-logo-ghost-b path { fill: #FFE330; }

.cp-hero.is-glitch .cp-logo-ghost-a {
	opacity: .9;
	transform: translate(-6px, 1px);
	clip-path: inset(var(--cp-g1, 20%) 0 calc(80% - var(--cp-g1, 20%)) 0);
}

.cp-hero.is-glitch .cp-logo-ghost-b {
	opacity: .85;
	transform: translate(5px, -1px);
	clip-path: inset(var(--cp-g2, 50%) 0 calc(72% - var(--cp-g2, 50%)) 0);
}

.cp-hero.is-glitch .cp-logo-main {
	transform: translateX(2px) skewX(-4deg);
}

.cp-hero.is-glitch .cp-hero-title {
	transform: translateX(-3px);
	text-shadow: 3px 0 0 rgba(0, 255, 231, .7), -3px 0 0 rgba(255, 227, 48, .6);
}

/* idle micro glitch on the logo, independent from the canvas bursts */
.cp-hero-logo .cp-logo-ghost-a {
	animation: cp-logo-jitter 7.3s infinite;
}

@keyframes cp-logo-jitter {
	0%, 96.4%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
	96.6% { opacity: .9; transform: translate(-5px, 0); clip-path: inset(38% 0 44% 0); }
	97.4% { opacity: .9; transform: translate(4px, 0); clip-path: inset(62% 0 18% 0); }
	98.2% { opacity: 0; }
}

/* ---------- Buttons ---------- */
/* Outline button with the same cut corners as cp-btn. The clip-path cuts the
 * border at two corners, so the diagonal edges are drawn as gradients. */
.cp-btn-ghost {
	--cp-line: rgba(0, 255, 231, .6);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	background-image:
		linear-gradient(135deg, transparent 9.2px, var(--cp-line) 9.2px, var(--cp-line) 10.6px, transparent 10.6px),
		linear-gradient(315deg, transparent 9.2px, var(--cp-line) 9.2px, var(--cp-line) 10.6px, transparent 10.6px);
	background-size: 14px 14px, 14px 14px;
	background-position: 0 0, 100% 100%;
	background-repeat: no-repeat;
	background-origin: border-box;
}

.cp-btn-ghost:hover,
.cp-btn-ghost:focus-visible {
	--cp-line: #FFE330;
}

/* Yellow primary (homepage hero): same effects as cp-btn, yellow at rest, cyan on hover */
.cp-btn.cp-btn-yellow {
	background-image:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
		linear-gradient(110deg, #FFE330 0%, #FFE330 35%, #FFF6B8 50%, #FFE330 65%, #FFE330 100%);
}

.cp-btn.cp-btn-yellow:hover,
.cp-btn.cp-btn-yellow:focus-visible {
	background-image:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
		linear-gradient(110deg, #00FFE7 0%, #00FFE7 35%, #C9FFFA 50%, #00FFE7 65%, #00FFE7 100%);
}

.cp-btn-glow:has(.cp-btn-yellow) {
	animation-name: cp-glow-yellow;
}

@keyframes cp-glow-yellow {
	0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 227, 48, .45)) drop-shadow(0 0 0 rgba(255, 43, 214, 0)); }
	50%      { filter: drop-shadow(0 0 26px rgba(255, 227, 48, .8)) drop-shadow(0 0 10px rgba(255, 43, 214, .3)); }
}

/* screen-reader-only text: the brand name inside the hero H1 is its first <span>
 * (the logo already shows it visually) */
.cp-hero-title > span:first-child,
.cp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Release cards ---------- */
.cp-rel-card {
	text-decoration: none;
}

.cp-rel-card .cp-rel-cover {
	transition: border-color .3s, box-shadow .3s, transform .3s;
}

.cp-rel-card:hover .cp-rel-cover,
.cp-rel-card:focus-visible .cp-rel-cover {
	border-color: rgba(0, 255, 231, .8);
	box-shadow: 0 0 0 1px rgba(0, 255, 231, .35), 0 0 34px rgba(0, 255, 231, .28), 0 18px 40px rgba(0, 0, 0, .5);
	transform: translateY(-4px);
}

.cp-rel-cover {
	isolation: isolate;
}

.cp-rel-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s;
}

/* scan beam + scanlines on hover */
.cp-rel-card .cp-rel-cover::before,
.cp-rel-card .cp-rel-cover::after {
	content: '' !important;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	mix-blend-mode: normal;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s;
}

.cp-rel-card .cp-rel-cover::before {
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

.cp-rel-card .cp-rel-cover::after {
	background: linear-gradient(180deg, rgba(0, 255, 231, 0) 0%, rgba(0, 255, 231, .35) 48%, rgba(255, 255, 255, .8) 50%, rgba(0, 255, 231, .35) 52%, rgba(0, 255, 231, 0) 100%);
	height: 30%;
	top: -30%;
	bottom: auto;
	mix-blend-mode: screen;
}

.cp-rel-card:hover .cp-rel-cover img,
.cp-rel-card:focus-visible .cp-rel-cover img {
	transform: scale(1.07);
	filter: saturate(1.25) contrast(1.05);
}

.cp-rel-card:hover .cp-rel-cover::before,
.cp-rel-card:focus-visible .cp-rel-cover::before {
	opacity: 1;
}

.cp-rel-card:hover .cp-rel-cover::after,
.cp-rel-card:focus-visible .cp-rel-cover::after {
	opacity: 1;
	animation: cp-rel-scan 1.1s cubic-bezier(.5, 0, .5, 1) 1 forwards;
}

@keyframes cp-rel-scan {
	from { top: -30%; }
	to { top: 100%; }
}

.cp-rel-card:hover .cp-rel-play,
.cp-rel-card:focus-visible .cp-rel-play {
	opacity: 1;
	transform: translateY(0);
}

.cp-rel-card:hover .cp-rel-title,
.cp-rel-card:focus-visible .cp-rel-title {
	color: #FFE330;
}

/* release marquee: room for the hover lift inside the clipped strip */
.cp-rel-track {
	padding-top: 8px;
}

.cp-rel-card:focus-visible {
	outline: 2px solid #00FFE7;
	outline-offset: 4px;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.cp-hero-logo .cp-logo-ghost-a,
	.cp-hero-logo.is-on .cp-logo-main,
	.cp-rel-card:hover .cp-rel-cover::after {
		animation: none;
	}

	.cp-rel-cover img,
	.cp-rel-card .cp-rel-cover {
		transition: none;
	}
}