* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.stage {
    width: 100vw;
    height: 100vh;
    animation: fireGlow 8s infinite;
    position: relative;
}
@keyframes fireGlow {
    0%   { background-color: #0a0500; }
    50%  { background-color: #200a00; }
    100% { background-color: #0a0500; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInOut {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes activateHover {
    to { pointer-events: auto; }
}
.dragon {
    position: absolute;
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.dragon img {
    width: 500px;
    height: auto;
}
#white {
    z-index: 1;
    animation: fadeIn 2s 1s forwards, activateHover 0s 44s forwards;
    top: 5%;  
    left: 35%;
    transform: translateX(-50%) rotate(4deg);
}
#golden {
    z-index: 3;
    animation: fadeIn 2s 6s forwards, activateHover 0s 44s forwards;
    top: 5%;  
    left: 70%;
    transform: translateX(-50%) rotate(0deg);
}
#black {
    z-index: 5;
    animation: fadeIn 2s 11s forwards, activateHover 0s 44s forwards;
    top: 15%;  
    left: 20%;
    transform: translateX(-50%) rotate(3deg);
}
#red {
    z-index: 7;
    animation: fadeIn 2s 16s forwards, activateHover 0s 44s forwards;
    top: 20%;  
    left: 75%;
    transform: translateX(-50%) rotate(-5deg);
}
#scarlet {
    z-index: 9;
    animation: fadeIn 2s 21s forwards, activateHover 0s 44s forwards;
    top:10%;  
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
}
#diamond {
    z-index: 11;
    animation: fadeIn 5s 26s forwards, activateHover 0s 44s forwards;
    top: 35%;  
    left: 80%;
    transform: translateX(-50%) rotate(2deg);
}
#bronze {
    z-index: 13;
    animation: fadeIn 2s 31s forwards, activateHover 0s 44s forwards;
    top: 32%;  
    left: 25%;
    transform: translateX(-50%) rotate(5deg);
}
#gray {
    z-index: 15;
    animation: fadeIn 2s 36s forwards, activateHover 0s 44s forwards;
    top: 30%;  
    left: 52%;
    transform: translateX(-50%) rotate(-4deg);
}
.text {
    position: absolute;
    color: transparent;
    background: linear-gradient(180deg, #ffb300 0%, #f3c863 25%, #5c3d00 50%, #f3c863 75%, #ffb300 100%);
    background-clip: text;
    -webkit-background-clip: text;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    font-family: "manufacturing-consent", sans-serif;
    font-size: 30pt;
    text-align: center;
}
#text-white {
    animation: fadeInOut 5s 1s;
    z-index: 2;
}
#text-golden {
    animation: fadeInOut 5s 6s;
    z-index: 4;
}
#text-black {
    animation: fadeInOut 5s 11s;
    z-index: 6;
}
#text-red {
    animation: fadeInOut 5s 16s;
    z-index: 8;
}
#text-scarlet {
    animation: fadeInOut 5s 21s;
    z-index: 10;
}
#text-diamond {
    animation: fadeInOut 5s 26s;
    z-index: 12;
}
#text-bronze {
    animation: fadeInOut 5s 31s;
    z-index: 14;
}
#text-gray {
    animation: fadeInOut 5s 36s;
    z-index: 16;
}
#text-final {
    animation: fadeIn 2s 41s forwards;
    z-index: 18;
}
#white:hover { 
    z-index: 100; 
}
#golden:hover { 
    z-index: 100; 
}
#black:hover { 
    z-index: 100; 
}
#red:hover { 
    z-index: 100; 
}
#scarlet:hover { 
    z-index: 100; 
}
#diamond:hover { 
    z-index: 100; 
}
#bronze:hover { 
    z-index: 100; 
}
#gray:hover { 
    z-index: 100; 
}
#white:hover ~ #text-white {
    opacity: 1;
}
#white:hover ~ #text-final {
    opacity: 0 !important;
}
#golden:hover ~ #text-golden { 
    opacity: 1; 
}
#golden:hover ~ #text-final {
    opacity: 0 !important;
}
#black:hover ~ #text-black {
    opacity: 1;
}
#black:hover ~ #text-final {
    opacity: 0 !important;
}
#red:hover ~ #text-red {
    opacity: 1;
}
#red:hover ~ #text-final {
    opacity: 0 !important;
}
#scarlet:hover ~ #text-scarlet {
    opacity: 1;
}
#scarlet:hover ~ #text-final {
    opacity: 0 !important;
}
#diamond:hover ~ #text-diamond {
    opacity: 1;
}
#diamond:hover ~ #text-final {
    opacity: 0 !important;
}
#bronze:hover ~ #text-bronze {
    opacity: 1;
}
#bronze:hover ~ #text-final {
    opacity: 0 !important;
}
#gray:hover ~ #text-gray {
    opacity: 1;
}
#gray:hover ~ #text-final {
    opacity: 0 !important;
}