/* ------------------------------------------------------------------ *
 * Flow (v2) kiosk styles — "시골에서 살아남기"
 * Image-based: each screen is a full-bleed 4:3 artwork. Buttons are drawn
 * into the art; the engine overlays invisible .hit areas on top.
 * ------------------------------------------------------------------ */

html,
body {
    height: 100%;
    background: #000;
}

#kiosk {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Stage keeps the artwork's 4:3 ratio and scales to fit the viewport in
 * both dimensions (works landscape or portrait). */
#stage {
    aspect-ratio: 4 / 3;
    width: min(100vw, 133.333vh);
    height: min(75vw, 100vh);
}

.frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: fade 0.22s ease;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.frame-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Press feedback: a full-screen black scrim dims the base, with the crisp
 * pressed-state variant (highlighted button) on top of it so the choice pops.
 * Tune the dim with --press-dim-alpha (0.1 = 10% black). */
.frame {
    --press-dim-alpha: 0.8;
}

/* Middle layer: whole-screen black scrim */
.frame-scrim {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.frame.pressed .frame-scrim {
    opacity: var(--press-dim-alpha);
}

/* Top layer: crisp highlighted button */
.frame-press {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
}
.frame.pressed .frame-press {
    opacity: 1;
}

/* Whole-screen tap target (start screen) */
.tappable {
    cursor: pointer;
}

/* Hidden staff-only exit button, top-right corner of the start screen */
.exit-hit {
    position: absolute;
    top: 0;
    right: 0;
    width: 9%;
    height: 9%;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}
body.debug .exit-hit {
    background: rgba(0, 0, 255, 0.28);
    outline: 1px solid rgba(0, 0, 255, 0.6);
}

/* Invisible hit-areas over the drawn buttons. Transparent by design —
 * feedback comes from swapping to the pressed-state artwork. */
.hit {
    position: absolute;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Result screen: animated starburst background + transparent foreground.
 * Tune speeds with --rays-spin / --rays-spin-b. */
.frame--result {
    --rays-spin: 16s;
    --rays-spin-b: 24s;
    background: #fff; /* shows if a bg image is missing */
}

.result-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Each rays layer is oversized (covers the frame at any rotation) and
 * centered. The centering translate is in the BASE style (not just the
 * keyframe) so the background stays covered even if the animation doesn't
 * run — e.g. when the OS/browser has reduced motion. Explicit width+height
 * (same 4:3 as the image) avoid relying on `aspect-ratio`. */
.result-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 175%;
    height: 175%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    transform-origin: center;
    will-change: transform;
}
.result-rays--a {
    animation: rays-spin var(--rays-spin) linear infinite;
}
.result-rays--b {
    /* second field, counter-rotating + larger, so stars drift past */
    width: 200%;
    height: 200%;
    opacity: 0.45;
    mix-blend-mode: soft-light;
    animation: rays-spin var(--rays-spin-b) linear infinite reverse;
}
@keyframes rays-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Twinkle layer: sparkle stars over the rays, below the foreground */
.result-twinkle {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sparkle {
    position: absolute;
    aspect-ratio: 1;
    opacity: 0;
    transform: scale(0.3);
    animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}
/* Soft round radial glow bloom */
.sparkle::before {
    content: "";
    position: absolute;
    inset: -75%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.4) 30%,
        transparent 66%
    );
}
/* Crisp star centered inside the glow */
.sparkle::after {
    content: "";
    position: absolute;
    inset: 4%;
    background: #fff;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
    /* faint edge so the star reads on light backgrounds too */
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
@keyframes twinkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(35deg);
    }
}

/* Foreground content sits on top, static, undistorted (same 4:3 as frame) */
.result-fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* NOTE: intentionally NOT gated behind prefers-reduced-motion. The result
 * animation is a core part of this kiosk experience, and many Windows PCs
 * report reduced motion (OS "Animation effects" off), which would otherwise
 * silently disable it. */

/* Fallback when an image is missing (should not happen once art lands) */
.frame--placeholder {
    background: repeating-linear-gradient(
        45deg,
        #fdf6ec,
        #fdf6ec 20px,
        #f3e9d8 20px,
        #f3e9d8 40px
    );
}
.frame--placeholder::after {
    content: "이미지 준비중";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.35);
}

/* Optional: reveal hit-areas for alignment work — add ?debug to the URL */
body.debug .hit {
    background: rgba(255, 0, 0, 0.22);
    outline: 1px solid rgba(255, 0, 0, 0.6);
}