/* The orange portal effect - inside Buster's head */
:root {
  --orange-bg: #ffa366;
  --orange-dark: #ff8c42;
  --orange-light: #ffb380;
  --sky-blue: #87CEEB;
  --corner-size: 140px;
  --corner-height: 60px;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--sky-blue);
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* The orange universe - Buster's head from inside */
#orange-portal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Spherical gradient to create dimension */
  background: radial-gradient(
    ellipse at 50% 40%,
    var(--orange-light) 0%,
    var(--orange-bg) 25%,
    var(--orange-bg) 60%,
    var(--orange-dark) 90%,
    #ff7a30 100%
  );
  
  /* Elliptical corners for the head shape */
  border-top-left-radius: var(--corner-size) var(--corner-height);
  border-top-right-radius: var(--corner-size) var(--corner-height);
  border-bottom-left-radius: var(--corner-size) var(--corner-height);
  border-bottom-right-radius: var(--corner-size) var(--corner-height);
  
  transition: background-color 1s ease-out;
  overflow: hidden;
}

/* Subtle inner glow for more depth */
#orange-portal::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 30%,
    rgba(255, 200, 150, 0.1) 50%,
    transparent 70%
  );
  pointer-events: none;
  animation: gentleRotate 60s linear infinite;
}

/* Very subtle animation for life */
@keyframes gentleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Ear positions (for when we add them) */
.cat-ear {
  position: absolute;
  width: 80px;
  height: 100px;
  /* Will be styled when we have the SVG */
}

.cat-ear.left {
  top: -20px;
  left: 15%;
  transform: rotate(-20deg);
}

.cat-ear.right {
  top: -20px;
  right: 15%;
  transform: rotate(20deg);
}

/* Alternative gradient styles to experiment with */
#orange-portal.gradient-warm {
  background: radial-gradient(
    ellipse at 50% 30%,
    #ffc299 0%,
    var(--orange-bg) 40%,
    #ff9552 80%,
    #ff7a30 100%
  );
}

#orange-portal.gradient-sunset {
  background: radial-gradient(
    ellipse at 50% 60%,
    #ffb380 0%,
    var(--orange-bg) 30%,
    #ff9147 70%,
    #ff6b1a 100%
  );
}