/* Kahani Popup
   Colours and the chamfer size come from the plugin as CSS variables. */

.kpop{
	--kpop-accent:#C49F2E;
	--kpop-gold:#C9A45C;
	--kpop-panel:#1A1713;
	--kpop-heading:#F5E8D0;
	--kpop-body:#B8AA96;
	--kpop-muted:#847766;
	--kpop-overlay:rgba(6,5,4,.82);
	--kpop-chamfer:20px;
	--kpop-btn-chamfer:11px;
	--kpop-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
	--kpop-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
	--kpop-e:cubic-bezier(.19,1,.22,1);

	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;
	padding:24px;
	background:var(--kpop-overlay);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
	opacity:0;visibility:hidden;
	transition:opacity .55s ease,visibility 0s linear .55s;
	-webkit-font-smoothing:antialiased;
}
.kpop[hidden]{display:none}
.kpop.is-open{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s}

.kpop *{box-sizing:border-box}

body.kpop-locked{overflow:hidden}

/* ---------- chamfered gold hairline frame ---------- */
.kpop__frame{
	position:relative;width:100%;max-width:430px;padding:1px;
	max-height:calc(100vh - 48px);
	background:linear-gradient(160deg,var(--kpop-gold),rgba(201,164,92,.12) 46%,rgba(196,159,46,.55));
	clip-path:polygon(var(--kpop-chamfer) 0,calc(100% - var(--kpop-chamfer)) 0,100% var(--kpop-chamfer),100% calc(100% - var(--kpop-chamfer)),calc(100% - var(--kpop-chamfer)) 100%,var(--kpop-chamfer) 100%,0 calc(100% - var(--kpop-chamfer)),0 var(--kpop-chamfer));
	box-shadow:0 40px 90px rgba(0,0,0,.6);
	will-change:transform,opacity,clip-path;
}

.kpop__panel{
	position:relative;overflow:hidden;
	max-height:calc(100vh - 50px);overflow-y:auto;
	background:var(--kpop-panel);
	clip-path:polygon(var(--kpop-chamfer) 0,calc(100% - var(--kpop-chamfer)) 0,100% var(--kpop-chamfer),100% calc(100% - var(--kpop-chamfer)),calc(100% - var(--kpop-chamfer)) 100%,var(--kpop-chamfer) 100%,0 calc(100% - var(--kpop-chamfer)),0 var(--kpop-chamfer));
}

/* a faint warm pool behind the mark */
.kpop__panel::before{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(70% 40% at 50% 12%,rgba(196,159,46,.14),transparent 68%);
}

.kpop__body{
	position:relative;
	padding:clamp(34px,5vw,46px) clamp(26px,5vw,40px) clamp(28px,4vw,36px);
	text-align:center;
}

/* ---------- entrances ---------- */
/* both states are eight-point polygons so the shape can interpolate */
.kpop--unseal .kpop__frame{
	clip-path:polygon(var(--kpop-chamfer) 50%,calc(100% - var(--kpop-chamfer)) 50%,100% 50%,100% 50%,calc(100% - var(--kpop-chamfer)) 50%,var(--kpop-chamfer) 50%,0 50%,0 50%);
	opacity:0;transform:scale(.98);
	transition:clip-path .9s var(--kpop-e),opacity .5s ease,transform .9s var(--kpop-e);
}
.kpop--unseal.is-open .kpop__frame{
	clip-path:polygon(var(--kpop-chamfer) 0,calc(100% - var(--kpop-chamfer)) 0,100% var(--kpop-chamfer),100% calc(100% - var(--kpop-chamfer)),calc(100% - var(--kpop-chamfer)) 100%,var(--kpop-chamfer) 100%,0 calc(100% - var(--kpop-chamfer)),0 var(--kpop-chamfer));
	opacity:1;transform:none;
}

.kpop--rise .kpop__frame{opacity:0;transform:translateY(34px) scale(.97);
	transition:opacity .6s ease,transform .8s var(--kpop-e)}
.kpop--rise.is-open .kpop__frame{opacity:1;transform:none}

.kpop--veil .kpop__frame{opacity:0;transform:scale(.93);filter:blur(10px);
	transition:opacity .7s ease,transform .9s var(--kpop-e),filter .7s ease}
.kpop--veil.is-open .kpop__frame{opacity:1;transform:none;filter:blur(0)}

/* ---------- close ---------- */
.kpop__close{
	position:absolute;top:14px;right:14px;z-index:5;
	width:34px;height:34px;display:grid;place-items:center;
	background:none;border:1px solid transparent;color:var(--kpop-muted);
	cursor:pointer;border-radius:0;padding:0;
	transition:color .3s var(--kpop-e),border-color .3s var(--kpop-e);
}
.kpop__close:hover{color:var(--kpop-accent);border-color:rgba(201,164,92,.3)}
.kpop__close:focus-visible{outline:1px solid var(--kpop-accent);outline-offset:2px}
.kpop__close svg{width:15px;height:15px;display:block}

/* ---------- brandmark ---------- */
.kpop__mark{position:relative;width:66px;aspect-ratio:420/490;margin:0 auto 22px}
.kpop__mark i{
	position:absolute;inset:0;display:block;
	background:var(--kpop-accent);
	-webkit-mask:var(--kpop-mark) center/contain no-repeat;
	        mask:var(--kpop-mark) center/contain no-repeat;
}
.kpop__mark .kpop__iris{clip-path:circle(0% at 50% 50%);transition:clip-path 1.2s var(--kpop-e) .12s}
.is-open .kpop__mark .kpop__iris{clip-path:circle(80% at 50% 50%)}

.kpop__mark .kpop__shine{
	opacity:0;
	background:linear-gradient(102deg,transparent 38%,rgba(255,246,225,.9) 50%,transparent 62%);
	background-size:260% 100%;background-position:130% 0;
}
.is-open .kpop__mark .kpop__shine{animation:kpop-shine 1.5s var(--kpop-e) 1s forwards}
@keyframes kpop-shine{
	0%{background-position:130% 0;opacity:0}
	20%{opacity:1}
	100%{background-position:-130% 0;opacity:0}
}

/* ---------- staggered content ---------- */
.kpop-rev{opacity:0;transform:translateY(14px)}
.is-open .kpop-rev{animation:kpop-rise .8s var(--kpop-e) forwards;
	animation-delay:calc(340ms + var(--i,0) * 95ms)}
@keyframes kpop-rise{to{opacity:1;transform:none}}

.kpop__eyebrow{
	margin:0;font-family:var(--kpop-sans);
	font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
	color:var(--kpop-accent);line-height:1.4;
}

.kpop__numeral{
	margin:14px 0 0;font-family:var(--kpop-display);font-weight:400;
	font-size:clamp(58px,13vw,82px);line-height:.92;color:var(--kpop-heading);
}
.kpop__numeral em{font-style:italic;color:var(--kpop-accent)}

.kpop__title{
	margin:10px 0 0;padding:0;font-family:var(--kpop-display);font-weight:500;
	font-size:clamp(22px,4vw,27px);line-height:1.25;letter-spacing:-.5px;
	color:var(--kpop-heading);
}
.kpop__title em{font-style:italic;color:var(--kpop-accent)}

.kpop__rule{
	display:block;height:1px;width:0;margin:22px auto;
	background:linear-gradient(to right,transparent,var(--kpop-gold),transparent);
}
.is-open .kpop__rule{animation:kpop-draw 1s var(--kpop-e) .75s forwards}
@keyframes kpop-draw{to{width:78px}}

.kpop__text{
	margin:0 auto;font-family:var(--kpop-sans);
	font-size:15px;font-weight:300;line-height:1.75;
	color:var(--kpop-body);max-width:34ch;
}

.kpop__cta{
	display:inline-flex;align-items:center;gap:10px;margin-top:26px;
	padding:15px 30px;background:transparent;
	border:1px solid var(--kpop-gold);border-radius:0;
	color:var(--kpop-heading);
	font-family:var(--kpop-sans);font-size:15px;font-weight:600;letter-spacing:.5px;
	text-decoration:none;line-height:1;cursor:pointer;box-shadow:none;
	clip-path:polygon(var(--kpop-btn-chamfer) 0,100% 0,100% calc(100% - var(--kpop-btn-chamfer)),calc(100% - var(--kpop-btn-chamfer)) 100%,0 100%,0 var(--kpop-btn-chamfer));
	transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.kpop__cta svg{width:12px;height:12px;transition:transform .35s ease}
.kpop__cta:hover{background:var(--kpop-accent);border-color:var(--kpop-accent);color:#0E0D0B}
.kpop__cta:hover svg{transform:translate(3px,-3px)}
.kpop__cta:focus-visible{outline:2px solid var(--kpop-accent);outline-offset:4px}

.kpop__dismiss{
	display:block;margin:16px auto 0;background:none;border:0;padding:4px;
	font-family:var(--kpop-sans);font-size:12px;font-weight:600;letter-spacing:3px;
	text-transform:uppercase;color:var(--kpop-muted);cursor:pointer;
	transition:color .3s ease;
}
.kpop__dismiss:hover{color:var(--kpop-accent)}
.kpop__dismiss:focus-visible{outline:1px solid var(--kpop-accent);outline-offset:3px}

/* ---------- split layout ---------- */
.kpop--split .kpop__frame{max-width:820px}
.kpop--split .kpop__panel{display:grid;grid-template-columns:.82fr 1fr}
.kpop--split .kpop__media{position:relative;overflow:hidden;background:#0E0D0B;min-height:100%}
.kpop--split .kpop__media img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;
	transform:scale(1.12);filter:blur(8px);opacity:0;
	transition:transform 1.8s var(--kpop-e),filter 1.3s var(--kpop-e),opacity .9s ease;
}
.kpop--split.is-open .kpop__media img{transform:scale(1.02);filter:blur(0);opacity:1}
.kpop--split .kpop__media::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(100deg,rgba(14,13,11,.32),rgba(14,13,11,.72));
}
.kpop--split .kpop__body{text-align:left;padding:clamp(34px,4vw,52px)}
.kpop--split .kpop__mark{margin-left:0}
.kpop--split .kpop__rule{margin-left:0}
.kpop--split .kpop__text{margin-inline:0}
.kpop--split .kpop__dismiss{margin-left:0}
.kpop--split .kpop__numeral{font-size:clamp(52px,7vw,72px)}

@media (max-width:720px){
	.kpop--split .kpop__frame{max-width:430px}
	.kpop--split .kpop__panel{grid-template-columns:1fr}
	.kpop--split .kpop__media{min-height:0;height:180px}
}

@media (max-width:480px){
	.kpop{padding:16px}
	.kpop__numeral{font-size:clamp(48px,15vw,64px)}
	.kpop__cta{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
	.kpop,.kpop *{animation-duration:.01ms!important;transition-duration:.01ms!important}
	.kpop__mark .kpop__iris{clip-path:none}
	.kpop-rev{opacity:1;transform:none}
	.kpop__rule{width:78px}
	.kpop--split .kpop__media img{opacity:1;filter:none;transform:none}
}