/* ============================================================
   THE JVC — "EL ALTAR" luxury layer
   Ornate gold, roses, rosary, Santa Muerte, velvet altar
   Layered ON TOP of jvc.css
   ============================================================ */

:root {
	--gold-ink: hsl(43 78% 58%);
	--rosary: hsl(44 80% 62%);
}

/* ------------------------------------------------------------
   1.  VELVET ALTAR BACKGROUND
   ------------------------------------------------------------ */
body {
	background:
		/* fine warm grain */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
		/* damask-ish soft diagonal weave */
		repeating-linear-gradient(125deg, hsl(0 30% 6% / 0.5) 0 2px, transparent 2px 9px),
		repeating-linear-gradient(55deg, hsl(353 34% 9% / 0.34) 0 2px, transparent 2px 11px),
		radial-gradient(140% 90% at 50% -10%, hsl(353 52% 13% / 0.6), transparent 55%),
		var(--ink);
	background-blend-mode: overlay, normal, normal, normal, normal;
	background-attachment: fixed, fixed, fixed, fixed, fixed;
}
/* deep candle-light corners that sit behind everything */
body::after {
	content: "";
	position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(46% 40% at 8% 16%, hsl(40 70% 30% / 0.16), transparent 60%),
		radial-gradient(46% 40% at 92% 84%, hsl(318 44% 24% / 0.18), transparent 62%),
		radial-gradient(60% 50% at 50% 108%, hsl(353 60% 16% / 0.3), transparent 60%);
	mix-blend-mode: screen;
}

/* ------------------------------------------------------------
   2.  ROSARY + ORNATE CROSS DIVIDER  (hr.rule)
   ------------------------------------------------------------ */
.rule { height: 128px; border: 0; margin: 0; opacity: 1; background: none; position: relative; display: block; z-index: 1; overflow: visible; }

/* the bead chain */
.rule::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 16px;
	transform: translateY(-50%);
	background:
		linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 50%, var(--gold-deep) 78%, transparent) center/100% 1.5px no-repeat,
		radial-gradient(circle at center, var(--gold-lite) 0 2px, var(--gold) 2.1px 3.6px, var(--gold-deep) 3.7px 4.6px, transparent 5px) repeat-x;
	background-size: 100% 1.5px, 30px 16px;
	-webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	        mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	filter: drop-shadow(0 0 6px hsl(43 80% 50% / 0.4));
	animation: beadGlow 5s ease-in-out infinite;
}
/* the central ornate cross over an ink gap */
.rule::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 96px; height: 74px;
	background:
		url("../../../images/network/jvc/ornament/cross-gold.png") center/auto 70px no-repeat,
		radial-gradient(ellipse 52% 70% at center, var(--ink) 42%, transparent 72%);
	filter: drop-shadow(0 0 12px hsl(43 90% 54% / 0.55));
	animation: crossFlicker 6s ease-in-out infinite;
}
@keyframes beadGlow { 0%,100% { filter: drop-shadow(0 0 5px hsl(43 80% 50% / 0.35)); } 50% { filter: drop-shadow(0 0 10px hsl(43 86% 56% / 0.6)); } }
@keyframes crossFlicker {
	0%, 100% { filter: drop-shadow(0 0 10px hsl(43 90% 54% / 0.45)); }
	48% { filter: drop-shadow(0 0 10px hsl(43 90% 54% / 0.45)); }
	50% { filter: drop-shadow(0 0 22px hsl(46 96% 64% / 0.85)); }
	52% { filter: drop-shadow(0 0 10px hsl(43 90% 54% / 0.45)); }
}

/* ------------------------------------------------------------
   3.  GILT GOLD FRAMES for media
   ------------------------------------------------------------ */
