:root {
    --gold: #FAC76A;
    --gold-dark: #F9B639;
    --gold-darker: #c68306;
    --gold-darkest: #4F3402;
}

html {
    overflow: hidden;
}

body {
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    padding: 40px;
    //background-image: url('background.jpg');
    background:
        linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
        url('background.jpg');
    background-size: cover;
    color: white;
}

body::before {
    content: '';
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--gold-darkest), transparent 80%) 0%,
        color-mix(in srgb, var(--gold-dark), transparent 40%) 50%,
        transparent 80%
    );
    filter: blur(20px);
    transform-origin: bottom center;
    animation: glow 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

h1 {
    margin-bottom: 60px;
    font-size: 56px;
    background: linear-gradient(to bottom, var(--gold), var(--gold-darker));
    background-clip: text;
    color: transparent;
    text-shadow:
    0 2px 6px color-mix(in srgb, var(--gold-darkest), transparent 66%),
    0 0 10px color-mix(in srgb, var(--gold-dark), transparent 66%);
}

img {
    max-width: 300px;
    height: 450px;
    overflow: hidden;

    /* layered borders */
    border-radius: 12px;
    border: 2px solid transparent; /* inner black border */
    background: linear-gradient(to bottom, var(--gold), var(--gold-darker)) border-box;
    box-shadow: 0 0 0 4px black;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

#image-container {
    margin-top: 20px;
    position: relative;
    display: inline-block;
    border: 5px solid var(--gold-darker);
    border-radius: 0; /* Sharp border */
    box-shadow:
    0 0 10px 4px var(--gold-dark),    /* glow around gold border */
    0 0 0 6px var(--gold-darkest);    /* outer golden border */
    background: black;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 26px;
    cursor: pointer;
    background: radial-gradient(circle at center, var(--gold), var(--gold-darker));
    border: 2px solid var(--gold);
    width: 300px;
    font-weight: bold;
}

/* container to fix button position */
#display {
    width: 100%;
    max-width: 350px;
    //height: 400px; /* fixed height so button stays put */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center content */
    align-items: center;
    position: relative;
}

#circle-1 {
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 570px;
    height: 570px;
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 80%);
    z-index: -1;
}

#circle-2 {
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 650px;
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 80%);
    z-index: -1;
}

#circle-3 {
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 660px;
    height: 660px;
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 90%);
    z-index: -1;
}

#square1 {
    position: absolute;
    width: 660px;
    height: 660px;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 90%);
    z-index: -1;
}

#square2 {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 90%);
    z-index: -1;
}

#primary-circle-1 {
    position: absolute;
    width: 360px;
    height: 360px;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 40%);
    z-index: -1;
}

#primary-circle-2 {
    position: absolute;
    width: 420px;
    height: 420px;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid color-mix(in srgb, var(--gold-dark), transparent 40%);
    z-index: -1;
}

#arcane-text-1 span {
    font-family: "Noto Sans Linear A", sans-serif;
    font-weight: 400;
    font-style: normal;
    transform-origin: bottom center;
    position: absolute;
    height: 206px;
    left: 48%;
    top: 20%;

    color: var(--gold-darker);
    text-shadow:
    0 0px 5px var(--gold),
    0 5px 10px var(--gold-darker),
    0 0 15px var(--gold);

    animation: rotate 120s linear infinite;
}

#arcane-text-2 span {
    font-family: "Noto Sans Linear A", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    transform-origin: bottom center;
    position: absolute;
    height: 323px;
    left: 47%;
    top: -1%;

    color: var(--gold-darkest);
    text-shadow:
    0 0px 5px var(--gold-darker),
    0 5px 10px var(--gold-darkest),
    0 0 15px var(--gold-darker);

    animation: rotate 120s linear infinite;
    animation-direction: reverse;

    z-index: -1;
}


/* ⚡ Loading overlay */
#loading {
    font-size: 60px;
    animation: flash 0.8s infinite alternate;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes flash {
    from { opacity: 0.3; transform: scale(1); }
    to { opacity: 1; transform: scale(1.2); }
}

@keyframes rotate {
    from { transform: rotate(var(--current-rotation)); }
    to { transform: rotate(calc(var(--current-rotation) + 360deg)); }
}

@keyframes glow {
    0% {
        transform: scaleY(1) translateY(-4px);
        opacity: 0.3;
    }
    100% {
        transform: scaleY(1.2) translateY(-16px);
        opacity: 0.6;
    }
}