/* ================================
 * 2025 DESIGN: Floating Treat Bowl
 * Everything prefixed with css2025_design_
 * ================================ */

.css2025_design_treats-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #ffe8d6 0, #f6bd60 35%, #e76f51 100%);
  overflow: hidden;
}

/* Scene wrapper (to scale nicely inside the door) */
.css2025_design_treats-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.55) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_treats-scene {
    transform: scale(0.7) translateY(-0.5rem);
  }
}

/* Bowl base */
.css2025_design_bowl {
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  width: 8rem;
  height: 3rem;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0, #e0fbfc 0, #48cae4 40%, #0077b6 100%);
  border-radius: 50%;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.35);
}

.css2025_design_bowl::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  width: 7rem;
  height: 2.4rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 10%, #ffffff 0, #caf0f8 40%, #0096c7 100%);
}

/* Paw icon on bowl */
.css2025_design_bowl-inner {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 2.2rem;
  height: 2rem;
  transform: translateX(-50%);
}

/* Paw – main pad */
.css2025_design_bowl-inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1.3rem;
  height: 1.1rem;
  transform: translateX(-50%);
  background: #ffe8d6;
  border-radius: 60% 60% 50% 50%;
}

/* Paw – toes */
.css2025_design_bowl-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.8rem;
  height: 0.8rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, #ffe8d6 52%, transparent 53%) 0 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle, #ffe8d6 52%, transparent 53%) 50% 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle, #ffe8d6 52%, transparent 53%) 100% 0 / 0.6rem 0.6rem no-repeat;
}

/* Floating dog bone */
.css2025_design_bone {
  position: absolute;
  top: 2.3rem;
  left: 1.4rem;
  width: 4.4rem;
  height: 1.6rem;
  background: linear-gradient(to bottom, #fce8c8 0, #f5d0a0 100%);
  border-radius: 1rem;
  box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.25);
  animation: css2025_design_floatY 2.2s ease-in-out infinite alternate;
}

.css2025_design_bone::before,
.css2025_design_bone::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: linear-gradient(to bottom, #fce8c8 0, #f5d0a0 100%);
  border-radius: 50%;
  transform: translateY(-50%);
}

.css2025_design_bone::before {
  left: -0.7rem;
}

.css2025_design_bone::after {
  right: -0.7rem;
}

/* Floating fish treat */
.css2025_design_fish {
  position: absolute;
  top: 3.3rem;
  right: 1.2rem;
  width: 3.2rem;
  height: 1.8rem;
  background: linear-gradient(135deg, #f4a261 0, #e76f51 100%);
  border-radius: 1rem 1rem 1rem 0.4rem;
  transform-origin: center;
  box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.25);
  animation: css2025_design_floatY 2.1s ease-in-out infinite alternate-reverse,
             css2025_design_sway 3.4s ease-in-out infinite;
}

/* Fish tail */
.css2025_design_fish::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.15rem;
  width: 1.2rem;
  height: 1.5rem;
  background: linear-gradient(135deg, #e76f51 0, #f4a261 100%);
  border-radius: 0.4rem 0.4rem 0.4rem 1.2rem;
}

/* Fish eye */
.css2025_design_fish::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 0.55rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #2f2f2f;
}

/* Small sparkles */
.css2025_design_sparkle {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  background: radial-gradient(circle, #ffffff 0, #ffe8d6 45%, transparent 60%);
  border-radius: 50%;
  opacity: 0.2;
  animation: css2025_design_twinkle 2s ease-in-out infinite;
}

.css2025_design_sparkle--1 {
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
}

.css2025_design_sparkle--2 {
  top: 0.8rem;
  left: 1.1rem;
  animation-delay: 0.5s;
}

.css2025_design_sparkle--3 {
  top: 0.6rem;
  right: 0.8rem;
  animation-delay: 1s;
}

/* Float animation (used by bone + fish) */
@keyframes css2025_design_floatY {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0.6rem);
  }
}

/* Gentle rotation for fish */
@keyframes css2025_design_sway {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

/* Sparkle twinkle */
@keyframes css2025_design_twinkle {
  0% {
    opacity: 0.05;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0.15;
    transform: scale(0.7);
  }
}


/* =======================================
 * 2025 DESIGN: Magic Pet Gift Box
 * ======================================= */

.css2025_design_gift-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, #fff3e6 0, #f7cad0 35%, #f28482 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_gift-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.6) translateY(-0.4rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_gift-scene {
    transform: scale(0.8) translateY(-0.4rem);
  }
}

/* Glowing aura behind the box */
.css2025_design_gift-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 60%);
  filter: blur(2px);
  opacity: 0.8;
  animation: css2025_design_glowPulse 1.8s ease-in-out infinite;
}

/* Gift box base */
.css2025_design_gift-box {
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  width: 7rem;
  height: 4rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ff9f1c 0, #ff6b35 100%);
  border-radius: 0.6rem 0.6rem 0.8rem 0.8rem;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.35);
}

/* Vertical ribbon */
.css2025_design_gift-ribbon-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.1rem;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe66d 0, #ffd166 100%);
}

/* Horizontal ribbon */
.css2025_design_gift-ribbon-horizontal {
  position: absolute;
  top: 1.8rem;
  left: 0;
  width: 100%;
  height: 0.9rem;
  background: linear-gradient(180deg, #ffe66d 0, #ffd166 100%);
}

/* Paw icon on the front of the box */
.css2025_design_gift-paw {
  position: absolute;
  top: 1.3rem;
  left: 50%;
  width: 2.4rem;
  height: 2.2rem;
  transform: translateX(-50%);
}

/* Main pad */
.css2025_design_gift-paw::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1.4rem;
  height: 1.2rem;
  transform: translateX(-50%);
  background: #fff3e6;
  border-radius: 60% 60% 50% 50%;
}

/* Toes */
.css2025_design_gift-paw::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2rem;
  height: 0.9rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, #fff3e6 52%, transparent 53%) 0 0 / 0.65rem 0.65rem no-repeat,
    radial-gradient(circle, #fff3e6 52%, transparent 53%) 50% 0 / 0.65rem 0.65rem no-repeat,
    radial-gradient(circle, #fff3e6 52%, transparent 53%) 100% 0 / 0.65rem 0.65rem no-repeat;
}

/* Box lid */
.css2025_design_gift-lid {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  width: 7.4rem;
  height: 1.8rem;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-6deg);
  background: linear-gradient(180deg, #ff9f1c 0, #ff6b35 100%);
  border-radius: 0.8rem 0.8rem 0.4rem 0.4rem;
  box-shadow: 0 0.35rem 0.7rem rgba(0, 0, 0, 0.35);
  animation: css2025_design_lidFloat 1.9s ease-in-out infinite alternate;
}

/* Lid ribbon stripe */
.css2025_design_gift-lid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.1rem;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe66d 0, #ffd166 100%);
}

/* Simple ribbon bow */
.css2025_design_gift-bow {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  width: 3.4rem;
  height: 1.6rem;
  transform: translateX(-50%);
}

.css2025_design_gift-bow::before,
.css2025_design_gift-bow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.7rem;
  height: 1.2rem;
  background: linear-gradient(135deg, #ffe66d 0, #ffd166 100%);
  border-radius: 50% 50% 40% 40%;
}

.css2025_design_gift-bow::before {
  left: 0;
  transform: rotate(-15deg);
}

.css2025_design_gift-bow::after {
  right: 0;
  transform: rotate(15deg);
}

/* Light rays from the box */
.css2025_design_gift-rays {
  position: absolute;
  bottom: 3.6rem;
  left: 50%;
  width: 8rem;
  height: 4rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.9) 0, transparent 60%) 50% 0 / 4rem 4rem no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.8) 0, transparent 60%) 0 80% / 3rem 3rem no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.7) 0, transparent 60%) 100% 80% / 3rem 3rem no-repeat;
  opacity: 0.8;
  animation: css2025_design_raysPulse 1.6s ease-in-out infinite alternate;
}

