*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red:    #ff1744;
  --pink:   #ff4d9e;
  --rose:   #f06292;
  --purple: #9c27b0;
  --deep:   #4a0080;
  --white:  #fff0f8;
  --bg:     #06000d;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Cormorant Garamond', serif;
  color: var(--white);
  user-select: none;
  cursor: url("cursor.png") 22 12, auto;
}

/* ── canvases ── */
#stars, #heart {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
}
#stars { z-index: 0; }
#heart { z-index: 1; background: transparent; }

/* ── petals ── */
#petals-container {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.petal {
  position: absolute; top: -60px;
  opacity: 0;
  animation: petalFall linear infinite;
  filter: drop-shadow(0 0 6px #ff4d9e88);
}
@keyframes petalFall {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1);   opacity: 0; }
  5%   { opacity: .9; }
  90%  { opacity: .6; }
  100% { transform: translateY(110vh) rotate(720deg) scale(.4); opacity: 0; }
}

/* ── shooting stars ── */
#shooting-stars {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.shoot {
  position: absolute;
  width: 160px; height: 2px;
  background: linear-gradient(90deg, transparent, #ff9de2, var(--purple));
  border-radius: 2px; opacity: 0;
  animation: shoot linear forwards;
}
@keyframes shoot {
  0%   { opacity: 0;  transform: translateX(0)    translateY(0); }
  5%   { opacity: 1; }
  100% { opacity: 0;  transform: translateX(600px) translateY(300px); }
}

/* ════════════════════════════════
   OVERLAY — absolute scatter
   ════════════════════════════════ */
#overlay {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
}

/* ── "прости ми," ── top-left, blasts from left */
#forever-text {
  position: absolute;
  top: 13%; left: 5%;
  transform-origin: left top;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.8vw, 2rem);
  color: var(--pink);
  letter-spacing: .25em;
  text-shadow: 0 0 24px var(--pink), 0 0 60px #9c27b055;
  opacity: 0;
  transform: rotate(-16deg);
  animation:
    blastFromLeft   .9s cubic-bezier(.16,1,.3,1) .3s forwards,
    floatLeft       6s  ease-in-out              1.2s infinite;
}
@keyframes blastFromLeft {
  0%   { opacity: 0; transform: translateX(-130vw) rotate(-38deg) scale(1.4); }
  70%  { opacity: 1; transform: translateX(6px)    rotate(-14deg) scale(.97); }
  100% { opacity: 1; transform: translateX(0)       rotate(-16deg) scale(1); }
}
@keyframes floatLeft {
  0%, 100% { transform: rotate(-16deg) translateY(0); }
  50%       { transform: rotate(-13deg) translateY(-8px); }
}

/* ── "Мария" ── under "прости ми," */
#name {
  position: absolute;
  top: 20%; left: 5%;
  transform-origin: left top;
  transform: rotate(-16deg);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #ff9de2 0%, #ff4d9e 25%, #ff1744 50%, #c2185b 68%, #9c27b0 85%, #4a0080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px #ff4d9e88) drop-shadow(0 0 60px #9c27b044);
  opacity: 0;
  animation:
    nameSmash  1.2s cubic-bezier(.16,1,.3,1) .6s forwards,
    nameSway   9s   ease-in-out             1.8s infinite;
}

