/* Eggs: the hatch screen (EggHatchComponent / HatchedEggComponent) and the
   egg list. The sprites are cropped straight out of PokeRogue's egg sheets,
   which are a single row of frames — one per tier, in enum order. */

.egg-sprite {
    background-repeat: no-repeat;
    image-rendering: pixelated;
    width: calc(28px * var(--egg-scale));
    height: calc(30px * var(--egg-scale));
    background-image: url("/poke-assets/images/egg/egg.png");
    background-size: calc(138px * var(--egg-scale)) calc(31px * var(--egg-scale));
    background-position: calc(-28px * var(--egg-frame) * var(--egg-scale)) 0;
}

/* --- Hatch screen -------------------------------------------------------- */

.egg-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tall enough that the egg's final scale-up still fits inside the panel. */
    height: 300px;
    margin: 1rem auto;
}

.egg-stage .egg-sprite {
    transform-origin: 50% 90%;
}

/* The controller walks the egg through these three phases before submitting
   the hatch form: a nudge, real thrashing, then the break. */
.egg-sprite.is-wobbling {
    animation: egg-wobble 0.7s ease-in-out infinite;
}

.egg-sprite.is-wobbling-hard {
    animation: egg-wobble-hard 0.35s ease-in-out infinite;
}

.egg-sprite.is-cracking {
    animation: egg-crack 0.9s ease-in forwards;
}

@keyframes egg-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg); }
}

@keyframes egg-wobble-hard {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    20% { transform: rotate(-15deg) translateY(-4px); }
    60% { transform: rotate(15deg) translateY(-4px); }
}

@keyframes egg-crack {
    0% { transform: scale(1) rotate(0deg); filter: none; }
    20% { transform: scale(1.05) rotate(-12deg); filter: brightness(1.6); }
    40% { transform: scale(1.08) rotate(12deg); filter: brightness(2.6); }
    60% { transform: scale(1.12) rotate(-9deg); filter: brightness(4); }
    80% { transform: scale(1.25) rotate(4deg); filter: brightness(6); }
    100% { transform: scale(1.5) rotate(0deg); filter: brightness(10); opacity: 0; }
}

.egg-status {
    min-height: 1.5em;
    font-weight: bold;
}

/* --- Reveal -------------------------------------------------------------- */

.egg-reveal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

/* The burst of light the hatchling steps out of. */
.egg-reveal::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    content: "";
    background: radial-gradient(circle, hsl(50 100% 85% / 0.9) 0%, hsl(50 100% 70% / 0.35) 45%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: egg-burst 1.4s ease-out forwards;
}

.egg-reveal .pokemon-sprite {
    position: relative;
    animation: egg-hatchling-pop 0.8s ease-out backwards;
}

@keyframes egg-burst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    45% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

@keyframes egg-hatchling-pop {
    0% { transform: scale(0.2); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .egg-sprite.is-wobbling,
    .egg-sprite.is-wobbling-hard,
    .egg-sprite.is-cracking,
    .egg-reveal::before,
    .egg-reveal .pokemon-sprite {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

/* --- Egg list ------------------------------------------------------------ */

.egg-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.egg-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
}

.egg-card .egg-sprite {
    flex: none;
}

.egg-card__details {
    flex: 1;
    min-width: 0;
}

.egg-card__tier {
    display: block;
    margin-bottom: 0.5rem;
}

.egg-card__countdown {
    font-size: 0.7rem;
}

/* Rarity tints for the tier label, matching each egg sprite's colours. */
.egg-tier-common { color: #d8dcc8; }
.egg-tier-rare { color: #62b0f7; }
.egg-tier-epic { color: #f7d51d; }
.egg-tier-legendary { color: #e879f9; }