/* Tiny floating shapes (little paw/heart particles vibe) */
.css2025_design_gift-particle {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  background: radial-gradient(circle, #ffffff 0, #ffe6f0 40%, transparent 60%);
  border-radius: 50%;
  opacity: 0.2;
  animation: css2025_design_particleFloat 2.3s ease-in-out infinite;
}

.css2025_design_gift-particle--1 {
  bottom: 5.4rem;
  left: 1.2rem;
  animation-delay: 0.1s;
}

.css2025_design_gift-particle--2 {
  bottom: 6.2rem;
  right: 1.1rem;
  animation-delay: 0.5s;
}

.css2025_design_gift-particle--3 {
  bottom: 7rem;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.9s;
}

/* Animations */
@keyframes css2025_design_glowPulse {
  0% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

@keyframes css2025_design_lidFloat {
  0% {
    transform: translateX(-50%) rotate(-2deg);
  }
  100% {
    transform: translateX(-50%) rotate(-10deg);
  }
}

@keyframes css2025_design_raysPulse {
  0% {
    opacity: 0.4;
    transform: translateX(-50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes css2025_design_particleFloat {
  0% {
    opacity: 0.1;
    transform: translateY(0) scale(0.7);
  }
  100% {
    opacity: 0.7;
    transform: translateY(-0.8rem) scale(1);
  }
}



/* =======================================
 * 2025 DESIGN: Pet Snow Globe
 * ======================================= */

.css2025_design_globe-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, #e0f7ff 0, #b5e2ff 40%, #4f6d7a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_globe-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.6) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_globe-scene {
    transform: scale(0.8) translateY(-0.5rem);
  }
}

/* Globe outer shell */
.css2025_design_globe {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  width: 7rem;
  height: 7rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 10%, rgba(255,255,255,0.8) 0, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 55%),
              radial-gradient(circle at 50% 70%, #ffffff 0, #cfe8ff 45%, #93c5fd 75%, #4f6d7a 100%);
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Inner snow ground */
.css2025_design_globe-ground {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  width: 7.4rem;
  height: 3.4rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 20%, #ffffff 0, #e5f3ff 40%, #cbd5e1 100%);
}

/* Dog silhouette */
.css2025_design_globe-dog {
  position: absolute;
  bottom: 1.5rem;
  left: 1.2rem;
  width: 2.4rem;
  height: 2.1rem;
  background: #1f2933;
  border-radius: 40% 60% 45% 55%;
}

/* Dog head */
.css2025_design_globe-dog::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  right: 0.1rem;
  width: 1.4rem;
  height: 1.3rem;
  background: #1f2933;
  border-radius: 60% 50% 50% 40%;
}

/* Dog ear */
.css2025_design_globe-dog::after {
  content: "";
  position: absolute;
  top: -1.1rem;
  right: 0.9rem;
  width: 0.8rem;
  height: 1.1rem;
  background: #111827;
  border-radius: 60% 60% 30% 30%;
}

/* Cat silhouette */
.css2025_design_globe-cat {
  position: absolute;
  bottom: 1.6rem;
  right: 1.3rem;
  width: 1.9rem;
  height: 2rem;
  background: #111827;
  border-radius: 45% 55% 45% 55%;
}

/* Cat head + ears */
.css2025_design_globe-cat::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  background: #111827;
  border-radius: 50%;
  box-shadow:
    -0.1rem -0.5rem 0 0 #111827,
     0.9rem -0.5rem 0 0 #111827;
}

/* Cat tail */
.css2025_design_globe-cat::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  right: -0.6rem;
  width: 0.9rem;
  height: 1.8rem;
  border-radius: 1rem;
  border: 0.25rem solid #111827;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

/* Snowflakes */
.css2025_design_globe-snowflake {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.85;
  animation: css2025_design_snowFall 4s linear infinite;
}

/* different starting points */
.css2025_design_globe-snowflake--1 { top: -0.5rem; left: 20%; animation-delay: 0s; }
.css2025_design_globe-snowflake--2 { top: -0.8rem; left: 40%; animation-delay: 0.7s; }
.css2025_design_globe-snowflake--3 { top: -0.4rem; left: 60%; animation-delay: 1.3s; }
.css2025_design_globe-snowflake--4 { top: -0.9rem; left: 30%; animation-delay: 1.8s; }
.css2025_design_globe-snowflake--5 { top: -0.6rem; left: 70%; animation-delay: 2.4s; }

/* Globe base */
.css2025_design_globe-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 6.2rem;
  height: 2.4rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #374151 0, #111827 100%);
  border-radius: 0.9rem 0.9rem 0.4rem 0.4rem;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.5);
}

/* Base highlight stripe */
.css2025_design_globe-base::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  height: 0.4rem;
  border-radius: 0.4rem;
  background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
}

/* Base plaque (to look like a name plate) */
.css2025_design_globe-plaque {
  position: absolute;
  top: 1.3rem;
  left: 50%;
  width: 3.6rem;
  height: 0.9rem;
  transform: translateX(-50%);
  border-radius: 0.4rem;
  background: linear-gradient(180deg, #fbbf24 0, #d97706 100%);
}

/* Tiny paw on plaque */
.css2025_design_globe-plaque::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 50%;
  width: 1.2rem;
  height: 0.8rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, #fff7ed 52%, transparent 53%) 0 0 / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, #fff7ed 52%, transparent 53%) 50% 0 / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, #fff7ed 52%, transparent 53%) 100% 0 / 0.35rem 0.35rem no-repeat,
    radial-gradient(ellipse, #fff7ed 52%, transparent 53%) 50% 70% / 0.6rem 0.45rem no-repeat;
}

/* Subtle bob of the globe */
.css2025_design_globe-rock {
  position: absolute;
  inset: 0;
  animation: css2025_design_globeBob 3.4s ease-in-out infinite;
}

/* Animations */
@keyframes css2025_design_snowFall {
  0% {
    transform: translateY(0);
    opacity: 0.9;
  }
  90% {
    transform: translateY(5.5rem);
    opacity: 0.9;
  }
  100% {
    transform: translateY(5.5rem);
    opacity: 0;
  }
}

@keyframes css2025_design_globeBob {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.25rem) rotate(-1.5deg);
  }
  100% {
    transform: translateY(0.1rem) rotate(1deg);
  }
}


/* =======================================
 * 2025 DESIGN: Happy Dog with Wagging Tail
 * ======================================= */

.css2025_design_dog-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #fef3c7 0, #fde68a 35%, #bfdbfe 80%, #e0f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_dog-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.6) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_dog-scene {
    transform: scale(0.8) translateY(-0.5rem);
  }
}

/* Ground */
.css2025_design_dog-ground {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9rem;
  height: 3.2rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0, #bbf7d0 0, #4ade80 40%, #16a34a 100%);
}

/* Dog body */
.css2025_design_dog-body {
  position: absolute;
  bottom: 2.4rem;
  left: 1.1rem;
  width: 4.5rem;
  height: 2.6rem;
  background: #fbbf77;
  border-radius: 60% 60% 45% 45%;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.25);
}

/* Dog head */
.css2025_design_dog-head {
  position: absolute;
  top: -1.6rem;
  right: -0.7rem;
  width: 2.5rem;
  height: 2.4rem;
  background: #fbbf77;
  border-radius: 60% 60% 55% 55%;
}

/* Dog ear */
.css2025_design_dog-ear {
  position: absolute;
  top: -0.7rem;
  left: 0.1rem;
  width: 1.1rem;
  height: 1.6rem;
  background: #ea9b4a;
  border-radius: 60% 30% 50% 40%;
}

/* Dog nose + snout */
.css2025_design_dog-snout {
  position: absolute;
  bottom: 0.3rem;
  right: -0.2rem;
  width: 1.4rem;
  height: 1rem;
  background: #fed7aa;
  border-radius: 60% 40% 60% 40%;
}

