/** The animation that gives a green pulsating border around the focused element */
@keyframes pulse-focus {
    0%   { box-shadow: 0 0 0 10px rgba(255,255,255, 0.1); }
    50%  { box-shadow: 0 0 0 10px rgba(255,255,255, 1.0); }
    100% { box-shadow: 0 0 0 10px rgba(255,255,255, 0.1); }
}
@-webkit-keyframes pulse-focus {
    0%   { -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.1); }
    50%  { -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 1.0); }
    100% { -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.1); }
}


/** Fades an element in and out. Use sparingly for things like a text cursor. */
@keyframes blink {
    0%   { opacity: 1.0; }
    50%  { opacity: 0.25; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blink {
    0%   { opacity: 1.0; }
    50%  { opacity: 0.25; }
    100% { opacity: 1.0; }
}


/** Scales an item's size similarly to the iphoto slideshow effect */
@keyframes iphoto-scale-in {
    0%   { opacity:0; -webkit-transform:scale(1); }
    10%  { opacity:1; -webkit-transform:scale(1); }
    100% { opacity:1; -webkit-transform:scale(1.1); }
}
@-webkit-keyframes iphoto-scale-in {
    0%   { opacity:0; -webkit-transform:scale(1); }
    10%  { opacity:1; -webkit-transform:scale(1); }
    100% { opacity:1; -webkit-transform:scale(1.1); }
}

@keyframes iphoto-scale-out {
    0%   { opacity:1; -webkit-transform:scale(1.1); }
    80%  { opacity:0; }
    100% { opacity:0; -webkit-transform:scale(1.1); }
}
@-webkit-keyframes iphoto-scale-out {
    0%   { opacity:1; -webkit-transform:scale(1.1); }
    80%  { opacity:0; }
    100% { opacity:0; -webkit-transform:scale(1.1); }
}


@keyframes npc-tantrum {
    0%   { transform:rotate(4deg); }
    25%  { transform:rotate(0deg) translateY(20px); }
    50%  { transform:rotate(-4deg) translateY(0); }
    75%  { transform:rotate(0deg) translateY(20px); }
    100% { transform:rotate(4deg); }
}
@-webkit-keyframes npc-tantrum {
    0%   { -webkit-transform:rotate(4deg); }
    25%  { -webkit-transform:rotate(0deg) translateY(20px); }
    50%  { -webkit-transform:rotate(-4deg) translateY(0); }
    75%  { -webkit-transform:rotate(0deg) translateY(20px); }
    100% { -webkit-transform:rotate(4deg); }
}

.npc-tantrum {
    -webkit-animation: npc-tantrum 0.75s;
            animation: npc-tantrum 0.75s;
}