* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", Roboto, sans-serif;
  background: #111;
  color: #acacac;

}

img {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 20px);

  background: linear-gradient(-45deg, #2c0000, #5a0000, #3f0000, #1a0000);
  background-size: 400% 400%;
  animation: gradientMove 12s ease infinite;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,0,0,0.22), transparent 70%);
  filter: blur(60px);
  animation: float 16s infinite ease-in-out;
}

.blob:nth-child(1) { top: 10%; left: 10%; }
.blob:nth-child(2) { bottom: 10%; right: 10%; animation-delay: 5s; }
.blob:nth-child(3) { top: 60%; left: 70%; animation-delay: 10s; }

@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(60px,-80px) scale(1.25); }
  100% { transform: translate(0,0) scale(1); }
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  padding: clamp(15px, 4vw, 25px);
  border-radius: 12px;
  backdrop-filter: blur(12px);

  background: linear-gradient(-45deg, #3a0a0a, #5a0a0a, #3f0a0a, #2c0a0a);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite, fadeIn 2s ease, floatBox 6s ease-in-out infinite;

  box-shadow:
    0 12px 50px rgba(255,0,0,0.2),
    0 0 40px rgba(255,0,0,0.15);

  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes floatBox {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

h1 {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  margin-bottom: 12px;
  color: #acacac;
}

.image-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  width: 105%;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(from 0deg, #ff0000, #ff4d4d, #990000, #ff0000);
  filter: blur(6px);
  opacity: 0.85;
  animation: neonRotate 10s linear infinite, neonBreath 3s ease-in-out infinite alternate;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255,0,0,0.5), transparent 70%);
  filter: blur(18px);
  animation: neonPulse 2.5s ease-in-out infinite alternate;
}

.image {
  width: clamp(120px, 40vw, 220px);
  margin: 0;
  display: block;
  opacity: 0.6;
  animation: floatImage 6s ease-in-out infinite,
             pulseImage 3s ease-in-out infinite alternate,
             imageBreath 2.5s ease-in-out infinite alternate;
}

.fade-on-load {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.95);
  transition: opacity 3s ease, filter 3s ease, transform 2s ease;
}

.fade-on-load.loaded {
  opacity: 0.6;
  filter: blur(0);
  transform: scale(1);
}

@keyframes neonRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes neonBreath {
  from { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; }
  to   { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes neonPulse {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0.4; }
  to   { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

@keyframes floatImage {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes pulseImage {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

@keyframes imageBreath {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.5; }
}

p {
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  line-height: 1.5;
  margin: 10px 0;
  color: #a2b0a8;
}

.loader {
  margin: 20px auto;
  width: clamp(30px, 8vw, 40px);
  height: clamp(30px, 8vw, 40px);
  border: 4px solid #4a4a4a;
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

footer {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #acacac;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    filter: blur(16px);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}