/* =====================================================================
   iHub PNG — "Kalsa" culture layer
   Original artwork inspired by Sepik carving, Highlands bilas (face
   paint), bilum weaving, the kundu drum and the kumul (bird of paradise).
   Everything is scoped to body.png-art so it can be switched on/off.
   ===================================================================== */
.png-art{--png-red:#c8102e;--png-black:#0b0b0b;--png-art:url(../png/png-mask.svg);--png-band:url(../png/png-band.svg)}

/* ---------- Page heroes: spirit-mask motif sits BEHIND the animated blobs */
.png-art .hero__bg:before{
	content:"";position:absolute;right:3%;top:50%;width:min(470px,40vw);aspect-ratio:600/680;
	transform:translateY(-44%);background:var(--png-art) center/contain no-repeat;
	opacity:.26;animation:pngFloat 16s ease-in-out infinite;pointer-events:none
}
.png-art .hero__bg:after{ /* faint bilum weave, fading towards the copy */
	content:"";position:absolute;inset:0;background:url(../png/png-bilum.svg) 0 0/56px 56px;opacity:.05;
	-webkit-mask:linear-gradient(90deg,transparent 30%,#000 75%);mask:linear-gradient(90deg,transparent 30%,#000 75%)
}
/* tribal band on the lower edge of every hero */
.png-art .hero,.png-art .home-hero{position:relative}
.png-art .hero:after,.png-art .home-hero:after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:12px;z-index:2;
	background:var(--png-band) 0 0/auto 12px repeat-x;animation:pngBand 40s linear infinite;pointer-events:none
}
@keyframes pngFloat{50%{transform:translateY(-48%) rotate(-1.5deg)}}
@keyframes pngBand{to{background-position:-960px 0}}

/* heroes that already carry a right-hand visual: keep the art quieter */
.png-art .hero--tiers .hero__bg:before{left:-4%;right:auto;opacity:.16;width:min(400px,36vw)}
.png-art .hero--hub .hero__bg:before{opacity:.2}
.png-art .hero--course .hero__bg:before{opacity:.18}

/* home hero: mask behind the floating member-card animation */
.png-art .home-hero .hero__bg:before{right:6%;width:min(560px,44vw);top:46%;opacity:.3}
.png-art .home-hero:after{bottom:0}
.png-art .home-hero .marquee{margin-bottom:12px}

/* ---------- CTA band: kundu drum + weave */
.png-art .cta-band__in{background:
	url(../png/png-bilum-faint.svg) 0 0/48px 48px,
	radial-gradient(circle at 100% 0%,rgba(245,184,46,.5),transparent 40%),
	radial-gradient(circle at 0% 100%,rgba(43,179,163,.55),transparent 45%),var(--ink)}
.png-art .cta-band__in:after{
	content:"";position:absolute;right:22%;top:50%;width:110px;height:176px;transform:translateY(-50%) rotate(-12deg);
	background:url(../png/png-kundu.svg) center/contain no-repeat;opacity:.28;pointer-events:none
}
.png-art .cta-band__in>*{position:relative;z-index:1}

/* ---------- Home page dark band (hub network): faint kumul */
.png-art .hubs-band{position:relative;isolation:isolate}
.png-art .hubs-band:before{
	content:"";position:absolute;left:-60px;bottom:-40px;width:420px;height:420px;z-index:-1;
	background:url(../png/png-bird.svg) center/contain no-repeat;opacity:.12;transform:scaleX(-1);pointer-events:none
}

/* ---------- Footer: band on top, bilum texture, kumul in the corner */
.png-art .site-footer{background:url(../png/png-bilum-faint.svg) 0 0/52px 52px,var(--ink-3);padding-top:76px}
.png-art .site-footer:before{height:14px;background:var(--png-band) 0 0/auto 14px repeat-x;animation:pngBand 60s linear infinite reverse}
.png-art .site-footer:after{
	content:"";position:absolute;right:-30px;bottom:40px;width:440px;height:440px;z-index:-1;
	background:url(../png/png-bird.svg) center/contain no-repeat;opacity:.13;pointer-events:none
}

/* ---------- small tribal divider under section eyebrows (sparingly) */
.png-art .section__head .eyebrow:after{
	content:"";display:block;width:72px;height:8px;margin:10px auto 0;
	background:var(--png-band) 0 0/auto 8px repeat-x;border-radius:2px
}

@media(max-width:980px){
	.png-art .hero__bg:before{width:62vw;right:-14%;opacity:.16}
	.png-art .home-hero .hero__bg:before{width:80vw;top:62%;right:-10%;opacity:.2}
	.png-art .cta-band__in:after{right:4%;opacity:.18}
	.png-art .site-footer:after{width:300px;height:300px;right:-60px;bottom:120px}
}
@media(max-width:600px){
	.png-art .hero:after,.png-art .home-hero:after{height:9px;background-size:auto 9px}
	.png-art .hubs-band:before{width:260px;height:260px}
}
@media (prefers-reduced-motion:reduce){
	.png-art .hero__bg:before,.png-art .hero:after,.png-art .home-hero:after,.png-art .site-footer:before{animation:none!important}
}

/* refinements */
.png-art .site-footer:after{right:-90px;bottom:-70px;width:380px;height:380px;opacity:.11}
.png-art .hubs-band:before{left:auto;right:-70px;bottom:-70px;transform:none;opacity:.1}

/* =====================================================================
   Mask placement v2: always in clear space, never under nav, text or cards
   ===================================================================== */
@media(min-width:981px){
	/* Standard page heroes: mask sits inside the hero, below the header, right side */
	.png-art .hero__bg:before{
		top:calc(var(--header) + 22px);bottom:auto;right:max(24px,calc((100% - var(--wrap)) / 2 + 24px));
		height:min(400px,calc(100% - var(--header) - 52px));width:auto;aspect-ratio:600/680;
		transform:none;opacity:.42;animation:pngFloat2 14s ease-in-out infinite
	}
	/* keep hero copy clear of the mask */
	.png-art .hero:not(.hero--tiers):not(.hero--course):not(.hero--about):not(.hero--hub) .hero__inner{padding-right:min(36%,380px)}
	.png-art .hero--hub .hub-hero>div:first-child{padding-right:min(30%,330px)}
	.png-art .hero--hub .hub-hero__city{right:auto;left:0;opacity:.6;font-size:clamp(60px,7.5vw,112px);max-width:62%;overflow:hidden}
	.png-art .hero--hub .hero__bg:before{opacity:.45}
	.png-art .hero--hub .hero__dots{-webkit-mask:radial-gradient(circle at 35% 50%,#000,transparent 45%);mask:radial-gradient(circle at 35% 50%,#000,transparent 45%)}
	/* heroes whose right side is already used: no mask */
	.png-art .hero--tiers .hero__bg:before,.png-art .hero--course .hero__bg:before{display:none}

	/* Home: mask moves out of the background into its own slot beside the member card */
	.png-art .home-hero .hero__bg:before{display:none}
	.png-art .home-hero__visual:before{
		content:"";position:absolute;z-index:1;right:-15%;top:-2%;width:58%;aspect-ratio:600/680;
		background:url(../png/png-mask.svg) center/contain no-repeat;opacity:.75;pointer-events:none;
		filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));animation:pngFloat2 12s ease-in-out infinite
	}
	.png-art .home-hero__visual .float-card--pass{left:31%}
	.png-art .home-hero__visual .ring{left:31%}
	.png-art .home-hero__visual .float-chip.c1{top:-3%;right:auto;left:0}
	.png-art .home-hero__visual .float-chip.c2{left:-6%;bottom:14%}
	.png-art .home-hero__visual .float-chip.c3{right:6%;bottom:0}
}
@keyframes pngFloat2{50%{translate:0 -8px;rotate:-1deg}}

/* Tablets & phones: there is no free space behind text, so the hero mask is not drawn */
@media(max-width:980px){
	.png-art .hero__bg:before,.png-art .home-hero .hero__bg:before{display:none}
}