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

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-black);
  font-family: var(--font-primary);
  overflow-y: scroll;
  height: 100%;
  position: relative;
}

/* ===== Responsive show/hide ===== */
@media (max-width: 960px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 961px) {
  .mobile-only { display: none !important; }
}

/* ===== Layout ===== */
.container-1920 {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}

.relative { position: relative; }

/* ===== Typography utilities ===== */
.light {
  font-weight: lighter;
  color: var(--color-grey-dark);
}

.black { font-weight: 900; }
.semi-bold { font-weight: 600; }
.bold { font-weight: 700; }

.purple-text { color: var(--color-purple); }
.blue-bg-text { background: var(--color-blue); color: var(--color-white); }

/* ===== Shared blocks ===== */
.block-pink,
.block-black,
.block-purple,
.block-darkblue,
.block-blue {
  position: absolute;
}

.block-purple { background-color: var(--color-purple); }
.block-pink { background-color: var(--color-pink); }
.block-black { background-color: var(--color-black); }
.block-darkblue { background-color: var(--color-darkblue); }
.block-blue { background-color: var(--color-blue); }

.square-40 { width: 40px; height: 40px; }
.square-30 { width: 30px; height: 30px; }

/* ===== Desktop Menu ===== */
.desktop-only .menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding-left: 50px;
  top: 10px;
  position: relative;
  color: var(--color-white);
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 1.5rem;
}

.desktop-only .menu a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.desktop-only .menu div {
  width: auto;
  white-space: nowrap;
}

.desktop-only .menu a:hover div {
  opacity: 0.8;
  transform: translateY(-2px);
  transition: 0.2s ease;
}

/* ===== Animations ===== */
@keyframes blink {
  50% { opacity: 0.2; }
}

.text-blink { animation: blink 1s step-start infinite; }

@keyframes pixel-up-down {
  0%, 10%   { transform: translate(0, 0); }
  20%       { transform: translate(0, 160px); }
  21%, 28%  { transform: translate(0, 135px); }
  35%       { transform: translate(0, 110px); }
  40%       { transform: translate(0, 135px); }
  45%       { transform: translate(0, 120px); }
  50%       { transform: translate(0, 110px); }
  70%       { transform: translate(0, 60px); }
  85%       { transform: translate(0, 30px); }
  100%      { transform: translate(0, 0); }
}

@keyframes pixel-fall {
  0%   { transform: translate(-50%, -50%) translate(-10px, 0) rotate(0deg); }
  10%  { transform: translate(-50%, -50%) translate(-25px, 3px) rotate(-15deg); }
  25%  { transform: translate(-50%, -50%) translate(-30px, 9px) rotate(-45deg); }
  50%  { transform: translate(-50%, -50%) translate(-35px, 20px) rotate(-75deg); }
  60%  { transform: translate(-50%, -50%) translate(-130px, 150px) rotate(-120deg); }
  65%  { transform: translate(-50%, -50%) translate(-180px, 200px) rotate(-150deg); }
  75%  { transform: translate(-50%, -50%) translate(-170px, 200px) rotate(-170deg); }
  100% { transform: translate(-50%, -50%) translate(-180px, 1800px) rotate(360deg); }
}

@keyframes pixel-diagonal-slide {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

::-webkit-scrollbar-corner {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(
    to bottom,
    rgba(232, 244, 251, 0.45),
    rgba(98, 81, 235, 0.45)
  );
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    rgba(232, 244, 251, 0.6),
    rgba(98, 81, 235, 0.7)
  );
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.2);
}