/* pages/index.css */
/* eslint-disable css/use-baseline */


.page {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}

.page-content {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3rem;
	z-index: 20;
	border-radius: 50px;
	background-color: rgba(0,0,0,0.7);
	backdrop-filter: blur(12px);
}

/* Header / Title */

.page-title {
	font-size: clamp(2.6rem, 4vw + 1.2rem, 3.4rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.page-header {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	background: radial-gradient(circle at 20% 0, #2a1449 0, #050615 55%, #01010a 100%);
	color: #fff;
	
	width: 100%;
	height: auto;
	
	margin: 0 auto;
	
}

.header-nari {
	max-width: 2160px;
	min-height: 480px;
	margin: 0 auto;
	position: relative;
}

.page-subtitle {
	justify-content: center;
	font-size: 0.98rem;
	color: var(--text-muted);
	max-width: 36rem;
	line-height: 1.6;
	margin-bottom: 2.2rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Section headings */
.section-heading {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--text-soft);
	text-align: center;
	margin: 2.2rem 0 1.2rem;
}

.section-heading::before,
.section-heading::after {
	content: "";
	display: inline-block;
	width: 3rem;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(255,255,255,0.25));
	vertical-align: middle;
	margin: 0 0.75rem;
}

.section-heading::after {
	transform: scaleX(-1);
}



/* Support blurb */

.support-copy {
	font-size: 0.88rem;
	color: var(--text-soft);
	text-align: center;
	max-width: 42rem;
	margin: 0.3rem auto 1.6rem;
	line-height: 1.7;
}

@media (max-width: 640px) {
	.page {
		padding-top: 2rem;
	}

	.link-card {
		padding: 0.9rem 1.1rem;
	}
}

.link-cta {
	padding: 0.45rem 1.4rem;
	border-radius: var(--radius-pill);
	border: 2px solid rgba(255, 130, 190, 0.9);
	background:
		radial-gradient(circle at 0 0, #ffd7f1 0, transparent 40%),
		linear-gradient(135deg, #ff4fae, #ff7bc2);
	color: #170b12;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	box-shadow:
		0 0 0 1px rgba(255,255,255,0.16),
		0 8px 22px rgba(0,0,0,0.65);

	transition:
		transform 140ms ease,
		box-shadow 140ms ease,
		filter 140ms ease,
		border-color 140ms ease;

	z-index: 10;
}

.link-card:hover .link-cta {
	background:
		radial-gradient(circle at 0 0, #e6d8ff 0, transparent 40%),
		linear-gradient(135deg, #b794ff, #8e5bff, #5328a8);
	color: var(--text-main);
	border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Special tweaks for the Twitter card, if needed */
.link-card--twitter .twitter-follow-chip {
	position: static;	/* no absolute */
	top: auto;
	right: auto;
	transform: none;
	z-index: 3;
}

/* Hover / active states to make it feel alive */
.link-cta:hover {
	transform: translateY(-1px) scale(1.03);
	filter: brightness(1.03);
	box-shadow:
		0 0 8px rgba(255, 200, 235, 0.8),
		0 12px 26px rgba(0,0,0,0.85);
}

.link-cta:active {
	transform: translateY(0) scale(0.97);
	box-shadow:
		0 0 4px rgba(255, 200, 235, 0.7),
		0 6px 16px rgba(0,0,0,0.9);
}



.nari-hero-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.nari-hero-inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem 5rem;
}

.nari-hero-sticky {
	position: fixed;
	top: 0;
	left: 15%;
	z-index: 20;
	display: inline-block;
	pointer-events: none;
	width: max-content;
}

/* SVG sizing */
.hero-logo {
	position: relative;
	display: block;
}

.hero-logo-nari {
	z-index: 1;
	padding-top: 2rem;
	width: 75%;
	height: auto;
	color: #ffffff;
	filter: drop-shadow(0 0 24px rgba(255,255,255,0.4));
	border: 0px solid #ffffff;

	/* TWO animations: glow + float */
	animation:
		logo-nari-glow 5s ease-in-out infinite alternate,
		logo-nari-float 36s linear infinite alternate;
}

.svg-swap {
	position: relative;
	width: 100%;
	height: auto;
	
	filter:
		drop-shadow(0 0 22px rgba(226, 108, 255, 0.9));
	
	animation: 
		logo-asmr-float 36s linear infinite alternate;
}

.svg-swap .icon {
	position: absolute;
	inset: 0;

	margin-top: -4rem;
	margin-left: 12.5rem;
	transform-origin: left center;
	color: rgb(226, 108, 255);
	z-index: 0;
}

.svg-swap .a { 
	opacity: 1; 
	width: 75%;
	animation-fill-mode: both;
	animation: logo-asmr-va-switch 60s linear infinite alternate-reverse;
	z-index: 1;
}
.svg-swap .b {
	width: 50%;
	margin-left: 50%;
	opacity: 0;
	animation-fill-mode: both;
	animation: logo-asmr-va-switch 60s linear infinite alternate;
	z-index: 0;
}

@keyframes logo-asmr-va-switch {
	0%, 45% { opacity: 0; }
	47.5% { opacity: 0; transform: scale(0); }
	50% { filter: blur(12px); }
	52.5%, 100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

.hero-logo-asmr {
	position: absolute;
	width: 75%;
	margin-top: -4rem;
	margin-left: 12.5rem;
	filter:
		drop-shadow(0 0 22px rgba(226, 108, 255, 0.9));
	transform-origin: left center;
	color: rgb(226, 108, 255);
	z-index: 0;

	/* just the float animation, opposite phase */
	animation: logo-asmr-float 36s linear infinite alternate;
}

@keyframes logo-nari-glow {
	from {
		filter:
			drop-shadow(0 0 24px rgba(255,255,255,0.4));
	}
	to {
		filter:
			drop-shadow(0 0 48px rgba(255,255,255,1));
	}
}

/* Nari floats mostly upward-first */
@keyframes logo-nari-float {
	0% {
		transform: translate(0, 0);
	}
	10% {
		transform: translate(-3px, 3px);
	}
	20% {
		transform: translate(-6px, 6px);
	}
	30% {
		transform: translate(-9px, 12px);
	}
	40% {
		transform: translate(-12px, 6px);
	}
	50% {
		transform: translate(-15px, 0px);
	}
	60% {
		transform: translate(-12px, -6px);
	}
	70% {
		transform: translate(-9px, -12px);
	}
	80% {
		transform: translate(-6px, -6px);
	}
	90% {
		transform: translate(-3px, -3px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

/* ASMR floats in the opposite rhythm */
@keyframes logo-asmr-float {
	0% {
		transform: translate(0, 0);
	}
	10% {
		transform: translate(3px, -6px);
	}
	20% {
		transform: translate(6px, -8px);
	}
	30% {
		transform: translate(9px, -8px);
	}
	40% {
		transform: translate(12px, -6px);
	}
	50% {
		transform: translate(15px, 0px);
	}
	60% {
		transform: translate(12px, 6px);
	}
	70% {
		transform: translate(9px, 8px);
	}
	80% {
		transform: translate(6px, 8px);
	}
	90% {
		transform: translate(3px, 6px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

.nari-mascot {
	position: fixed;
	display: inline-block;
	pointer-events: none;
	width: max-content;
	bottom: 0;
	z-index: 0;
}

.nari-mascot.nari {
	right: 0;
	top: 0;
	filter: 
		drop-shadow(0 0 24px rgba(226, 108, 255, 0.9))
		brightness(80%);
	animation: nari-mrmeowzers 60s ease-in-out infinite alternate;
}

.nari-mascot.mrmeowzers {
	left: 0;
	bottom: -10px;
	filter: 
		drop-shadow(0 0 12px var(--accent))
		brightness(80%);
	animation: nari-mrmeowzers 60s ease-in-out infinite alternate-reverse;
}

@keyframes nari-mrmeowzers {
	from {
		filter: drop-shadow(0 0 24px rgba(226, 108, 255, 0.9));

	}
	to {
		filter: drop-shadow(0 0 12px var(--accent));

	}
}

.mascot-dim {
	z-index: 1;
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 75% 40%, rgba(0,0,0,0.5), transparent 70%);
	opacity: var(--scroll-dim, 0);
	transition: opacity 600ms ease;
}


/* Phones */
        /*
@media (max-width: 360px) {
        
}*/	 /* XS */

        /*
@media (max-width: 390px) {

}*/

        /*
@media (max-width: 412px) {

}*/	 /* L */

        /*
@media (max-width: 430px) {

}*/	 /* XL */
             

/* Foldables / Landscape Phones / Small Tablets */
        /*
@media (max-width: 768px) {

}
        */

/* Tablets */
        /*
@media (max-width: 1024px) {

}
        */

/* Desktops */

/* 
@media (max-width: 1280px) {
	
}
*/

/* 1440 x 900 (NOT 1440p!!) */
        /*
@media (max-width: 1440px) {
	
}
        */

/* 1080p FHD */
        /*
@media (max-width: 1920px) {
	
}
*/

/* 1440p */
        /*
@media (max-width:	2560px) {
	
}
*/

/* 4K */
        /*
@media (max-width: 3840px) {
	
}
        */

/* 8K */
@media (min-width: 3841px) and (max-width: 7680px) {
	.nari-mascot.nari {
		transform-origin: center top;
		transform: translate(-1024px, 0px) scale(4);
	}
	
	.nari-mascot.mrmeowzers {
		transform-origin: center bottom;
		transform: translate(1000px, 0px) scale(5);
	}
}

.cat-wrap {
	position: relative;
	display: inline-block;
}

.nari-bubble,
.cat-bubble {
	position: absolute;
	width: 100px;
	
	white-space: nowrap;
	
	padding: 0.75rem 0.75rem;
	border-radius: 999px;
	background: rgba(200,200,200,0.92);
	color: #111;
	font-weight: 700;
	font-size: 0.95rem;

	transform: translate(-50%, -50%) scale(0.75);
	opacity: 0;
	pointer-events: none;

	box-shadow:
		0 12px 24px rgba(0,0,0,0.35),
		0 0 18px rgba(255,79,174,0.35);

	z-index: 1;
}

.nari-bubble {
	left: 65%;
	top: 42%;
	
	min-width: 20ch;
	
	z-index: 10;
}

.cat-bubble {
	left: 105%;
	top: 36%;
	
	min-width: 10ch;
}

/* Bubble tail */
.nari-bubble::after,
.cat-bubble::after {
	content: "";
	position: absolute;
	left: 0%;
	bottom: 0px;
	width: 50px;
	height: 38px;
	background: rgba(200,200,200,0.92);
	transform: rotate(0deg);
	border-radius: 3px;
	z-index: -1;
}

/* Triggered state */
.nari-bubble.is-open,
.cat-bubble.is-open {
	animation: bubble-pop 4s ease-out forwards;
}

@keyframes bubble-pop {
	0%	 { opacity: 0; transform: translate(-50%, -50%) scale(0.6); filter: blur(2px); }
	20%	{ opacity: 1; transform: translate(-50%, -56%) scale(1.05); filter: blur(0); }
	45%	{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -44%) scale(0.98); }
}






/*
		COMMISSIONS PAGE
*/

/* --- Commissions content --- */
.page-section.commissions {
  display: grid;
  gap: 1.25rem;
}

.commission-card {
	background:
		radial-gradient(circle at 0 0, rgba(255,79,174,0.20) 0, transparent 55%),
		radial-gradient(circle at 100% 0, rgba(163,125,255,0.20) 0, transparent 55%),
		linear-gradient(135deg, #11121f, #121322 55%, #11101c 100%);

	text-decoration: none;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: var(--radius-xl);
	padding: 1.25rem 1.25rem;
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(10px);
}

.commission-card__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.commission-card__line {
  margin: 0;
  color: var(--text-soft);
}

.commission-email {
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 650;
}

.commission-email:hover {
  text-decoration: underline;
}

.commission-cta {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-start;
}

.commission-grid {
  display: grid;
  gap: 0.65rem;
}

.commission-row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.commission-row__label {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.commission-row__value {
  color: var(--text-main);
  font-weight: 650;
  font-size: 0.95rem;
  text-align: right;
}

.commission-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  color: var(--text-soft);
  line-height: 1.7;
}

.commission-note {
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .commission-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .commission-row__value {
    text-align: left;
  }
}

.commission-currency-note {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: right;
}

.commission-builder .hidden {
  display: none;
}

.commission-option-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.commission-form label,
.commission-form fieldset {
  display: block;
  margin-bottom: 1rem;
}

#emailOutput {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: rgba(0,0,0,0.4);
  color: var(--text-main);
  border-radius: var(--radius-card);
  padding: 1rem;
  border: 1px solid var(--border-subtle);
}