.css2025_design_dog-snout::before {
  content: "";
  position: absolute;
  top: 0.05rem;
  right: 0.1rem;
  width: 0.45rem;
  height: 0.35rem;
  background: #111827;
  border-radius: 40% 40% 60% 60%;
}

/* Eye */
.css2025_design_dog-eye {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 0.28rem;
  height: 0.28rem;
  background: #111827;
  border-radius: 50%;
}

/* Scarf */
.css2025_design_dog-scarf {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  width: 2rem;
  height: 1.2rem;
  background: linear-gradient(90deg, #ef4444 0, #f97316 50%, #ef4444 100%);
  border-radius: 0.8rem 0.8rem 0.4rem 0.4rem;
}

.css2025_design_dog-scarf::before {
  content: "";
  position: absolute;
  bottom: -0.8rem;
  left: 0.5rem;
  width: 0.7rem;
  height: 1.2rem;
  background: linear-gradient(180deg, #f97316 0, #ef4444 100%);
  border-radius: 0.4rem 0.4rem 0.8rem 0.8rem;
}

/* Tail */
.css2025_design_dog-tail {
  position: absolute;
  top: 0.3rem;
  left: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0.35rem solid #fbbf77;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform-origin: 100% 100%;
  animation: css2025_design_tailWag 0.5s ease-in-out infinite alternate;
}

/* Front legs */
.css2025_design_dog-leg {
  position: absolute;
  bottom: -0.8rem;
  width: 0.7rem;
  height: 1.1rem;
  background: #fbbf77;
  border-radius: 0.4rem;
}

.css2025_design_dog-leg--1 {
  left: 0.7rem;
}

.css2025_design_dog-leg--2 {
  left: 1.8rem;
}

/* Little heart above */
.css2025_design_dog-heart {
  position: absolute;
  top: 2.1rem;
  right: 1.4rem;
  width: 1rem;
  height: 1rem;
  transform: rotate(-10deg);
  animation: css2025_design_heartPop 1.8s ease-in-out infinite;
}

.css2025_design_dog-heart::before,
.css2025_design_dog-heart::after {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.9rem;
  background: #fb7185;
  border-radius: 0.6rem 0.6rem 0.4rem 0.4rem;
}

.css2025_design_dog-heart::before {
  left: 0;
  transform: rotate(-45deg);
}

.css2025_design_dog-heart::after {
  right: 0;
  transform: rotate(45deg);
}

/* Animations */
@keyframes css2025_design_tailWag {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

@keyframes css2025_design_heartPop {
  0% {
    opacity: 0;
    transform: translateY(0.3rem) scale(0.7) rotate(-10deg);
  }
  40% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.6rem) scale(0.85) rotate(-10deg);
  }
}



/* =======================================
 * 2025 DESIGN: Playful Cat with Yarn
 * ======================================= */

.css2025_design_cat-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #fee2e2 0, #fecaca 30%, #fef9c3 70%, #e0f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_cat-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.6) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_cat-scene {
    transform: scale(0.8) translateY(-0.5rem);
  }
}

/* Soft rug */
.css2025_design_cat-rug {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  width: 8rem;
  height: 2.8rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fde68a 0, #fbbf24 45%, #b45309 100%);
}

/* Cat body */
.css2025_design_cat-body {
  position: absolute;
  bottom: 2.3rem;
  left: 1.3rem;
  width: 4.3rem;
  height: 2.4rem;
  background: #4b5563;
  border-radius: 60% 50% 55% 45%;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.25);
}

/* Cat head */
.css2025_design_cat-head {
  position: absolute;
  top: -1.5rem;
  right: -0.5rem;
  width: 2.1rem;
  height: 2rem;
  background: #4b5563;
  border-radius: 60% 60% 50% 50%;
}

/* Cat ears */
.css2025_design_cat-ear {
  position: absolute;
  width: 0.7rem;
  height: 0.9rem;
  background: #374151;
  border-radius: 60% 60% 0 0;
}

.css2025_design_cat-ear--left {
  top: -0.7rem;
  left: 0.1rem;
  transform: rotate(-8deg);
}

.css2025_design_cat-ear--right {
  top: -0.7rem;
  right: 0.1rem;
  transform: rotate(8deg);
}

/* Cat face */
.css2025_design_cat-eye {
  position: absolute;
  top: 0.7rem;
  width: 0.32rem;
  height: 0.32rem;
  background: #f9fafb;
  border-radius: 50%;
}

.css2025_design_cat-eye::before {
  content: "";
  position: absolute;
  inset: 0.08rem;
  background: #111827;
  border-radius: 50%;
}

.css2025_design_cat-eye--left {
  left: 0.6rem;
}

.css2025_design_cat-eye--right {
  right: 0.6rem;
}

.css2025_design_cat-nose {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 0.32rem;
  height: 0.24rem;
  transform: translateX(-50%);
  background: #f97373;
  border-radius: 40% 40% 60% 60%;
}

.css2025_design_cat-mouth {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  width: 0.9rem;
  height: 0.7rem;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  border-bottom: 0.12rem solid #111827;
}

/* Whiskers */
.css2025_design_cat-whisker {
  position: absolute;
  top: 1.15rem;
  width: 1rem;
  height: 0.04rem;
  background: #e5e7eb;
}

.css2025_design_cat-whisker--left-1 {
  left: -0.9rem;
}

.css2025_design_cat-whisker--left-2 {
  left: -0.9rem;
  top: 1.35rem;
}

.css2025_design_cat-whisker--right-1 {
  right: -0.9rem;
}

.css2025_design_cat-whisker--right-2 {
  right: -0.9rem;
  top: 1.35rem;
}

/* Cat front paw reaching for yarn */
.css2025_design_cat-paw {
  position: absolute;
  bottom: -0.7rem;
  right: 0.4rem;
  width: 1.2rem;
  height: 1.1rem;
  background: #4b5563;
  border-radius: 0.9rem;
  transform-origin: top left;
  animation: css2025_design_pawReach 1.4s ease-in-out infinite alternate;
}

.css2025_design_cat-paw::before {
  content: "";
  position: absolute;
  bottom: 0.1rem;
  left: 0.15rem;
  width: 0.8rem;
  height: 0.4rem;
  background: #374151;
  border-radius: 1rem;
}

/* Tail */
.css2025_design_cat-tail {
  position: absolute;
  bottom: 2.8rem;
  right: -0.5rem;
  width: 2rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 0.35rem solid #4b5563;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform-origin: 0% 100%;
  animation: css2025_design_tailSway 2.2s ease-in-out infinite;
}

/* Yarn ball */
.css2025_design_yarn-ball {
  position: absolute;
  bottom: 2.1rem;
  right: 1.1rem;
  width: 1.8rem;
  height: 1.8rem;
  background: radial-gradient(circle at 30% 30%, #fee2e2 0, #fb7185 40%, #be123c 100%);
  border-radius: 50%;
  box-shadow: 0 0.18rem 0.3rem rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: css2025_design_yarnBounce 1.4s ease-in-out infinite alternate;
}

/* Yarn lines */
.css2025_design_yarn-ball::before,
.css2025_design_yarn-ball::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      120deg,
      rgba(254, 242, 242, 0.9),
      rgba(254, 242, 242, 0.9) 1px,
      transparent 2px,
      transparent 4px
    );
  opacity: 0.5;
}

.css2025_design_yarn-tail {
  position: absolute;
  bottom: 2.45rem;
  right: 2rem;
  width: 2.3rem;
  height: 1.4rem;
  border-radius: 1.4rem;
  border: 0.14rem solid #fb7185;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(10deg);
}

/* Animations */
@keyframes css2025_design_pawReach {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

@keyframes css2025_design_tailSway {
  0% {
    transform: rotate(12deg);
  }
  50% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes css2025_design_yarnBounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0.4rem);
  }
}

/* =======================================
 * 2025 DESIGN: Cuddling Pets on Bed
 * ======================================= */

.css2025_design_bed-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, #e0f2fe 0, #bfdbfe 40%, #c4b5fd 75%, #6d28d9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_bed-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.6) translateY(-0.3rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_bed-scene {
    transform: scale(0.8) translateY(-0.3rem);
  }
}

