/* The curtain: what a page being loaded shows, from the first moment until the house has said who
   this is. The game's coin turns in the middle with a gold ring filling around it, a suit lights at
   each quarter, the painted name stands under it and gold dust rises. It is plain HTML in
   index.html, so it is there before the app has even arrived, and the app only lifts it: a
   returning player goes straight from the curtain to the door, never through the sign-in. */

@property --ring {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

#curtain {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255, 206, 110, 0.16), rgba(255, 206, 110, 0) 70%),
        radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6)),
        #10261d;
    --ring: 0;
    --coin: clamp(110px, 24vmin, 210px);
    transition: --ring 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.75s ease 0.25s, visibility 0s linear 1s;
    user-select: none;
    -webkit-user-select: none;
}

#curtain .whole {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--coin) * 0.1);
    transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0.15s, filter 0.9s ease 0.15s;
}

/* ---- the gold dust ---- */

#curtain .dust {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

#curtain .dust i {
    position: absolute;
    left: var(--x);
    bottom: -2vh;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle, #fff3c4 0%, #e2b64a 45%, rgba(226, 182, 74, 0) 72%);
    opacity: 0;
    animation: curtain-mote var(--t) linear var(--d) infinite;
}

@keyframes curtain-mote {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    14% { opacity: var(--o); }
    50% { transform: translate(var(--w), -55vh) scale(1); }
    86% { opacity: var(--o); }
    100% { transform: translate(calc(var(--w) * -0.6), -108vh) scale(0.5); opacity: 0; }
}

/* ---- the coin and its ring ---- */

#curtain .seal {
    position: relative;
    width: calc(var(--coin) * 1.9);
    height: calc(var(--coin) * 1.9);
    display: grid;
    place-items: center;
}

/* The light the coin stands in, breathing. */
#curtain .seal::before {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 120, 0.34), rgba(255, 214, 120, 0) 62%);
    animation: curtain-breathe 3.2s ease-in-out infinite;
}

@keyframes curtain-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.75; }
    50% { transform: scale(1.06); opacity: 1; }
}

#curtain svg.ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

#curtain .ring circle {
    fill: none;
    stroke-width: 2.4;
}

#curtain .ring .track {
    stroke: rgba(226, 182, 74, 0.16);
}

#curtain .ring .fill {
    stroke: url(#curtain-gold);
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    stroke-dashoffset: calc(100 - var(--ring) * 100);
    filter: drop-shadow(0 0 3px rgba(255, 210, 110, 0.85));
}

/* A bead of light running round the track, so the page is seen alive even while the ring waits. */
#curtain .ring .run {
    stroke: rgba(255, 240, 200, 0.85);
    stroke-linecap: round;
    stroke-dasharray: 3 97;
    animation: curtain-run 2.2s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255, 230, 160, 0.9));
}

@keyframes curtain-run {
    to { stroke-dashoffset: -100; }
}

/* The coin turns as a tossed one does: a fast spin, then it rests face up for a breath. */
#curtain .coin {
    position: relative;
    width: var(--coin);
    height: var(--coin);
    perspective: 900px;
}

#curtain .coin .turn {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: curtain-toss 2.6s cubic-bezier(0.55, 0.05, 0.25, 1) infinite;
}

@keyframes curtain-toss {
    0% { transform: rotateY(0deg) translateY(0); }
    38% { transform: rotateY(720deg) translateY(-7%); }
    52%, 100% { transform: rotateY(720deg) translateY(0); }
}

/* The coin's thickness: copies of it a hair apart, darker toward the middle, so its edge shows as it turns. */
#curtain .coin img,
#curtain .coin b {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#curtain .coin b {
    border-radius: 50%;
    background: radial-gradient(circle, #8a6418 60%, #5e4310 100%);
    transform: translateZ(var(--z));
}

#curtain .coin img.face {
    transform: translateZ(4px);
    filter: drop-shadow(0 0 1px rgba(80, 50, 0, 0.6));
}

