/* =============================================================================
   style.css
   ============================================================================= */

/* ---- custom font (local .ttf) -------------------------------------------- */
@font-face {
  font-family: 'Hypnosis';
  src: url('../fonts/Hypnosis.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --text-color: #ffffff; /*ececec*/
  --font-mono: 'DM Sans', 'DejaVu Sans Mono', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

#canvas-holder {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Text overlay sits above the canvas. It is transparent to clicks EXCEPT on
   its actual text children, so the canvas nav/click still works everywhere. */
#text-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#text-overlay .g-title-link {
  text-decoration: none; cursor: pointer; pointer-events: auto;
}
#text-overlay .g-title-link:hover { text-decoration: underline; }

#text-overlay .g-title,
#text-overlay .g-author,
#text-overlay .g-credits {
  position: absolute;
  color: var(--text-color);
  font-family: var(--font-mono);
  font-weight: 350;
  line-height: 1.35;
  letter-spacing: 0.02em;
  pointer-events: auto;               /* selectable */
  user-select: text;
  -webkit-user-select: text;
  transition: opacity 120ms linear;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

#text-overlay .g-author {
  opacity: 0.95;
}

#text-overlay .g-credits {
  text-decoration: none;
  color: var(--text-color);
}
#text-overlay .g-credits:hover {
  text-decoration: underline;
}

/* ------------------------------- intro ------------------------------------ */
#intro-overlay {
  position: fixed; inset: 0;
  z-index: 20;
  font-family: var(--font-mono);
}
#intro-overlay .intro-click,
#intro-overlay .intro-col { position: absolute; }

#intro-overlay .intro-click {
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

#intro-overlay .intro-col { color: var(--text-color); }
#intro-overlay .intro-title  { font-weight: 500; line-height: 1.1;  margin-bottom: 0.35em; text-align: right; }
#intro-overlay .intro-author {
  display: block;
  text-align: right;
  margin-bottom: 2.4em;   /* breathing space before the body */
}
#intro-overlay .intro-body   { line-height: 1.4; }

/* Children don't intercept the click, so a click anywhere enters the gallery. */
#intro-overlay * { pointer-events: none; user-select: text; -webkit-user-select: text; }
#intro-overlay .intro-click,
#intro-overlay .intro-author-link {
  pointer-events: auto;
  cursor: pointer;
}
#intro-overlay .intro-author-link { text-decoration: none; }
#intro-overlay .intro-author-link:hover { text-decoration: underline; }

/* ------------------------------ home title -------------------------------- */
#home-title {
  position: fixed;
  z-index: 15;                 /* above canvas, below the intro overlay (20) */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  user-select: text;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
/*#home-title:hover { text-decoration: underline; }*/

/* selection colour */
::selection { background: rgba(255,255,255,0.25); color: #fff; }

#home-title,
#intro-overlay .intro-title {
  font-family: 'Hypnosis', var(--font-mono);
}
/*subtitle*/
#intro-overlay .intro-subtitle {
  line-height: 1.2;
  margin-bottom: 0.9em;
  text-align: right;
}
#intro-overlay .intro-body em { font-style: italic; }

/* ----------------------------- credits strip ------------------------------ */
#credits-strip {
  position: fixed;
  z-index: 18;                      /* above gallery text, below intro */
  font-family: var(--font-mono);
  line-height: 1.5;
  letter-spacing: 0.02em;
  overflow-y: auto;                 /* scrolls if the list is taller */
  transform: translateY(100vh);     /* closed: parked below the screen */
  visibility: hidden;
  /* closing: slide down, THEN hide (visibility waits for the slide) */
  transition:
    transform var(--cs-dur, 700ms) var(--cs-ease, ease),
    visibility 0s linear var(--cs-dur, 700ms);
  user-select: text;
  -webkit-user-select: text;
}
#credits-strip.open {
  transform: translateY(0);
  visibility: visible;
  /* opening: show immediately, then slide up */
  transition:
    transform var(--cs-dur, 700ms) var(--cs-ease, ease),
    visibility 0s linear 0s;
}
/* keep it visible while it slides down, then hide it */
#credits-strip:not(.open) { transition-delay: 0s, var(--cs-hide-delay, 700ms); }

#credits-strip .cs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.6em;
}
#credits-strip .cs-heading { font-weight: 600; }
#credits-strip .cs-section { margin-bottom: 1.4em; }
#credits-strip .cs-name    { padding-left: 1.2em; }
#credits-strip a,
#credits-strip a:link,
#credits-strip a:visited {
  color: inherit;                 /* = textColor from config (white) */
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms linear;
}
#credits-strip a:hover {
  color: var(--cs-hover);         /* = linkHoverColor from config */
  text-decoration: var(--cs-hover-deco);
}
#credits-strip .cs-close:hover { color: inherit; }

#credits-label {
  position: fixed;
  z-index: 19;
  color: var(--text-color);
  font-family: var(--font-mono);
  font-weight: 350;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  cursor: pointer;
  user-select: text;
  -webkit-user-select: text;
}
#credits-label:hover { text-decoration: underline; }
/* ------------------------------- sound icon ------------------------------- */
#text-overlay .g-sound {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: var(--snd-color, #fff);
  cursor: pointer;
  pointer-events: auto;
  /*filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7));   /* readable on light images */
  transition: color 150ms linear;
}
#text-overlay .g-sound:hover { color: var(--snd-hover, #BC7CFF); }
#text-overlay .g-sound:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
#text-overlay .g-sound svg { display: block; width: 100%; height: 100%; }

/* ------------------------------ title image ------------------------------- */
.title-img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;            /* keeps the ratio even if the space is narrower */
  object-position: left center;
  user-select: none;
  -webkit-user-select: none;
}
#intro-overlay .intro-title .title-img {
  margin-left: auto;
  object-position: right center;
}
/* ------------------------------ loader ------------------------------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
#loader.is-done { opacity: 0; visibility: hidden; }

.loader-dots { display: flex; gap: 0.9em; font-size: 12px; }
.loader-dots span {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #fff;
  animation: loader-dot 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.loader-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loader-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-dots span { animation-duration: 2.4s; }
}

#about-link {
  position: fixed;
  z-index: 15;                       /* same layer as the gallery title */
  color: var(--about-color, #fff);
  font-family: var(--font-mono);
  font-weight: 350;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: color 150ms linear;
}
#about-link:hover { color: var(--about-hover, #FFF); }
#about-link:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }