#nav-gradient {
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:-1;
}

.nav-gradient-layer {
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity 0.45s ease;
	background-attachment:fixed;
	background-image:radial-gradient(circle, #000 40%, #333 100%);
}

.nav-gradient-layer.active {
	opacity:1;
}



#content {
	margin-left:0;
	margin-right:0;
	min-width:450px;

}


.block {
	display:flex;
	box-sizing: border-box;
	
	min-height:100vh;
	flex-direction: row;
	overflow:hidden;

	background-image: conic-gradient(from 92deg at 100% 0%, #000000FF 20%, #7C1F5CFF 43%, #231F1FFF 61%, #FFFFFFFF 100%);
}

.alternate-background {
	background-image: conic-gradient(from 92deg at 100% 0%, #000000FF 20%, #300020FF 43%, #231F1FFF 61%, #FFFFFFFF 100%);
}

.hero-block {
	flex-direction:column;
}

.start-block {
	position:relative;
}

.dust-motes {
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:50%;
	z-index:3;
	overflow:hidden;
	pointer-events:none;
	mix-blend-mode:screen;
}

.dust-motes::before {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(225deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 38%, transparent 74%);
	opacity:0.55;
}

.dust-motes span {
	position:absolute;
	left:var(--x);
	top:var(--y);
	width:var(--size);
	height:var(--size);
	border-radius:50%;
	background:rgba(255, 255, 245, var(--alpha));
	box-shadow:0 0 calc(var(--size) * 6) rgba(255, 244, 214, var(--alpha));
	filter:blur(0.2px);
	animation:dust-mote-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}

@keyframes dust-mote-drift {
	from {
		transform:translate3d(0, 0, 0);
	}
	to {
		transform:translate3d(var(--travel-x), var(--travel-y), 0);
	}
}

.headline-content {
	box-sizing:border-box;
	width:100%;
	padding:50px 50px 0;
}

.hero-body {
	display:flex;
	flex:1;
	width:100%;
}

.start-block .hero-body .text-content {
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}



.key-visual {
	display:flex;
	align-items:flex-end;
	justify-content:center;
	width:50%;
	flex-shrink: 0;
	box-sizing:border-box;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.key-visual img {
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
	max-height:75vh;
	object-fit:contain;
	align-self:flex-end;
}

@keyframes key-visual-slide-in {
	from {
		opacity:0;
		transform:translate(200px, 0);
	}
	to {
		opacity:1;
		transform:translate(0, 0);
	}
}

.key-visual img {
	opacity:0;
	transform:translate(200px, 0);
}

.block.is-in-view .key-visual img {
	animation:key-visual-slide-in 1.2s ease-out both;
}

.key-visual-background {
	background-position:50% 10%;
	background-repeat:no-repeat;
	background-size:cover;
}

.text-content {
	width:50%;
	padding:50px;
	box-sizing: border-box;
}

@media (orientation: portrait) {
	.block {
		flex-direction: column;
	}
	.hero-body {
		flex-direction:column;
	}
	.text-content {
		width:100%;
		order:1;
	}
	.key-visual {
		width:100%;
		min-height:25vh;
		flex-grow:1;
		order:2;
	}
	.dust-motes {
		width:70%;
		height:40%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.key-visual img,
	.dust-motes span {
		animation:none;
	}
	.key-visual img {
		opacity:1;
		transform:none;
	}
}



   
    @font-face {
      font-family: "Lilita One";
      src: url("../fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Manrope";
      src: url("../fonts/Manrope/Manrope.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }


    body {
      	font-family:"Manrope";
    }
    .top-nav a,
    h2,
    h3,
    h4,
    h5,
    h6 {
	    font-family:"Lilita One";
	    font-weight:normal;
    }
    h1 {
	    font-family:"Lilita One";
	    font-weight:normal;
    }
   




.top-nav {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:20;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	box-sizing:border-box;
	padding:0;
	overflow-x:auto;
	background:rgba(0, 0, 0, 0.48);
	backdrop-filter:blur(14px);
	height:50px;
}

.top-nav a {
	flex:0 0 auto;
	color:#fff;
	font-size:0.8em;
	line-height:1;
	letter-spacing:0;
	height:50px;
	line-height:50px;
	padding:0 20px 0 20px;
}

.top-nav a:hover,
.top-nav a:focus-visible {
	color:#FF4080;
}

:target {
	scroll-margin-top:50px;
}



@media (max-width: 800px) {
	.top-nav {
		display:none;
	}
    :target {
    	scroll-margin-top:0;
    }

}


html {
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
}
body {
	padding:0;
	margin:0;
	border:0;
	position:relative;


	font-size: clamp(16px, 0.6vw + 12px, 20px);
    line-height: 1.4;
	color: #eee;
	
}




* {
    transition: all 0.3s ease;
}

a {
	text-decoration: none;
	color: var(--fg);
}


a, h1, h2, h3 {

	font-weight:normal;
	clear:both;
	
	letter-spacing:-0.04em;
	line-height: 1.2;

	margin:0;
	padding:0;
}

h1 {
	font-size:3.2em;
	line-height:0.9;
	margin-top:75px;
	margin-bottom:5px;
	position:relative;
}
h2 {
	font-size:1.7em;	
	line-height:1.1;
	margin-top:45px; 
	margin-bottom:45px;
	position:relative;
}  
h1.kr, h2.kr {
	--kr-opacity:0.5;
	opacity:var(--kr-opacity);
}
span.kr {
	--kr-opacity:0.3;
	display:block;
	overflow:visible;
	position:relative;
	z-index:1;
	opacity:var(--kr-opacity);
	pointer-events:none;
	font-weight:normal;
	letter-spacing:-0.04em;
	line-height:1;
	color:#fff;
	text-align:right;
}

.cowpack-svg-text {
	display:inline-block;
	width:auto;
	max-width:100%;
	height:1em;
	vertical-align:baseline;
}

span.kr:has(+ h1) {
	font-size:3.2em;
	line-height:0.9;
	margin-top:var(--marg);
	margin-bottom:-0.9em;
}

span.kr:has(+ h2) {
	font-size:1.7em;
	line-height:1.1;
	margin-top:75px;
	margin-bottom:-1.1em;
}

span.kr:has(+ h3),
span.kr:has(+ h4),
span.kr:has(+ h5),
span.kr:has(+ h6) {
	font-size:1.2em;
	line-height:1.2;
	margin-bottom:-1.2em;
}

h1 + span.kr:has(+ h2) {
	margin-top:0;
}

span.kr + h1,
span.kr + h2,
span.kr + h3,
span.kr + h4,
span.kr + h5,
span.kr + h6 {
	margin-top:0;
}

span.kr + h1,
span.kr + h2,
span.kr + h3,
span.kr + h4,
span.kr + h5,
span.kr + h6 {
	position:relative;
	z-index:2;
}

@keyframes kr-headline-fade {
	from {
		opacity:0;
		transform:translate(200px, 0.25em);
	}
	to {
		opacity:var(--kr-opacity);
		transform:translateY(0);
	}
}

.block .kr {
	opacity:0;
	transform:translate(200px, 0.25em);
}

.block.is-in-view .kr {
	animation:kr-headline-fade 1.2s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.block .kr {
		animation:none;
		opacity:var(--kr-opacity);
		transform:none;
	}
}

p:nth-of-type(even), h2 {
	color:#FF4080;
}

p:nth-of-type(even) {
	color:#ffccdd;
}


h1 + h1 {
	margin-top:10px;
}

h2 + h2 {
	margin-top:-35px;
}