#curtain .coin img.tail {
    transform: rotateY(180deg) translateZ(4px);
}

/* A gleam crosses the face each time it lands. */
#curtain .coin .gleam {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(4.5px);
    pointer-events: none;
}

#curtain .coin .gleam::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 252, 230, 0.75) 50%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-120%);
    animation: curtain-gleam 2.6s ease-out infinite;
}

@keyframes curtain-gleam {
    0%, 40% { transform: translateX(-120%); }
    62%, 100% { transform: translateX(120%); }
}

/* ---- the four suits at the quarters of the ring ---- */

#curtain .suit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--coin) * 0.3);
    height: calc(var(--coin) * 0.3);
    margin: calc(var(--coin) * -0.15);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 40% 35%, #fffaf0, #efe2c2 70%, #d9c493);
    box-shadow: 0 0 0 2px #b8902f, 0 2px 8px rgba(0, 0, 0, 0.5);
    transform: rotate(var(--a)) translateY(calc(var(--coin) * -0.9)) rotate(calc(var(--a) * -1)) scale(0.72);
    opacity: 0.32;
    filter: grayscale(0.7) brightness(0.8);
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.5s ease;
}

#curtain .suit img {
    width: 58%;
    height: 58%;
    object-fit: contain;
}

/* A suit lights once the ring has passed it. */
#curtain .suit.lit {
    opacity: 1;
    filter: none;
    transform: rotate(var(--a)) translateY(calc(var(--coin) * -0.9)) rotate(calc(var(--a) * -1)) scale(1);
    box-shadow: 0 0 0 2px #e2b64a, 0 0 18px rgba(255, 210, 110, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ---- the painted name ---- */

#curtain .name {
    position: relative;
    width: min(78vw, calc(var(--coin) * 3.4));
    aspect-ratio: 1100 / 367;
    animation: curtain-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}

#curtain .name img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

/* The light sweeping the letters, cut to their own shape. */
#curtain .name::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 248, 220, 0.55) 50%, rgba(255, 255, 255, 0) 60%) no-repeat;
    background-size: 250% 100%;
    -webkit-mask: url(../art/door/title.png) center / contain no-repeat;
    mask: url(../art/door/title.png) center / contain no-repeat;
    animation: curtain-sweep 3.6s ease-in-out 1.2s infinite;
}

@keyframes curtain-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes curtain-sweep {
    0% { background-position: 130% 0; }
    55%, 100% { background-position: -30% 0; }
}

/* ---- lifted ---- */

/* The ring closes, the coin and everything with it rise toward the viewer in a flash of light, and the room behind shows. */
#curtain::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 10vmax;
    height: 10vmax;
    margin: -5vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 205, 0.95), rgba(255, 214, 120, 0.4) 40%, rgba(255, 214, 120, 0) 70%);
    opacity: 0;
    transform: scale(0.2);
    pointer-events: none;
}

#curtain.lifted {
    --ring: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#curtain.lifted::after {
    animation: curtain-flash 0.95s ease-out 0.12s both;
}

@keyframes curtain-flash {
    0% { opacity: 0; transform: scale(0.2); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: scale(14); }
}

#curtain.lifted .whole {
    transform: scale(1.35);
    filter: blur(3px) brightness(1.4);
}

#curtain.lifted .suit {
    opacity: 1;
    filter: none;
}

/* Upright and narrow: the name under the coin a little smaller. */
@media (max-aspect-ratio: 3/4) {
    #curtain {
        --coin: clamp(110px, 34vmin, 200px);
    }
}

/* Anybody who asked their browser for less motion gets the still picture, and the ring alone moves. */
@media (prefers-reduced-motion: reduce) {
    #curtain .coin .turn,
    #curtain .coin .gleam::after,
    #curtain .seal::before,
    #curtain .ring .run,
    #curtain .name,
    #curtain .name::after,
    #curtain.lifted::after {
        animation: none;
    }

    #curtain .dust {
        display: none;
    }

    #curtain.lifted .whole {
        transform: none;
        filter: none;
    }
}