:root{
    --page-bg: #fbfcfd;;
    --hg-max-stack: 30;
    --hg-drag-threshold: 40; /* pointer minimum drag to show new image */
    --hg-spawn-threshold: 48; /* pixels */
    --hg-landscape-scale : 1.2; /* scaling factor for landscape images */
    --hg-last-three-hold: 1000; /*hold value for last images after movement stops*/
    --hg-mouse-stop-delay: 120ms; /* how long a mouse needs to stop to kickoff last 3 fade */
    --hg-img-size: clamp(120px, 20vmin, 420px);
    --hg-fade-duration: 1200ms;
    --hg-min-opacity: 0.28; /* min opacity for last permanent images */
    --hg-visible-count: 10;
    --hg-permanent-count: 5;
}


html,
body {
    height: 100%;
}

body,
.hg-wrap {
    background: #ffffff !important;
    color: #000;  /* optional: switch text color */
}

body[data-page="playground"] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body[data-page="playground"] main#content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body[data-page="playground"] .hg-wrap {
    flex: 1;
    min-height: 0;
}

.hg-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
}


.hg-canvas{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events: auto;
    background: var(--page-bg);      /* white by default from :root */
    background-color: var(--page-bg);
    z-index: 1;
}

.hg-hint{
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 2;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-size: 0.95rem;
    color: #111; /* dark text on white */
    background: rgba(255,255,255,0.88);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    backdrop-filter: blur(6px);
}
/* base image */
.hg-img{
    position:absolute;
    left:0; top:0;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    user-select: none;
    will-change: transform, opacity;
    width: var(--hg-img-size);
    height: auto;
    max-width: 420px;
    max-height: 280px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: opacity 280ms ease, transform 220ms ease;
    opacity: 1;
}

/* spawn quick pop-in styling (visible immediately) */
.hg-img.spawn{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease-out;
}

/* full decay: fade to zero and scale slightly up, then removed by JS */
@keyframes hg_decay_full {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
.hg-img.decay-full {
    animation: hg_decay_full var(--hg-fade-duration) forwards;
}

.hg-img.hg-landscape {
    /* nothing required — scaling applied inline — but you can tweak visual treatment here */
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    border-radius: 6px;
}

/* partial decay: fade to a minimum opacity and keep in DOM */
@keyframes hg_decay_partial {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: var(--hg-min-opacity); transform: translate(-50%, -50%) scale(1.02); }
}
.hg-img.decay-partial {
    animation: hg_decay_partial var(--hg-fade-duration) forwards;
}

.hg-img.hovered {
    opacity: 1 !important;
    /* reset any dimming filter */
    filter: none !important;
    /*filter: saturate(1.05) brightness(1.02) !important;*/
    /* make hover image visually pop slightly */
    transform: translate(-50%, -50%) scale(1.04) !important;
    transition: transform 160ms cubic-bezier(.2,.9,.2,1), opacity 160ms ease-out !important;
    /* ensure it sits above other tiles while hovered */
    z-index: 1 !important;
}


/* ensure later images visually stack on top */
/*.hg-img[data-z] { z-index: var(--z); }*/

/* debug helper (optional): quickly make images more visible during dev */
/* .hg-img { outline: 1px dashed rgba(255,255,255,0.06); } */

/* ... keep your existing :root, body, hg-wrap, hg-canvas, hg-img styles ... */

/* --- UI Layer (Centered) --- */
.hg-ui-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none; /* Allows clicks to pass through to the canvas */
}

/* Centered Loader */
.hg-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.hg-loader-bar {
    width: 0%;
    height: 100%;
    background-color: #111;
    transition: width 0.1s linear;
}

/* Centered Hint Text */
.hg-start-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Keeps it dead center */
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #111;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Visibility States */
.hg-loader.is-hidden {
    opacity: 0;
}

.hg-start-hint.is-visible {
    opacity: 1;
    /* Optional: Add a slight float up animation */
    animation: hg_fade_in_up 0.8s ease forwards;
}

.hg-start-hint.is-hidden {
    opacity: 0;
}

@keyframes hg_fade_in_up {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}