/* Mascot Animation — Desktop */
.mascot-entrance {
  height: 390px;
  opacity: 0;
  transform: translateX(120px) scale(1.03);
  animation: mascot-slide-in 1.5s cubic-bezier(.26,.83,.36,1.13) 0.4s forwards;
  filter: drop-shadow(0 10px 18px #ffd86b60);
  align-self: flex-start; /* aligns mascot to top of login box */
  margin-top: 5em;        /* tweak as needed for vertical alignment */
  z-index: 2;
  position: relative;
}

/* Mascot Slide-in Keyframes — Desktop */
@keyframes mascot-slide-in {
  0%   { opacity: 0; transform: translateX(120px) scale(0.97); }
  60%  { opacity: 1; transform: translateX(-10px) scale(1.04); }
  80%  { opacity: 1; transform: translateX(4px) scale(0.99) rotate(-2deg);}
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0);}
}

/* Responsive Mascot — Mobile */
@media (max-width: 800px) {
  .mascot-entrance {
    height: 150px;
    margin-top: 0.7em;
    animation: mascot-slide-in-mobile 1.2s cubic-bezier(.26,.83,.36,1.13) 0.4s forwards;
  }
}

/* Mascot Slide-in Keyframes — Mobile */
@media (max-width: 800px) {
  @keyframes mascot-slide-in-mobile {
    0% { opacity: 0; transform: translateY(80px) scale(0.97); }
    70% { opacity: 1; transform: translateY(-10px) scale(1.04);}
    100% { opacity: 1; transform: translateY(0) scale(1);}
  }
} 

/* Bigger mascot – desktop & mobile overrides */
.mascot-entrance { 
  height: px;          /* was 290px */
}

@media (max-width: 800px) {
  .mascot-entrance { 
    height: 200px;        /* was 150px */
  }
}

/* mascots.css — clean base, no page-specific hard-coding */

/* global mascot defaults (safe to keep across the site) */
:root{
  --mascot-size: 540px;

  /* global defaults you can override per page */
  --mascot-left-x: 6vw;
  --mascot-right-x: 6vw;
  --mascot-left-bottom: 14vh;
  --mascot-right-bottom: 14vh;

  /* urls intentionally undefined so no mascots appear unless a page sets them */
  /* --mascot-left-url */
  /* --mascot-right-url */
}

/* shared base */
html.mascot-left::after,
html.mascot-right::before,
html.mascot-both::before,
html.mascot-both::after{
  content:"";
  position:fixed;
  width:var(--mascot-size,540px);
  height:var(--mascot-size,540px);
  background-position:center bottom;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:0;
}

/* left mascot (after) */
html.mascot-left::after,
html.mascot-both::after{
  left:var(--mascot-left-x,6vw);
  bottom:var(--mascot-left-bottom,14vh);
  background-image:var(--mascot-left-url);
}

/* right mascot (before) */
html.mascot-right::before,
html.mascot-both::before{
  right:var(--mascot-right-x,6vw);
  bottom:var(--mascot-right-bottom,14vh);
  background-image:var(--mascot-right-url);
}

/* safety reset */
html.mascot-left::after,
html.mascot-right::before,
html.mascot-both::before,
html.mascot-both::after{
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}