/* Bed base */
.css2025_design_pet-bed {
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  width: 8.2rem;
  height: 3.2rem;
  transform: translateX(-50%);
  border-radius: 2rem;
  background: linear-gradient(180deg, #f97316 0, #ea580c 100%);
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4);
}

/* Bed inner cushion */
.css2025_design_pet-bed::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border-radius: 2rem;
  background: radial-gradient(circle at 50% 0, #fed7aa 0, #fdba74 40%, #f97316 100%);
}

/* Little paw logo on front */
.css2025_design_pet-bed-logo {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  width: 2.4rem;
  height: 1.1rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.css2025_design_pet-bed-logo::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 50%;
  width: 1.4rem;
  height: 0.95rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, #fed7aa 52%, transparent 53%) 0 0 / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, #fed7aa 52%, transparent 53%) 50% 0 / 0.35rem 0.35rem no-repeat,
    radial-gradient(circle, #fed7aa 52%, transparent 53%) 100% 0 / 0.35rem 0.35rem no-repeat,
    radial-gradient(ellipse, #fed7aa 52%, transparent 53%) 50% 70% / 0.65rem 0.45rem no-repeat;
}

/* Shared "blanket" shape that moves with breathing */
.css2025_design_pet-blanket {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  width: 6.5rem;
  height: 2.7rem;
  transform: translateX(-50%);
  border-radius: 2rem;
  background: linear-gradient(130deg, #22c55e 0, #16a34a 45%, #15803d 100%);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  animation: css2025_design_breathe 3s ease-in-out infinite;
}

/* Dog body under blanket */
.css2025_design_bed-dog {
  position: absolute;
  bottom: 2.1rem;
  left: 1.2rem;
  width: 3.3rem;
  height: 2rem;
  background: #fbbf77;
  border-radius: 60% 55% 45% 45%;
}

/* Dog head on pillow */
.css2025_design_bed-dog-head {
  position: absolute;
  top: -1.2rem;
  left: 0.4rem;
  width: 2rem;
  height: 1.8rem;
  background: #fbbf77;
  border-radius: 60% 60% 55% 50%;
}

/* Dog ear folded down */
.css2025_design_bed-dog-ear {
  position: absolute;
  top: -0.4rem;
  left: 0.1rem;
  width: 0.9rem;
  height: 1.1rem;
  background: #ea9b4a;
  border-radius: 60% 30% 50% 40%;
}

/* Dog eye closed */
.css2025_design_bed-dog-eye {
  position: absolute;
  top: 0.7rem;
  left: 0.9rem;
  width: 0.7rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #7c2d12;
}

/* Cat body under blanket */
.css2025_design_bed-cat {
  position: absolute;
  bottom: 2.2rem;
  right: 1.2rem;
  width: 3rem;
  height: 1.8rem;
  background: #4b5563;
  border-radius: 70% 60% 45% 50%;
}

/* Cat head on pillow */
.css2025_design_bed-cat-head {
  position: absolute;
  top: -1.1rem;
  right: 0.2rem;
  width: 1.8rem;
  height: 1.7rem;
  background: #4b5563;
  border-radius: 60% 60% 50% 50%;
}

/* Cat ears */
.css2025_design_bed-cat-ear {
  position: absolute;
  width: 0.7rem;
  height: 0.9rem;
  background: #374151;
  border-radius: 60% 60% 0 0;
}

.css2025_design_bed-cat-ear--left {
  top: -0.6rem;
  left: 0.2rem;
}

.css2025_design_bed-cat-ear--right {
  top: -0.6rem;
  right: 0.1rem;
}

/* Cat closed eyes */
.css2025_design_bed-cat-eye {
  position: absolute;
  top: 0.7rem;
  width: 0.6rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #e5e7eb;
}

.css2025_design_bed-cat-eye--left {
  left: 0.4rem;
}

.css2025_design_bed-cat-eye--right {
  right: 0.4rem;
}

/* Little pillow behind heads */
.css2025_design_pet-pillow {
  position: absolute;
  bottom: 2.9rem;
  left: 50%;
  width: 5.4rem;
  height: 1.8rem;
  transform: translateX(-50%);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, #f9a8d4 0, #ec4899 100%);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.35);
}

/* Small zZz above */
.css2025_design_sleep-z {
  position: absolute;
  top: 1.6rem;
  right: 1.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f9fafb;
  text-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.4);
  animation: css2025_design_zFloat 2.2s ease-in-out infinite;
}

/* Animations */
@keyframes css2025_design_breathe {
  0% {
    transform: translateX(-50%) translateY(0) scaleY(1);
  }
  50% {
    transform: translateX(-50%) translateY(-0.2rem) scaleY(1.04);
  }
  100% {
    transform: translateX(-50%) translateY(0) scaleY(1);
  }
}

@keyframes css2025_design_zFloat {
  0% {
    opacity: 0;
    transform: translateY(0.4rem) scale(0.8);
  }
  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.85);
  }
}



/* =======================================
 * 2025 DESIGN: Winter Night Christmas Tree
 * ======================================= */

.css2025_design_tree-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, #0f172a 0, #020617 50%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* subtle vignette */
.css2025_design_tree-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

.css2025_design_tree-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.65) translateY(-0.6rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_tree-scene {
    transform: scale(0.85) translateY(-0.6rem);
  }
}

/* ground / snow base */
.css2025_design_tree-ground {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10rem;
  height: 3.2rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0, #e5f3ff 0, #cbd5f5 45%, #64748b 100%);
}

/* tree trunk */
.css2025_design_tree-trunk {
  position: absolute;
  bottom: 2.3rem;
  left: 50%;
  width: 0.9rem;
  height: 1.6rem;
  transform: translateX(-50%);
  background: #4b2e19;
  border-radius: 0.4rem;
  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.45);
}

/* tree main shape (layers) */
.css2025_design_tree {
  position: absolute;
  bottom: 3.1rem;
  left: 50%;
  width: 7rem;
  height: 7rem;
  transform: translateX(-50%);
}

/* layered triangles for tree */
.css2025_design_tree-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}

.css2025_design_tree-layer--1 {
  bottom: 0.1rem;
  border-width: 0 2.8rem 2.1rem 2.8rem;
  border-bottom-color: #064e3b;
}

.css2025_design_tree-layer--2 {
  bottom: 1.8rem;
  border-width: 0 2.4rem 2rem 2.4rem;
  border-bottom-color: #047857;
}

.css2025_design_tree-layer--3 {
  bottom: 3.4rem;
  border-width: 0 2rem 1.8rem 2rem;
  border-bottom-color: #22c55e;
}

.css2025_design_tree-layer--4 {
  bottom: 5rem;
  border-width: 0 1.6rem 1.6rem 1.6rem;
  border-bottom-color: #4ade80;
}

/* star on top */
.css2025_design_tree-star {
  position: absolute;
  bottom: 6.9rem;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  transform: translateX(-50%) rotate(18deg);
  color: #facc15;
  filter: drop-shadow(0 0 0.2rem rgba(250, 204, 21, 0.9));
}

.css2025_design_tree-star::before,
.css2025_design_tree-star::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fbbf24 0, #facc15 50%, #f97316 100%);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.css2025_design_tree-star::after {
  transform: scale(0.7);
  filter: brightness(1.3);
}

/* lights as small glowing circles on layers */
.css2025_design_tree-light {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3 0, #facc15 40%, rgba(250, 204, 21, 0) 100%);
  box-shadow:
    0 0 0.25rem rgba(250, 250, 150, 0.8),
    0 0 0.45rem rgba(250, 250, 150, 0.7);
  animation: css2025_design_treeLightPulse 1.8s ease-in-out infinite;
}

/* place lights */
.css2025_design_tree-light--1 { bottom: 2.1rem; left: 32%; animation-delay: 0s; }
.css2025_design_tree-light--2 { bottom: 2.2rem; left: 52%; animation-delay: 0.4s; }
.css2025_design_tree-light--3 { bottom: 2.3rem; left: 70%; animation-delay: 0.9s; }