@keyframes nameSmash {
  0%   { opacity: 0; transform: translateX(-80px) rotate(-30deg) scale(1.3); filter: blur(20px) drop-shadow(0 0 60px #ff2244); }
  50%  { opacity: 1; filter: blur(1px) drop-shadow(0 0 40px #ff224499); }
  80%  { transform: translateX(4px) rotate(-15deg) scale(.97); }
  100% { opacity: 1; transform: translateX(0) rotate(-16deg) scale(1); filter: drop-shadow(0 0 30px #ff4d9e88) drop-shadow(0 0 60px #9c27b044); }
}
@keyframes nameSway {
  0%,100% { transform: rotate(-16deg) scale(1); }
  25%      { transform: rotate(-12deg) scale(1.02); }
  55%      { transform: rotate(-19deg) scale(.98); }
  80%      { transform: rotate(-14deg) scale(1.01); }
}

/* ── "обичам те" ── bottom-right, blasts from right */
#subtitle {
  position: absolute;
  bottom: 16%; right: 4%;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  color: #e040fb;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.1;
  text-shadow: 0 0 20px #e040fb, 0 0 50px #9c27b088, 0 0 90px #9c27b044;
  opacity: 0;
  transform: rotate(12deg);
  animation:
    blastFromRight  .9s cubic-bezier(.16,1,.3,1) 1.4s forwards,
    floatRight       7s ease-in-out              2.3s infinite;
}
@keyframes blastFromRight {
  0%   { opacity: 0; transform: translateX(130vw) rotate(35deg) scale(1.4); }
  70%  { opacity: 1; transform: translateX(-6px)  rotate(10deg) scale(.97); }
  100% { opacity: 1; transform: translateX(0)      rotate(12deg) scale(1); }
}
@keyframes floatRight {
  0%, 100% { transform: rotate(12deg) translateY(0); }
  50%       { transform: rotate(9deg)  translateY(-8px); }
}

/* ── typewriter ── center, enters from below */
#message-block {
  position: absolute;
  top: 62%; left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: slamUp 1s cubic-bezier(.16,1,.3,1) 2.2s forwards;
}
@keyframes slamUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(80px) skewX(6deg); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-6px) skewX(0); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)    skewX(0); }
}
#typewriter-wrap {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  color: rgba(255,255,255,.88);
  text-align: center;
  text-shadow: 0 0 30px var(--pink);
  max-width: 72vw;
  line-height: 1.6;
  display: inline-block;
}
#cursor {
  display: inline-block;
  color: var(--pink);
  animation: blink .65s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

#subtitle-top {
  display: block;
  font-size: clamp(.9rem, 2vw, 1.4rem);
  letter-spacing: .35em;
  opacity: .85;
}
#subtitle-big {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  letter-spacing: .06em;
  background: linear-gradient(135deg, #ff1744 0%, #e040fb 50%, #ff4d9e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px #e040fb99);
}

/* ════════════════════════════════
   SCATTERED HEARTS
   ════════════════════════════════ */
.hs {
  position: absolute;
  color: var(--pink);
  filter: drop-shadow(0 0 10px var(--pink));
  animation: heartbeat 1.4s ease-in-out infinite, hsFadeIn .8s ease forwards;
  opacity: 0;
}
@keyframes hsFadeIn {
  to { opacity: 1; }
}
@keyframes heartbeat {
  0%,100% { transform: scale(1)    rotate(var(--r,0deg)); }
  14%      { transform: scale(1.4)  rotate(var(--r,0deg)); }
  28%      { transform: scale(1)    rotate(var(--r,0deg)); }
  42%      { transform: scale(1.2)  rotate(var(--r,0deg)); }
}

.h1 { top:  7%; left:  3%; font-size: clamp(1.4rem,3vw,2.4rem); --r:-20deg; animation-delay: 2.5s, 2.5s; }
.h2 { top:  6%; right: 4%; font-size: clamp(1rem,2vw,1.6rem);   --r: 15deg; animation-delay: 2.9s, 2.9s; }
.h3 { top: 38%; left:  2%; font-size: clamp(.8rem,1.5vw,1.2rem);--r:-10deg; animation-delay: 3.3s, 3.3s; }
.h4 { top: 42%; right: 2%; font-size: clamp(1.2rem,2.5vw,2rem); --r: 22deg; animation-delay: 3.0s, 3.0s; }
.h5 { bottom:28%; left: 2%; font-size: clamp(.9rem,1.8vw,1.4rem);--r:-14deg;animation-delay: 3.5s, 3.5s; }
.h6 { bottom:30%; right:3%; font-size: clamp(1rem,2vw,1.8rem);  --r: 18deg; animation-delay: 3.7s, 3.7s; }

/* ── mouse sparkles ── */
.sparkle {
  position: fixed;
  pointer-events: none; z-index: 20;
  border-radius: 50%;
  animation: sparkleFade .8s ease forwards;
}
@keyframes sparkleFade {
  0%   { transform: scale(1) translate(0,0);               opacity: 1; }
  100% { transform: scale(0) translate(var(--dx), var(--dy)); opacity: 0; }
}