/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; cursor: none; }

/* ── VARIABLES ── */
:root {
  --pink1:      #EE34EF;
  --pink2:      #FB47F6;
  --pink3:      #F66DF9;
  --pink4:      #F593F8;
  --pink5:      #EDB7F1;
  --pink6:      #FFC3FF;
  --deep-pink: #FF6273;
  --rose:      #f3a0b5;
  --gold:      #e99c72;
  --gold-dark: #c7937b;
  --cream:     #fff8f9;
  --white:     #ffffff;
  --text:      #4a2040;
}

/* ── BASE ── */
html, body {
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

/* ── BACKGROUND IMAGE (blurred, frosted) ── */
.bg-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('images/main-screen-bg.jpg') center center / cover no-repeat;
	transform: scale(1.05);
}


/* ── PAGE LAYOUT ── */
.page {
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem 4rem;
}

/* ── HEADER ── */
header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeDown 1s 0.15s ease both;
}

$size: 20px;

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  font-weight: normal;
  width: 100%;
  text-align: center;

  //font-size: clamp(1.8rem, 5vw, 3.2rem);
  //font-weight: 700;

font-size: 16vw;
	background: linear-gradient(103deg, 
	var(--pink1) 0px, 
	var(--pink1) 5px,
	var(--pink2) 6px,
	var(--pink2) 10px, 
	var(--pink3) 11px,
	var(--pink3) 15px,
	var(--pink4) 16px, 
	var(--pink4) 20px,
	var(--pink5) 21px,
	var(--pink5) 25px, 
	var(--pink6) 26px,
	var(--pink6) 30px,
	var(--pink1) 31px,
	var(--pink1) 35px);
	
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  //background-clip: text;


  //letter-spacing: 0.06em;
  //line-height: 1.2;
  //font-style: italic;

  background-size: $size $size;
  background-position: 0 0;

  animation: stripes 1s linear infinite;
}

.subtitle {
  margin-top: 0.75rem;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 300;
  color: var(--deep-pink);
  letter-spacing: 0.12em;
  opacity: 0.9;
}

.divider {
  margin: 1.2rem auto 0;
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--rose), var(--gold), transparent);
}

/* ── SECTION LABEL ── */
.section-label {
  
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  opacity: 0.8;
  margin-bottom: 1.4rem;
  text-align: center;
  animation: fadeUp 0.8s 0.3s ease both;
}

/* ── FOOTER ── */
footer {
  margin-top: 4rem;
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--deep-pink);
  opacity: 0.75;
  letter-spacing: 0.08em;
  animation: fadeUp 0.7s 1.0s ease both;
}


a {
	background: linear-gradient(180deg,
	var(--gold-dark) 0%, 
	var(--gold) 35%, 
	var(--cream) 50%, 
	var(--gold) 65%, 
	var(--gold-dark) 100%);
	
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;


	margin: 1em;
}

h1, a {
	-webkit-filter: drop-shadow(2px 2px black);
}

@keyframes stripes {
  100% { background-position: $size 0, $size 0, $size 0;
  }
}