.css2025_design_tree-light--4 { bottom: 3.8rem; left: 28%; animation-delay: 0.3s; }
.css2025_design_tree-light--5 { bottom: 4.1rem; left: 50%; animation-delay: 0.7s; }
.css2025_design_tree-light--6 { bottom: 4rem; left: 72%; animation-delay: 1.1s; }

.css2025_design_tree-light--7 { bottom: 5.6rem; left: 34%; animation-delay: 0.2s; }
.css2025_design_tree-light--8 { bottom: 5.9rem; left: 64%; animation-delay: 0.8s; }

/* background stars */
.css2025_design_tree-star-dot {
  position: absolute;
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background: #e5f3ff;
  opacity: 0.7;
  animation: css2025_design_starTwinkle 2.2s ease-in-out infinite;
}

.css2025_design_tree-star-dot--1 { top: 0.8rem; left: 20%; animation-delay: 0.1s; }
.css2025_design_tree-star-dot--2 { top: 1.4rem; left: 45%; animation-delay: 0.7s; }
.css2025_design_tree-star-dot--3 { top: 0.9rem; left: 68%; animation-delay: 1.4s; }
.css2025_design_tree-star-dot--4 { top: 2rem; left: 30%; animation-delay: 1.9s; }
.css2025_design_tree-star-dot--5 { top: 1.8rem; left: 80%; animation-delay: 0.3s; }

/* snowflakes */
.css2025_design_tree-snowflake {
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.9;
  animation: css2025_design_treeSnow 4.2s linear infinite;
}

.css2025_design_tree-snowflake--1 { top: -1rem; left: 15%; animation-delay: 0s; }
.css2025_design_tree-snowflake--2 { top: -1.3rem; left: 35%; animation-delay: 0.6s; }
.css2025_design_tree-snowflake--3 { top: -0.8rem; left: 55%; animation-delay: 1.1s; }
.css2025_design_tree-snowflake--4 { top: -1.1rem; left: 75%; animation-delay: 1.7s; }
.css2025_design_tree-snowflake--5 { top: -0.7rem; left: 90%; animation-delay: 2.3s; }

/* Animations */
@keyframes css2025_design_treeLightPulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes css2025_design_starTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes css2025_design_treeSnow {
  0% {
    transform: translateY(0);
    opacity: 0.9;
  }
  90% {
    transform: translateY(6rem);
    opacity: 0.9;
  }
  100% {
    transform: translateY(6rem);
    opacity: 0;
  }
}


/* =======================================
 * 2025 DESIGN: Santa Over the Moon
 * ======================================= */

.css2025_design_santa-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_santa-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.68) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_santa-scene {
    transform: scale(0.9) translateY(-0.5rem);
  }
}

/* horizon silhouette */
.css2025_design_santa-hills {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12rem;
  height: 4rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 0 100%, #020617 0, #020617 55%, transparent 56%) 0 0 / 6rem 4rem no-repeat,
    radial-gradient(circle at 100% 100%, #020617 0, #020617 55%, transparent 56%) 6rem 0 / 6rem 4rem no-repeat;
}

/* moon */
.css2025_design_santa-moon {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 6.6rem;
  height: 6.6rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0.3) 45%, rgba(255,255,255,0.05) 70%),
    radial-gradient(circle at 60% 70%, #e5e7eb 0, #cbd5f5 40%, #94a3b8 90%);
  box-shadow:
    0 0 0.6rem rgba(248, 250, 252, 0.9),
    0 0 1.6rem rgba(248, 250, 252, 0.7);
  overflow: hidden;
}

/* moon craters */
.css2025_design_santa-crater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e5e7eb 0, #cbd5f5 45%, #9ca3af 100%);
  opacity: 0.45;
}

.css2025_design_santa-crater--1 { width: 1.4rem; height: 1.4rem; top: 1rem; left: 0.8rem; }
.css2025_design_santa-crater--2 { width: 1rem; height: 1rem; top: 2.8rem; right: 1rem; }
.css2025_design_santa-crater--3 { width: 0.8rem; height: 0.8rem; top: 3.7rem; left: 2.2rem; }

/* santa + sleigh silhouette track wrapper */
.css2025_design_santa-track {
  position: absolute;
  top: 3.1rem;
  left: 0;
  width: 100%;
  height: 3rem;
  overflow: visible;
}

/* the silhouette group moves horizontally */
.css2025_design_santa-silhouette {
  position: absolute;
  top: 0.6rem;
  left: -4rem;
  width: 8rem;
  height: 2.6rem;
  animation: css2025_design_santaFly 5.5s linear infinite;
}

/* sleigh body */
.css2025_design_santa-sleigh {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 3.4rem;
  height: 1.4rem;
  background: #020617;
  border-radius: 0.4rem 1.3rem 1rem 0.4rem;
}

/* sleigh runners */
.css2025_design_santa-sleigh::before,
.css2025_design_santa-sleigh::after {
  content: "";
  position: absolute;
  bottom: -0.35rem;
  height: 0.2rem;
  border-radius: 999px;
  background: #020617;
}

.css2025_design_santa-sleigh::before {
  left: 0.1rem;
  right: 1.4rem;
}

.css2025_design_santa-sleigh::after {
  left: 1rem;
  right: 0.1rem;
}

/* santa "body" + hat as simple shapes */
.css2025_design_santa-rider {
  position: absolute;
  bottom: 1rem;
  left: 0.6rem;
  width: 1.3rem;
  height: 1.3rem;
  background: #020617;
  border-radius: 40% 40% 50% 50%;
}

.css2025_design_santa-rider::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  background: #020617;
  border-radius: 60% 60% 30% 30%;
}

.css2025_design_santa-rider::after {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0.4rem;
  width: 0.9rem;
  height: 0.5rem;
  background: #020617;
  border-radius: 70% 70% 0 0;
  transform: skewX(-18deg);
}

/* reindeer shapes */
.css2025_design_santa-reindeer {
  position: absolute;
  bottom: 0.8rem;
  width: 1.7rem;
  height: 1.4rem;
  background: #020617;
  border-radius: 50% 40% 45% 40%;
}

.css2025_design_santa-reindeer::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  right: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: #020617;
  border-radius: 60% 40% 50% 40%;
}

/* antlers */
.css2025_design_santa-reindeer::after {
  content: "";
  position: absolute;
  top: -1.1rem;
  right: 0.6rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0;
  border-top: 0.12rem solid #020617;
  border-right: 0.12rem solid #020617;
  border-left: 0.12rem solid #020617;
  transform: rotate(-10deg);
}

/* positions for multiple reindeer */
.css2025_design_santa-reindeer--1 { left: 3.4rem; transform: scale(0.92); }
.css2025_design_santa-reindeer--2 { left: 5.2rem; transform: scale(0.86); }

/* reins */
.css2025_design_santa-reins {
  position: absolute;
  bottom: 1.6rem;
  left: 2.2rem;
  width: 3.5rem;
  height: 1.1rem;
  border-radius: 50%;
  border-top: 0.08rem solid #020617;
}

/* stars in far background */
.css2025_design_santa-star {
  position: absolute;
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  background: #f9fafb;
  opacity: 0.7;
  animation: css2025_design_santaStarTwinkle 2.4s ease-in-out infinite;
}

.css2025_design_santa-star--1 { top: 0.7rem; left: 18%; animation-delay: 0.2s; }
.css2025_design_santa-star--2 { top: 1.2rem; left: 32%; animation-delay: 0.8s; }
.css2025_design_santa-star--3 { top: 0.8rem; left: 70%; animation-delay: 1.4s; }
.css2025_design_santa-star--4 { top: 2.1rem; left: 83%; animation-delay: 1.9s; }

/* Animations */
@keyframes css2025_design_santaFly {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(3.6rem) translateY(-0.25rem);
  }
  100% {
    transform: translateX(7.2rem) translateY(0.1rem);
  }
}

