body {
  margin: 0;
  background: black;
  overflow: hidden;
}

.splash-screen {
  width: 100vw;
  height: 100vh;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 1s ease-in;
  padding: 1rem; /* padding to avoid touching edges on small screens */
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 600px;
  height: 600px;
  max-width: 100vw;
  max-height: 100vh;
}

/* Responsive container size for smaller screens */
@media (max-width: 700px) {
  .container {
    width: 90vw;
    height: 90vw; /* keep square ratio */
  }
}

@media (max-width: 400px) {
  .container {
    width: 95vw;
    height: 95vw;
  }
}

.text-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: spinClockwise 30s linear infinite;
  z-index: 2;
}

.triangle {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: spinCounterClockwise 30s linear infinite, pulse 3s ease-in-out infinite;
  z-index: 1;
}

.static {
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  z-index: 0;
  animation: pulse 3s infinite ease-in-out, glitch 2s infinite steps(2, end);
  filter: hue-rotate(10deg) contrast(1.2);
  object-fit: cover;
  opacity: 0.9;
}

/* Adjust static scale for smaller screens */
@media (max-width: 700px) {
  .static {
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
  }
}

@media (max-width: 400px) {
  .static {
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
  }
}

.corner-link {
  position: absolute;
  width: 25%;
  height: 25%;
  z-index: 3;
}

.top-left    { top: 0; left: 0; }
.top-right   { top: 0; right: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right{ bottom: 0; right: 0; }

/* Animations */
@keyframes spinClockwise {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinCounterClockwise {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.03); }
}

@keyframes glitch {
  0%   { filter: hue-rotate(0deg); transform: translate(0, 0); }
  25%  { transform: translate(1px, -1px); }
  50%  { filter: hue-rotate(30deg); transform: translate(-1px, 1px); }
  75%  { transform: translate(1px, 1px); }
  100% { filter: hue-rotate(0deg); transform: translate(0, 0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}