.poster, .profile-media, .lore-media {
	border: 0 !important;
	border-radius: 2px;
	box-shadow:
		0 0 0 1px hsl(40 60% 30%),
		0 0 0 6px var(--ink-1),
		0 0 0 7px hsl(43 64% 44% / 0.85),
		0 0 0 8px hsl(43 80% 60% / 0.25),
		0 34px 80px hsl(0 0% 0% / 0.62);
}
.poster::before, .profile-media::before, .lore-media::before {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	border: 1px solid hsl(46 86% 72% / 0.32);
	box-shadow: inset 0 0 0 1px hsl(43 60% 40% / 0.4), inset 0 0 36px hsl(0 40% 4% / 0.5);
	border-radius: 1px;
}
/* gilt corner roses on the trailer poster + character profiles */
.poster, .profile-media { isolation: isolate; }
.gilt-corners { position: relative; }
.gilt-corners .cnr {
	position: absolute; width: 58px; height: 58px; z-index: 4; pointer-events: none;
	background: url("../../../images/network/jvc/ornament/rose-gold.png") center/contain no-repeat;
	filter: drop-shadow(0 0 8px hsl(43 80% 50% / 0.5));
	opacity: 0.92;
}
.gilt-corners .cnr.tl { top: -20px; left: -20px; transform: rotate(-12deg); }
.gilt-corners .cnr.tr { top: -20px; right: -20px; transform: scaleX(-1) rotate(-12deg); }
.gilt-corners .cnr.bl { bottom: -20px; left: -20px; transform: scaleY(-1) rotate(-12deg); }
.gilt-corners .cnr.br { bottom: -20px; right: -20px; transform: scale(-1) rotate(-12deg); }

/* gang & character tiles — gold inset altar frame */
.gang, .char {
	border: 0 !important;
	box-shadow:
		inset 0 0 0 1px hsl(43 60% 44% / 0.55),
		inset 0 0 0 5px hsl(0 36% 5% / 0.9),
		inset 0 0 0 6px hsl(43 56% 40% / 0.4),
		0 22px 54px hsl(0 0% 0% / 0.5);
}
.char .char-body, .gang .gang-body { position: relative; z-index: 2; }

/* subhero image — framed like an altar panel */
.subhero-bg img { filter: brightness(0.72) contrast(1.05) saturate(0.95); }
.subhero-bg::after {
	background:
		linear-gradient(180deg, hsl(353 50% 6% / 0.62) 0%, hsl(0 40% 5% / 0.22) 38%, hsl(0 44% 5% / 0.8) 84%, var(--ink) 100%),
		linear-gradient(90deg, hsl(0 50% 4% / 0.5) 0%, transparent 46%, hsl(353 44% 8% / 0.34) 100%) !important;
}
.subhero-bg::before {
	content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
	border: 1px solid hsl(43 64% 52% / 0.3);
	box-shadow: inset 0 0 0 1px hsl(46 80% 70% / 0.14);
}

/* ------------------------------------------------------------
   4.  SECTION-HEADER GOLD CROSS WATERMARK
   ------------------------------------------------------------ */