@keyframes css2025_design_santaStarTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}


/* =======================================
 * 2025 DESIGN: Hanging Ornaments & Candy Canes
 * ======================================= */

.css2025_design_ornament-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0f766e 0, #115e59 40%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* subtle top glow */
.css2025_design_ornament-container::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 140%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 100%, rgba(240, 253, 250, 0.45), transparent 60%);
}

.css2025_design_ornament-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.7) translateY(-0.7rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_ornament-scene {
    transform: scale(0.9) translateY(-0.7rem);
  }
}

/* decorative garland/line at top */
.css2025_design_ornament-garland {
  position: absolute;
  top: 1.4rem;
  left: 0.6rem;
  right: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 0% 0%, #bbf7d0 0, transparent 55%) 0 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle at 20% 0%, #bbf7d0 0, transparent 55%) 20% 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle at 40% 0%, #bbf7d0 0, transparent 55%) 40% 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle at 60% 0%, #bbf7d0 0, transparent 55%) 60% 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle at 80% 0%, #bbf7d0 0, transparent 55%) 80% 0 / 0.6rem 0.6rem no-repeat,
    radial-gradient(circle at 100% 0%, #bbf7d0 0, transparent 55%) 100% 0 / 0.6rem 0.6rem no-repeat;
}

/* ornament line (string) */
.css2025_design_ornament-string {
  position: absolute;
  top: 1.4rem;
  width: 0.08rem;
  height: 2.6rem;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.9), rgba(148, 163, 184, 0.9));
}

/* ornament base class (swinging container) */
.css2025_design_ornament {
  position: absolute;
  top: 3.6rem;
  width: 2.6rem;
  height: 2.6rem;
  transform-origin: 50% -2.6rem;
  animation: css2025_design_ornamentSwing 2.8s ease-in-out infinite;
}

/* metal cap */
.css2025_design_ornament-cap {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 1rem;
  height: 0.55rem;
  transform: translateX(-50%);
  border-radius: 0.35rem 0.35rem 0.2rem 0.2rem;
  background: linear-gradient(180deg, #e5e7eb 0, #9ca3af 100%);
}

/* bauble circle itself */
.css2025_design_ornament-ball {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0.2rem 0.35rem rgba(0, 0, 0, 0.4);
}

/* red ornament */
.css2025_design_ornament--red .css2025_design_ornament-string {
  left: 25%;
}

.css2025_design_ornament--red {
  left: 25%;
  animation-delay: 0s;
}

.css2025_design_ornament--red .css2025_design_ornament-ball {
  background:
    radial-gradient(circle at 30% 20%, #fee2e2 0, transparent 55%),
    radial-gradient(circle at 70% 80%, #fecaca 0, #dc2626 45%, #7f1d1d 100%);
}

.css2025_design_ornament--red .css2025_design_ornament-ball::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(254, 242, 242, 0.85),
      rgba(254, 242, 242, 0.85) 2px,
      transparent 2px,
      transparent 4px
    );
  opacity: 0.35;
}

/* gold ornament */
.css2025_design_ornament--gold .css2025_design_ornament-string {
  left: 50%;
}

.css2025_design_ornament--gold {
  left: 50%;
  animation-delay: 0.4s;
}

.css2025_design_ornament--gold .css2025_design_ornament-ball {
  background:
    radial-gradient(circle at 30% 20%, #fef9c3 0, transparent 55%),
    radial-gradient(circle at 70% 80%, #facc15 0, #d97706 45%, #92400e 100%);
}

/* subtle ring pattern */
.css2025_design_ornament--gold .css2025_design_ornament-ball::before {
  content: "";
  position: absolute;
  inset: 0.2rem;
  border-radius: 50%;
  border: 0.12rem solid rgba(254, 243, 199, 0.65);
}

/* teal ornament */
.css2025_design_ornament--teal .css2025_design_ornament-string {
  left: 75%;
}

.css2025_design_ornament--teal {
  left: 75%;
  animation-delay: 0.8s;
}

.css2025_design_ornament--teal .css2025_design_ornament-ball {
  background:
    radial-gradient(circle at 30% 20%, #ccfbf1 0, transparent 55%),
    radial-gradient(circle at 70% 80%, #22c55e 0, #0f766e 45%, #134e4a 100%);
}

.css2025_design_ornament--teal .css2025_design_ornament-ball::before {
  content: "";
  position: absolute;
  inset: 0.22rem;
  border-radius: 50%;
  border: 0.14rem dotted rgba(240, 253, 250, 0.8);
}

/* candy cane */
.css2025_design_candy-cane {
  position: absolute;
  top: 3rem;
  width: 1.6rem;
  height: 3.6rem;
  border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
  border: 0.3rem solid #f9fafb;
  border-bottom: none;
  border-left: 0.3rem solid #f9fafb;
  border-right: 0.3rem solid #f9fafb;
  transform-origin: 50% -1.4rem;
  animation: css2025_design_ornamentSwing 3s ease-in-out infinite;
}

/* stripes */
.css2025_design_candy-cane::before {
  content: "";
  position: absolute;
  inset: -0.1rem;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 6px,
      rgba(220, 38, 38, 0.9) 6px,
      rgba(220, 38, 38, 0.9) 11px
    );
  mix-blend-mode: multiply;
}

/* left and right canes */
.css2025_design_candy-cane--left {
  left: 12%;
  animation-delay: 0.2s;
}

.css2025_design_candy-cane--right {
  right: 12%;
  animation-delay: 0.9s;
}

/* tiny sparkles */
.css2025_design_ornament-sparkle {
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  background: radial-gradient(circle, #f9fafb 0, rgba(249, 250, 251, 0) 70%);
  border-radius: 50%;
  opacity: 0.2;
  animation: css2025_design_ornamentSparkle 1.8s ease-in-out infinite;
}

.css2025_design_ornament-sparkle--1 { top: 2.2rem; left: 22%; animation-delay: 0.2s; }
.css2025_design_ornament-sparkle--2 { top: 2rem; left: 52%; animation-delay: 0.8s; }
.css2025_design_ornament-sparkle--3 { top: 2.5rem; left: 78%; animation-delay: 1.5s; }

/* Animations */
@keyframes css2025_design_ornamentSwing {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(-7deg);
  }
}

@keyframes css2025_design_ornamentSparkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.9;
    transform: scale(1);
  }
}


/* =======================================
 * 2025 DESIGN: Dog Sleeping Under the Tree
 * ======================================= */

.css2025_design_treedog-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, #1e293b 0, #020617 70%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.css2025_design_treedog-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.7) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_treedog-scene {
    transform: scale(0.9) translateY(-0.5rem);
  }
}

/* floor */
.css2025_design_treedog-floor {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  width: 10rem;
  height: 3.2rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4b5563 0, #111827 100%);
  border-radius: 50%;
}

/* soft rug */
.css2025_design_treedog-rug {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  width: 7.6rem;
  height: 2.6rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fecaca 0, #f97373 40%, #b91c1c 100%);
}

/* Christmas tree (compact) */
.css2025_design_treedog-tree {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  width: 6rem;
  height: 6rem;
  transform: translateX(-50%);
}

/* trunk */
.css2025_design_treedog-tree-trunk {
  position: absolute;
  bottom: -0.4rem;
  left: 50%;
  width: 0.8rem;
  height: 1.6rem;
  transform: translateX(-50%);
  background: #4b2e19;
  border-radius: 0.4rem;
}

/* branches */
.css2025_design_treedog-tree-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}

.css2025_design_treedog-tree-layer--1 {
  bottom: 0.1rem;
  border-width: 0 2.5rem 2rem 2.5rem;
  border-bottom-color: #14532d;
}

.css2025_design_treedog-tree-layer--2 {
  bottom: 1.7rem;
  border-width: 0 2.1rem 1.8rem 2.1rem;
  border-bottom-color: #15803d;
}

