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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(
    175deg,
    #b8d4f0 0%,
    #c9dff5 18%,
    #dce8f5 35%,
    #ecd8c8 62%,
    #f0c9a8 80%,
    #f2bc94 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  cursor: default;
}

/* Vignette overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(100, 60, 20, 0.12) 100%);
  pointer-events: none;
}

/* Floating particles */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 220, 170, 0.9);
  animation: drift var(--dur) var(--delay) ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translateY(0)   translateX(0); }
  to   { transform: translateY(-60px) translateX(var(--dx)); }
}

/* Giraffe wrapper */
.giraffe-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: float 3.2s ease-in-out infinite;
  transform-origin: center bottom;
  z-index: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0)    rotate(-1deg); }
  50%       { transform: translateY(-14px) rotate(1deg); }
}

.giraffe-wrapper:hover {
  animation: float-hovered 3.2s ease-in-out infinite;
}

@keyframes float-hovered {
  0%, 100% { transform: translateY(-8px)  rotate(0.5deg) scale(1.04); }
  50%       { transform: translateY(-20px) rotate(1.5deg) scale(1.04); }
}

/* Glow */
.glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,120,0.45) 0%, rgba(255,180,90,0.18) 50%, transparent 75%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0.7;
  pointer-events: none;
}

.giraffe-wrapper:hover .glow {
  opacity: 1;
  transform: scale(1.35);
}

/* Image stack */
.giraffe-img-stack {
  position: relative;
  width: clamp(260px, 38vmin, 420px);
  aspect-ratio: 1536 / 2752;
  filter: drop-shadow(0 18px 40px rgba(160,100,40,0.22)) drop-shadow(0 4px 12px rgba(160,100,40,0.14));
}

.giraffe-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.18s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.giraffe-img.normal { opacity: 1; }
.giraffe-img.wink   { opacity: 0; }

.giraffe-wrapper:hover .giraffe-img.normal { opacity: 0; }
.giraffe-wrapper:hover .giraffe-img.wink   { opacity: 1; }