/* ===========================
   DOG MODULE
   =========================== */


/* ===========================
   STAGE
   =========================== */

.dogArt{
  position: relative;
  width: min(340px, 92%);
  height: 250px;
  display: grid;
  place-items: center;
}


/* ===========================
   BODY WRAP
   =========================== */

.dogBodyWrap{
  position: relative;
  z-index: 3;
  transform: translateY(-60px);
}


/* ===========================
   BODY IMAGE
   =========================== */

.dogImg{
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(25, 12, 50, 0.14));
  user-select: none;
  -webkit-user-drag: none;
}


/* ===========================
   TAIL
   =========================== */

.dogTail{
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: -4%;
  width: 100px;
  height: auto;
  transform-origin: 6% 55%;
  animation: tailWag 3.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(25, 12, 50, 0.10));
  pointer-events: none;
}


/* ===========================
   TAIL ANIMATION
   =========================== */

@keyframes tailWag{
  0%   { transform: rotate(8deg); }
  25%  { transform: rotate(-14deg); }
  50%  { transform: rotate(6deg); }
  75%  { transform: rotate(-12deg); }
  100% { transform: rotate(8deg); }
}


/* ===========================
   BODY MASK
   =========================== */

.dogBodyWrap::after{
  content:"";
  position:absolute;
  right: 14%;
  bottom: 20%;
  width: 46px;
  height: 46px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.0)
  );
  border-radius: 50%;
  filter: blur(8px);
  z-index: 4;
  pointer-events: none;
}


/* ===========================
   MOBILE BASE
   =========================== */

@media (max-width: 560px){
  .dogArt{
    width: min(320px, 92%);
    height: 230px;
  }

  .dogTail{
    width: 92px;
  }
}


/* ===========================
   MOBILE BODY SHIFT
   =========================== */

@media (max-width: 560px){
  .dogBodyWrap{
    transform: translateY(-52px);
  }
}


/* ===========================
   MOBILE TAIL FIX
   =========================== */

@media (max-width: 560px){
  .dogTail{
    bottom: 12%;
    right: 8%;
    transform-origin: 12% 55%;
  }
}


/* ===========================
   MOBILE SAFETY
   =========================== */

@media (max-width: 560px){
  .dogSlot{
    height: 270px;
  }

  .dogArt{
    height: 270px;
  }

  .dogFrame{
    min-height: 320px;
  }
}