.css2025_design_treedog-tree-layer--3 {
  bottom: 3.1rem;
  border-width: 0 1.7rem 1.7rem 1.7rem;
  border-bottom-color: #22c55e;
}

.css2025_design_treedog-tree-layer--4 {
  bottom: 4.7rem;
  border-width: 0 1.3rem 1.4rem 1.3rem;
  border-bottom-color: #4ade80;
}

/* star */
.css2025_design_treedog-tree-star {
  position: absolute;
  bottom: 6.2rem;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  transform: translateX(-50%) rotate(15deg);
  filter: drop-shadow(0 0 0.2rem rgba(250, 204, 21, 0.9));
}

.css2025_design_treedog-tree-star::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #facc15 0, #fbbf24 40%, #f97316 100%);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* lights */
.css2025_design_treedog-light {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3 0, #facc15 40%, rgba(250, 204, 21, 0) 100%);
  box-shadow: 0 0 0.25rem rgba(250, 250, 150, 0.9);
  animation: css2025_design_treedogLightBlink 1.9s ease-in-out infinite alternate;
}

.css2025_design_treedog-light--1 { bottom: 2.2rem; left: 35%; animation-delay: 0s; }
.css2025_design_treedog-light--2 { bottom: 2.3rem; left: 50%; animation-delay: 0.5s; }
.css2025_design_treedog-light--3 { bottom: 2.2rem; left: 66%; animation-delay: 1s; }
.css2025_design_treedog-light--4 { bottom: 3.6rem; left: 40%; animation-delay: 0.3s; }
.css2025_design_treedog-light--5 { bottom: 3.7rem; left: 60%; animation-delay: 0.9s; }
.css2025_design_treedog-light--6 { bottom: 5rem; left: 50%; animation-delay: 1.4s; }

/* presents */
.css2025_design_treedog-gift {
  position: absolute;
  bottom: 2.2rem;
  width: 1.7rem;
  height: 1.6rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4);
}

.css2025_design_treedog-gift--left {
  left: 1.2rem;
  background: linear-gradient(180deg, #f97316 0, #ea580c 100%);
}

.css2025_design_treedog-gift--right {
  right: 1.1rem;
  background: linear-gradient(180deg, #22c55e 0, #16a34a 100%);
}

/* ribbons */
.css2025_design_treedog-gift::before,
.css2025_design_treedog-gift::after {
  content: "";
  position: absolute;
  background: rgba(249, 250, 251, 0.85);
}

.css2025_design_treedog-gift::before {
  left: 50%;
  top: 0;
  width: 0.3rem;
  height: 100%;
  transform: translateX(-50%);
}

.css2025_design_treedog-gift::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 0.25rem;
  transform: translateY(-50%);
}

/* sleeping dog on rug */
.css2025_design_treedog-dog-body {
  position: absolute;
  bottom: 1.7rem;
  left: 2rem;
  width: 3.5rem;
  height: 2rem;
  background: #fbbf77;
  border-radius: 55% 60% 55% 45%;
  box-shadow: 0 0.2rem 0.35rem rgba(0, 0, 0, 0.4);
}

/* curled head */
.css2025_design_treedog-dog-head {
  position: absolute;
  bottom: 0.4rem;
  right: -1rem;
  width: 2.2rem;
  height: 1.8rem;
  background: #fbbf77;
  border-radius: 60% 60% 55% 55%;
}

/* ear */
.css2025_design_treedog-dog-ear {
  position: absolute;
  top: -0.3rem;
  left: 0.2rem;
  width: 1rem;
  height: 1.1rem;
  background: #ea9b4a;
  border-radius: 60% 30% 40% 40%;
}

/* closed eye */
.css2025_design_treedog-dog-eye {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 0.7rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #7c2d12;
}

/* nose */
.css2025_design_treedog-dog-nose {
  position: absolute;
  bottom: 0.4rem;
  right: 0.3rem;
  width: 0.45rem;
  height: 0.35rem;
  background: #111827;
  border-radius: 40% 40% 60% 60%;
}

/* blanket rising/falling (breathing) */
.css2025_design_treedog-blanket {
  position: absolute;
  bottom: 1.6rem;
  left: 1.6rem;
  width: 4.4rem;
  height: 2.3rem;
  border-radius: 1.7rem;
  background: linear-gradient(135deg, #22c55e 0, #16a34a 45%, #15803d 100%);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
  animation: css2025_design_treedogBreath 3s ease-in-out infinite;
}

/* small paw pattern on blanket */
.css2025_design_treedog-blanket::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 50%;
  width: 1.8rem;
  height: 1.1rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(248, 250, 252, 0.9) 52%, transparent 53%) 0 0 / 0.4rem 0.4rem no-repeat,
    radial-gradient(circle, rgba(248, 250, 252, 0.9) 52%, transparent 53%) 50% 0 / 0.4rem 0.4rem no-repeat,
    radial-gradient(circle, rgba(248, 250, 252, 0.9) 52%, transparent 53%) 100% 0 / 0.4rem 0.4rem no-repeat,
    radial-gradient(ellipse, rgba(248, 250, 252, 0.9) 52%, transparent 53%) 50% 70% / 0.7rem 0.45rem no-repeat;
}

/* soft zZz */
.css2025_design_treedog-z {
  position: absolute;
  top: 2.3rem;
  right: 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e5f3ff;
  text-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.5);
  animation: css2025_design_treedogZFloat 2.2s ease-in-out infinite;
}

/* Animations */
@keyframes css2025_design_treedogLightBlink {
  0% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

@keyframes css2025_design_treedogBreath {
  0% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-0.18rem) scaleY(1.05);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

@keyframes css2025_design_treedogZFloat {
  0% {
    opacity: 0;
    transform: translateY(0.4rem) scale(0.8);
  }
  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.9);
  }
}

/* =======================================
 * 2025 DESIGN: Snowman & Snowballs
 * ======================================= */

.css2025_design_snowman-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0f172a 0, #1e293b 35%, #e5f3ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* vignette + glow at horizon */
.css2025_design_snowman-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(248, 250, 252, 0.25), transparent 60%),
    radial-gradient(circle at 50% 0, transparent 40%, rgba(15, 23, 42, 0.9) 100%);
  pointer-events: none;
}

.css2025_design_snowman-scene {
  position: relative;
  width: 10rem;
  height: 10rem;
  transform: scale(0.7) translateY(-0.5rem);
}

@media only screen and (min-width: 576px) {
  .css2025_design_snowman-scene {
    transform: scale(0.92) translateY(-0.5rem);
  }
}

/* ground */
.css2025_design_snowman-ground {
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  width: 11rem;
  height: 3.4rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0, #ffffff 0, #e5f3ff 45%, #cbd5f5 80%, #64748b 100%);
}

/* slight ridge */
.css2025_design_snowman-ground::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.7rem;
  right: 0.7rem;
  height: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.55), transparent 30%, transparent 70%, rgba(148, 163, 184, 0.55));
  opacity: 0.7;
}

