/* =========================
   ROOT: ВСЕ НАСТРОЙКИ СЦЕНЫ
========================= */
:root {
  --scene-width: 1920px;
  --scene-height: 1080px;

  --bg-width: 1920px;
  --bg-height: 1080px;

  --title-main-top: 10px;
  --title-main-left: 30px;
  --title-main-font-size: 70px;

  --title-sub-offset-top: -10px;
  --title-sub-font-size: 55px;

  --sound-width: 220px;
  --sound-top: 60%;
  --sound-left: 70%;

  --socials-bottom: 40px;
  --socials-right: 40px;
  --socials-gap: 20px;
  --social-icon-size: 75px;

  --flower-size: 220px;

  --cursor-size: 64px;
  --cursor-trail-size: 18px;
}

/* =========================
   BASE
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: var(--scene-width);
  height: var(--scene-height);
  overflow: hidden;
  position: relative;
  cursor: none;
  background: black;
  font-family: "Luckiest Guy", sans-serif;
}

/* =========================
   BACKGROUND
========================= */
.background {
  position: absolute;
  width: var(--bg-width);
  height: var(--bg-height);
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
}

/* =========================
   TITLE BLOCK
========================= */
.title-block {
  position: absolute;
  top: var(--title-main-top);
  left: var(--title-main-left);
  z-index: 10;
}

.title-main {
  font-size: var(--title-main-font-size);
  color: white;
  text-shadow: 4px 4px 0px black;
}

.title-sub {
  margin-top: var(--title-sub-offset-top);
  font-size: var(--title-sub-font-size);
  color: white;
  text-shadow: 4px 4px 0px black;
}

/* =========================
   SOUND BUTTON
========================= */
.sound-btn {
  position: absolute;
  width: var(--sound-width);
  top: var(--sound-top);
  left: var(--sound-left);
  transform: translateX(-50%);
  z-index: 20;
  cursor: none !important;
  transition: transform .2s ease;
}

.sound-btn:hover {
  transform: translateX(-50%) scale(1.1);
}

/* =========================
   SOCIALS
========================= */
.socials {
  position: absolute;
  bottom: var(--socials-bottom);
  right: var(--socials-right);
  display: flex;
  gap: var(--socials-gap);
  z-index: 20;
}

.social-icon {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  cursor: none !important;
  transition: transform .25s ease;
}

.social-icon:hover {
  transform: translateY(-12px) rotate(12deg) scale(1.15);
}

/* =========================
   FALLING FLOWERS
========================= */
.flower {
  position: absolute;
  width: var(--flower-size);
  user-select: none;
  cursor: none !important;
  z-index: 30;
  animation: fall linear forwards;
}

@keyframes fall {
  from { transform: translateY(-200px) rotate(0deg); }
  to   { transform: translateY(1300px) rotate(160deg); }
}

/* =========================
   CUSTOM CURSOR + TRAIL
========================= */
#cursor {
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  background: url("cursor.png") no-repeat center/contain;
  pointer-events: none;
  z-index: 999;
}

.cursor-trail {
  position: fixed;
  width: var(--cursor-trail-size);
  height: var(--cursor-trail-size);
  background: pink;
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
  z-index: 998;
  animation: trailFade .6s forwards;
}

@keyframes trailFade {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 0; transform: scale(2); }
}

/* =========================
   КУРСОР НЕ МЕНЯЕТСЯ НИКОГДА
========================= */
*,
*:hover,
*:active,
*:focus {
  cursor: none !important;
}