:root {
    --bg: #1a1b1e;
    --panel: #242529;
    --accent: #4a6cf7;
    --text: #e6e6e6;
    --border: #3a3b3f;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, sans-serif;
}

header {
    background: linear-gradient(135deg, #4a6cf7, #6a8bff);
    padding: 22px;
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
    color: white;
}

/* img {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms ease, transform 300ms ease;
}

img.loaded {
  opacity: 1;
  transform: scale(1);
} */

/* img {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 300ms ease-out, transform 600ms cubic-bezier(.22,1.61,.36,1);
}

img.loaded {
  opacity: 1;
  transform: scale(1);
}
*/

/* img {                                                                                                                                                                                                                                                                                           
  transition: transform 300ms ease;
  transform-style: preserve-3d;
}

img:hover {
  transform: rotateX(6deg) rotateY(-6deg) scale(1.02);
} */

/* GOOD */
img {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

img.revealed {
  transition: opacity 400ms ease-in, transform 400ms ease-in;
  opacity: 1;
  transform: translateY(0);
}

img.image_thumbnail:hover {
  transition: none;
  opacity: 1;
  transform: scale(1.1);
  position: relative;
  z-index: 1000;
}

/* img:hover {
  box-sizing: border-box;
  border: 4px solid blue;
} */

/* intense img {
  opacity: 0;
  transform-origin: top left;
  transform: scale(3) translate(-20vw, -20vh);
  transition: transform 800ms ease, opacity 800ms ease;
}

img.revealed {
  opacity: 1;
  transform: scale(1) translate(0, 0);
} */

/* img.revealed {
  opacity: 1;
  transform: translateY(0);
} */

/* img {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

img.ready {
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

img.revealed {
  opacity: 1;
  transform: translateY(0);
} */

.card {
    background: var(--panel);
    padding: 5px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: hidden; /* horizontal scrollbar is shown only when vertical one is on */
}

input, select, button {
    background: #2d2f33;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px;
    border-radius: var(--radius);
}

.tab {
    background: #2d2f33;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 2px 12px 2px 12px;
    border-radius: var(--radius);
    border: 1px solid gray;
}

input:hover, select:hover, button:hover, .tab:hover {
    cursor: pointer;
    background: #4d4f53;
}

footer {
    clear: both;
    text-align: center;
    background-color: var(--color-footer-background);
    border-top: 1px solid var(--color-footer-border);
    width: 100%;
    min-height: 4rem;
    padding: 1rem 0;
    overflow: hidden
}

footer p {
    font-size: .9em
}

/* .thumbnails span.title,
.thumbnails span.source {
    width: 100%;
    color: var(--color-result-image-span-font);
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .5rem 0 0;
    font-size: .9rem;
    display: block;
    position: absolute;
    overflow: hidden
} */

.img-wrap {
    position: relative;
    display: inline-block; /* keeps the wrapper tight around the image */
}

.img-wrap .title {
    position: absolute;
    bottom: 0;
    left: 10px;
    /* left: 50%;
    transform: translateX(-50%); */
    background: rgba(0,0,0,0.6); /* optional: makes text readable */
    color: white;
    padding: 4px 8px;
    font-size: 14px;
    white-space: nowrap;
}