/* background trees silhouettes */
.css2025_design_snowman-trees {
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  width: 10rem;
  height: 3.5rem;
  transform: translateX(-50%);
  background:
    conic-gradient(from 0deg, #020617 0 10deg, transparent 10deg 20deg) 5% 100% / 1.1rem 2.4rem no-repeat,
    conic-gradient(from 0deg, #020617 0 10deg, transparent 10deg 20deg) 20% 100% / 1.2rem 2.6rem no-repeat,
    conic-gradient(from 0deg, #020617 0 10deg, transparent 10deg 20deg) 38% 100% / 1.4rem 2.9rem no-repeat,
    conic-gradient(from 0deg, #020617 0 10deg, transparent 10deg 20deg) 60% 100% / 1.3rem 2.7rem no-repeat,
    conic-gradient(from 0deg, #020617 0 10deg, transparent 10deg 20deg) 80% 100% / 1.2rem 2.4rem no-repeat;
  opacity: 0.4;
}

/* snowman bottom ball */
.css2025_design_snowman-bottom {
  position: absolute;
  bottom: 1.4rem;
  left: 3.7rem;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0, #e5f3ff 40%, #cbd5f5 80%, #9ca3af 100%);
  box-shadow: 0 0.28rem 0.45rem rgba(0, 0, 0, 0.4);
}

/* middle ball */
.css2025_design_snowman-middle {
  position: absolute;
  bottom: 3rem;
  left: 4.15rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, #ffffff 0, #e5f3ff 40%, #d1d5db 80%);
}

/* head */
.css2025_design_snowman-head {
  position: absolute;
  bottom: 4.7rem;
  left: 4.5rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, #ffffff 0, #e5f3ff 45%, #d1d5db 90%);
}

/* eyes */
.css2025_design_snowman-eye {
  position: absolute;
  top: 0.7rem;
  width: 0.25rem;
  height: 0.25rem;
  background: #111827;
  border-radius: 50%;
}

.css2025_design_snowman-eye--left {
  left: 0.55rem;
}

.css2025_design_snowman-eye--right {
  right: 0.55rem;
}

/* carrot nose */
.css2025_design_snowman-nose {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 1.1rem;
  height: 0.35rem;
  transform: translateX(-15%) rotate(-5deg);
  background: linear-gradient(90deg, #fb923c 0, #ea580c 50%, #9a3412 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* coal mouth */
.css2025_design_snowman-mouth {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  width: 1.1rem;
  height: 0.5rem;
  transform: translateX(-50%);
  border-bottom: 0.13rem solid rgba(15, 23, 42, 0.8);
  border-radius: 0 0 1rem 1rem;
}

/* hat */
.css2025_design_snowman-hat-brim {
  position: absolute;
  bottom: 6.55rem;
  left: 4.2rem;
  width: 2.7rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #020617;
  box-shadow: 0 0.16rem 0.3rem rgba(0, 0, 0, 0.45);
}

.css2025_design_snowman-hat-top {
  position: absolute;
  bottom: 6.9rem;
  left: 4.65rem;
  width: 1.9rem;
  height: 1.3rem;
  background: #020617;
  border-radius: 0.25rem 0.25rem 0.1rem 0.1rem;
}

.css2025_design_snowman-hat-band {
  position: absolute;
  bottom: 7.15rem;
  left: 4.65rem;
  width: 1.9rem;
  height: 0.35rem;
  background: linear-gradient(90deg, #ef4444 0, #f97316 100%);
}

/* scarf */
.css2025_design_snowman-scarf {
  position: absolute;
  bottom: 4.7rem;
  left: 4.2rem;
  width: 2.8rem;
  height: 0.9rem;
  background: linear-gradient(90deg, #22c55e 0, #16a34a 50%, #22c55e 100%);
  border-radius: 0.7rem 0.7rem 0.4rem 0.4rem;
}

.css2025_design_snowman-scarf::before {
  content: "";
  position: absolute;
  bottom: -0.9rem;
  left: 0.55rem;
  width: 0.7rem;
  height: 1.4rem;
  background: linear-gradient(180deg, #16a34a 0, #15803d 100%);
  border-radius: 0.4rem 0.4rem 0.9rem 0.9rem;
  transform-origin: top center;
  animation: css2025_design_snowmanScarfSwing 1.6s ease-in-out infinite;
}

/* twig arms */
.css2025_design_snowman-arm {
  position: absolute;
  bottom: 4rem;
  width: 2.2rem;
  height: 0.15rem;
  background: #4b2e19;
  transform-origin: 0 50%;
}

.css2025_design_snowman-arm--left {
  left: 3.1rem;
  transform: rotate(-18deg);
}

.css2025_design_snowman-arm--right {
  right: 3.1rem;
  transform: scaleX(-1) rotate(-18deg);
}

/* little twig fingers */
.css2025_design_snowman-arm::before,
.css2025_design_snowman-arm::after {
  content: "";
  position: absolute;
  right: 0;
  width: 0.7rem;
  height: 0.12rem;
  background: #4b2e19;
  transform-origin: left center;
}

.css2025_design_snowman-arm::before {
  top: -0.12rem;
  transform: rotate(30deg);
}

.css2025_design_snowman-arm::after {
  top: 0.12rem;
  transform: rotate(-25deg);
}

/* buttons */
.css2025_design_snowman-button {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: #111827;
}

.css2025_design_snowman-button--1 { bottom: 3.9rem; left: 5.15rem; }
.css2025_design_snowman-button--2 { bottom: 3.3rem; left: 5.18rem; }
.css2025_design_snowman-button--3 { bottom: 2.7rem; left: 5.2rem; }

/* static snowballs on ground */
.css2025_design_snowman-snowball {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #e5f3ff 40%, #cbd5f5 100%);
  box-shadow: 0 0.18rem 0.3rem rgba(0, 0, 0, 0.3);
}

.css2025_design_snowman-snowball--stack-1 {
  bottom: 1.4rem;
  left: 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
}

.css2025_design_snowman-snowball--stack-2 {
  bottom: 1.8rem;
  left: 2rem;
  width: 1rem;
  height: 1rem;
}

.css2025_design_snowman-snowball--stack-3 {
  bottom: 1.4rem;
  right: 1.6rem;
  width: 1rem;
  height: 1rem;
}

/* animated thrown snowball */
.css2025_design_snowman-snowball-throw {
  position: absolute;
  bottom: 3.9rem;
  left: 3.7rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #e5f3ff 40%, #cbd5f5 100%);
  box-shadow: 0 0.18rem 0.3rem rgba(0, 0, 0, 0.35);
  animation: css2025_design_snowmanSnowballArc 1.6s ease-out infinite;
}

/* small spray when it lands */
.css2025_design_snowman-spray {
  position: absolute;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.9;
  animation: css2025_design_snowmanSpray 1.6s ease-out infinite;
}

.css2025_design_snowman-spray--1 { bottom: 3rem; right: 2.5rem; animation-delay: 0.1s; }
.css2025_design_snowman-spray--2 { bottom: 3.2rem; right: 2.1rem; animation-delay: 0.2s; }

/* falling snow (background) */
.css2025_design_snowman-flake {
  position: absolute;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.95;
  animation: css2025_design_snowmanFall 4.2s linear infinite;
}

.css2025_design_snowman-flake--1 { top: -1rem; left: 18%; animation-delay: 0s; }
.css2025_design_snowman-flake--2 { top: -1.3rem; left: 32%; animation-delay: 0.7s; }
.css2025_design_snowman-flake--3 { top: -0.9rem; left: 54%; animation-delay: 1.2s; }
.css2025_design_snowman-flake--4 { top: -1.1rem; left: 72%; animation-delay: 1.8s; }
.css2025_design_snowman-flake--5 { top: -0.8rem; left: 87%; animation-delay: 2.4s; }

/* tiny stars in sky */
.css2025_design_snowman-star {
  position: absolute;
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background: #e5f3ff;
  opacity: 0.8;
  animation: css2025_design_snowmanStar 2.4s ease-in-out infinite;
}

.css2025_design_snowman-star--1 { top: 0.9rem; left: 20%; animation-delay: 0.2s; }
.css2025_design_snowman-star--2 { top: 0.7rem; left: 45%; animation-delay: 0.9s; }
.css2025_design_snowman-star--3 { top: 1.3rem; left: 70%; animation-delay: 1.5s; }

/* Animations */
@keyframes css2025_design_snowmanScarfSwing {
  0% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes css2025_design_snowmanSnowballArc {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(2.2rem, 1.1rem) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(2.4rem, 1.4rem) scale(0.9);
    opacity: 0;
  }
}

@keyframes css2025_design_snowmanSpray {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-0.6rem, -0.4rem);
    opacity: 0;
  }
}

@keyframes css2025_design_snowmanFall {
  0% {
    transform: translateY(0);
    opacity: 0.95;
  }
  90% {
    transform: translateY(6.1rem);
    opacity: 0.95;
  }
  100% {
    transform: translateY(6.1rem);
    opacity: 0;
  }
}

@keyframes css2025_design_snowmanStar {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}