.section-head { position: relative; }
.section-head::before {
	content: ""; position: absolute; z-index: -1;
	top: 50%; left: -18px; transform: translateY(-50%);
	width: 150px; height: 210px;
	background: url("../../../images/network/jvc/ornament/cross-gold.png") left center/contain no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* ------------------------------------------------------------
   5.  DRAMATIC "JVC" TITLE  — gold outline + neon + rose + crack
   ------------------------------------------------------------ */
.title-stack { position: relative; display: inline-block; isolation: isolate; }
.title-rose {
	background: url("../../assets/images/network/jvc/ornament/porla-vivo.png") no-repeat;
	background-size: contain;
	mix-blend-mode: hard-light;
	position: absolute; z-index: 3; pointer-events: none;
	width: clamp(150px, 22vw, 300px); height: auto;
	right: clamp(-40px, -3vw, -10px); bottom: -6%;
	transform: rotate(-24deg);
	filter: drop-shadow(0 6px 22px hsl(0 0% 0% / 0.6)) drop-shadow(0 0 26px hsl(353 84% 46% / 0.55));
	animation: roseBreath 7s ease-in-out infinite;
	opacity: 0.96;
}
@keyframes roseBreath {
	0%, 100% { transform: rotate(-24deg) translateY(0) scale(1); filter: drop-shadow(0 6px 22px hsl(0 0% 0% / 0.6)) drop-shadow(0 0 22px hsl(353 84% 46% / 0.45)); }
	50% { transform: rotate(-22deg) translateY(-8px) scale(1.015); filter: drop-shadow(0 10px 26px hsl(0 0% 0% / 0.6)) drop-shadow(0 0 36px hsl(353 88% 52% / 0.7)); }
}

/* subtle gold engraving crack over the letters */
.title-crack {
	position: absolute; inset: 0; z-index: 4; pointer-events: none;
	background:
		linear-gradient(116deg, transparent 0 47.4%, hsl(40 90% 78% / 0.55) 47.5%, hsl(0 0% 0% / 0.5) 47.9%, transparent 48.2%),
		linear-gradient(72deg, transparent 0 61.4%, hsl(40 90% 78% / 0.4) 61.6%, hsl(0 0% 0% / 0.45) 61.9%, transparent 62.2%);
	mix-blend-mode: overlay; opacity: 0.42;
	-webkit-mask: radial-gradient(60% 80% at 52% 50%, #000 40%, transparent 78%);
	        mask: radial-gradient(60% 80% at 52% 50%, #000 40%, transparent 78%);
}

/* gold outline added to every variant */
.hero .titleword {
	-webkit-text-stroke: 1.5px hsl(44 78% 58% / 0.85);
	paint-order: stroke fill;
}

/* deeper altar scrim over the hero photo so gold + neon read */
.hero .hero-bg img { filter: brightness(0.62) contrast(1.08) saturate(0.92); }
.hero .hero-bg::after {
	background:
		linear-gradient(180deg, hsl(353 60% 8% / 0.5), hsl(353 50% 7% / 0.32) 35%, hsl(0 50% 5% / 0.55) 78%, var(--ink) 100%),
		radial-gradient(70% 60% at 38% 50%, transparent, hsl(0 55% 4% / 0.45) 72%),
		linear-gradient(90deg, hsl(0 50% 4% / 0.6) 0%, transparent 38%, hsl(353 46% 8% / 0.4) 100%),
		hsl(353 64% 12%) !important;
	mix-blend-mode: exclusion;
}
/* second pass: gentle candle warmth + bottom seat */
.hero .hero-bg::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(60% 50% at 30% 54%, hsl(40 80% 36% / 0.16), transparent 60%),
		linear-gradient(180deg, transparent 55%, hsl(0 50% 3% / 0.6) 92%, var(--ink) 100%);
}
/* NEON — brighter, with gold rim */
body[data-hero="neon"] .hero .titleword {
	color: var(--gold-hi);
	-webkit-text-stroke: 2px hsl(46 90% 70%);
	text-shadow:
		0 0 6px hsl(48 96% 88% / 0.95),
		0 0 22px hsl(44 96% 62% / 0.85),
		0 0 50px hsl(40 96% 52% / 0.75),
		0 0 96px hsl(38 96% 48% / 0.6),
		0 0 150px hsl(353 92% 48% / 0.5);
}
/* CHROME — keep engraving, add gold outline already inherited */
body[data-hero="chrome"] .hero .titleword { -webkit-text-stroke: 1.5px hsl(40 70% 46% / 0.8); }
/* CREST — gold with red rim glow */
body[data-hero="crest"] .hero .titleword {
	-webkit-text-stroke: 2px hsl(44 82% 60%);
	text-shadow: 0 0 26px hsl(43 90% 52% / 0.55), 0 0 60px hsl(353 84% 46% / 0.4), 0 2px 2px hsl(0 0% 0% / 0.6);
}

/* ------------------------------------------------------------
   6.  SLOW GLOWING GOLD ROSE FLOATERS
   ------------------------------------------------------------ */
.rose-floater {
	position: absolute; z-index: 0; pointer-events: none;
	width: clamp(120px, 16vw, 230px); height: auto;
	opacity: 0.1;
	filter: drop-shadow(0 0 18px hsl(43 84% 52% / 0.5));
	animation: floatRose 16s ease-in-out infinite;
}
.rose-floater.r2 { animation-duration: 22s; animation-delay: -6s; opacity: 0.08; }
.rose-floater.r3 { animation-duration: 19s; animation-delay: -11s; opacity: 0.07; }
@keyframes floatRose {
	0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.07; }
	50% { transform: translateY(-26px) rotate(6deg); opacity: 0.14; }
}

/* santa muerte altar guardian — faint, watching over a section */
.muerte-guard {
	position: absolute; z-index: 0; pointer-events: none; bottom: 0;
	width: clamp(180px, 22vw, 320px); height: auto;
	opacity: 0.14; mix-blend-mode: luminosity;
	filter: sepia(0.3) brightness(0.9) contrast(1.05) drop-shadow(0 0 30px hsl(43 70% 40% / 0.4));
	-webkit-mask: linear-gradient(180deg, #000 60%, transparent);
	        mask: linear-gradient(180deg, #000 60%, transparent);
}


/* ------------------------------------------------------------
   7.  CANDLELIGHT GOLD MOTES (canvas already in DOM)
   ------------------------------------------------------------ */
.embers { height: 100vh; width: 100vw; }
.goldmotes { position: absolute; inset: 0; z-index: 0; pointer-events: none; height: 100vh; width: 100vw; }

/* ------------------------------------------------------------
   8.  Section atmospherics
   ------------------------------------------------------------ */
.story { position: relative; }
.story::after {
	content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 42%; z-index: 0; pointer-events: none;
	background: url("../../../images/network/jvc/bg/valentinos-art.jpg") right center/cover no-repeat;
	opacity: 0.08; mix-blend-mode: luminosity;
	-webkit-mask: linear-gradient(90deg, transparent, #000 70%);
	        mask: linear-gradient(90deg, transparent, #000 70%);
}
.code-card { background: linear-gradient(160deg, hsl(40 38% 90%), hsl(36 30% 80%)); }
.code-card::after {
	content: ""; position: absolute; top: 14px; right: 14px; width: 40px; height: 56px;
	background: url("../../../images/network/jvc/ornament/cross-gold.png") center/contain no-repeat;
	opacity: 0.5; filter: sepia(0.4) saturate(1.3) hue-rotate(-8deg);
}

/* sequel — santa muerte rising behind */
.sequel-bg img { mix-blend-mode: normal; }
.sequel::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("../../../images/network/jvc/bg/muerte-rise.jpg") center 20%/cover no-repeat;
	opacity: 0.12; mix-blend-mode: luminosity;
	-webkit-mask: radial-gradient(70% 80% at 50% 40%, #000 20%, transparent 75%);
	        mask: radial-gradient(70% 80% at 50% 40%, #000 20%, transparent 75%);
}

/* gangs section velvet glow */
.gangs, .chars, .lore-block, .profiles { position: relative; }

/* nav — thin gold rosary underline accent */
.nav.solid { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, hsl(43 70% 52% / 0.6), transparent) 1; }

/* brand gets a tiny cross */
.brand .jvc::after {
	content: "✝"; font-family: var(--font-ui); font-size: 0.5em; color: var(--gold);
	vertical-align: super; margin-left: 0.12em; opacity: 0.8;
	text-shadow: 0 0 10px hsl(43 84% 52% / 0.6);
}

/* buttons — engraved gold edge */
.btn-gold { box-shadow: 0 10px 34px hsl(43 80% 40% / 0.3), inset 0 1px 0 hsl(48 96% 92% / 0.8), inset 0 0 0 1px hsl(40 70% 44% / 0.5); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	.rule::before, .rule::after, .title-rose, .rose-floater { animation: none !important; }
}

@media (max-width: 760px) {
	.section-head::before { display: none; }
	.title-rose { width: clamp(110px, 30vw, 170px); right: -42px; }
	.rose-floater { display: none; }
	.muerte-guard { opacity: 0.1; }
	.gilt-corners > .cnr { width: 40px; height: 40px; }
}