/* ═══════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg-0:       #0a0a0a;
  --bg-1:       #111111;
  --bg-2:       #181818;
  --bg-3:       #1e1e1e;
  --border:     #2a2a2a;
  --border-hi:  #3a3a3a;

  --amber:      #f0a832;
  --amber-dim:  #c48a28;
  --amber-glow: rgba(240,168,50,.18);

  --green:      #4ade80;
  --red:        #f87171;

  --text-0:     #f0ece4;
  --text-1:     #a8a49c;
  --text-2:     #636058;

  --font-head:  'Syne', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  --radius:     6px;
  --radius-lg:  12px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  background: var(--bg-0);
  color:      var(--text-0);
  font-family:var(--font-mono);
  font-size:  14px;
  line-height:1.55;
  min-height: 100vh;
  position:   relative;
  overflow-x: hidden;
}

/* ─── Grain canvas (fixed, no pointer events) ─── */
#grainCanvas {
  position: fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.35;
}

/* ─── Everything above the grain ─── */
header, main { position:relative; z-index:1; }

/* ─── links ─── */
a { color:inherit; text-decoration:none; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════ */
.header {
  padding: 56px 24px 40px;
  text-align:center;
  /* subtle top-edge amber glow */
  background: linear-gradient(180deg, rgba(240,168,50,.06) 0%, transparent 60%);
}
.header__inner { max-width:640px; margin:0 auto; }

.header__badge {
  display:inline-block;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--amber);
  margin-bottom:16px;
}

.header__title {
  font-family:var(--font-head);
  font-weight:800;
  font-size: clamp(28px, 5vw, 42px);
  line-height:1.1;
  color:var(--text-0);
}
.header__title em {
  font-style:normal;
  color:var(--amber);
}

.header__sub {
  margin-top:12px;
  color:var(--text-2);
  font-size:13px;
}

/* ═══════════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.main {
  max-width:860px;
  margin:0 auto;
  padding:0 24px 80px;
}

/* ═══════════════════════════════════════════════════════════════════
   UPLOAD ROW
   ═══════════════════════════════════════════════════════════════════ */
.upload-row {
  display:flex;
  align-items:stretch;
  gap:16px;
}

/* ── Arrow between zones ── */
.upload-row__arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--text-2);
}
.upload-row__arrow svg { width:28px; height:28px; }

/* ═══════════════════════════════════════════════════════════════════
   DROPZONE
   ═══════════════════════════════════════════════════════════════════ */
.dropzone {
  flex:1;
  min-width:0;                       /* flex child shrink */
  position:relative;
  border:1.5px dashed var(--border-hi);
  border-radius:var(--radius-lg);
  background:var(--bg-1);
  padding:36px 20px 28px;
  text-align:center;
  cursor:pointer;
  transition: border-color .25s, background .25s, box-shadow .25s;
  overflow:hidden;
}

/* label floating top-left */
.dropzone::before {
  content: attr(data-label);
  position:absolute;
  top:-1px; left:18px;
  background:var(--bg-0);
  padding:0 8px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
  transform:translateY(-50%);
}

.dropzone:hover,
.dropzone.drag-over {
  border-color:var(--amber);
  background:var(--bg-2);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.dropzone__input {
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
  /* must stay on top so clicks hit it */
  z-index:2;
}

.dropzone__icon {
  width:48px; height:48px;
  margin:0 auto 10px;
  color:var(--text-2);
  transition:color .25s;
}
.dropzone:hover .dropzone__icon { color:var(--amber-dim); }

.dropzone__text {
  display:block;
  font-size:14px;
  color:var(--text-1);
  font-weight:500;
}
.dropzone__sub {
  display:block;
  font-size:12px;
  color:var(--text-2);
  margin-top:4px;
}
.dropzone__sub u { color:var(--amber-dim); }

/* ── Preview layer (hidden until image chosen) ── */
.dropzone__preview {
  position:absolute; inset:0;
  display:none;                      /* toggled by JS */
  z-index:1;
}
.dropzone__preview img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--radius-lg);
}
/* semi-transparent dark overlay so "change" hint is readable */
.dropzone__preview::after {
  content:'Change image';
  position:absolute; inset:0;
  background:rgba(0,0,0,.52);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:var(--text-0);
  opacity:0;
  transition:opacity .2s;
  border-radius:var(--radius-lg);
}
.dropzone:hover .dropzone__preview::after { opacity:1; }

/* ── "has file" state ── */
.dropzone.has-file .dropzone__icon,
.dropzone.has-file .dropzone__text,
.dropzone.has-file .dropzone__sub { display:none; }
.dropzone.has-file .dropzone__preview { display:block; }
.dropzone.has-file { border-style:solid; border-color:var(--border); padding:0; }

/* ═══════════════════════════════════════════════════════════════════
   GENERATE BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.submit-wrap {
  margin-top:32px;
  text-align:center;
}

.btn-generate {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--amber);
  color:#0a0a0a;
  border:none;
  border-radius:var(--radius);
  padding:14px 48px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition: background .2s, opacity .2s, transform .1s;
}
.btn-generate:hover:not(:disabled) {
  background:var(--amber-dim);
}
.btn-generate:active:not(:disabled) { transform:scale(.97); }

.btn-generate:disabled {
  opacity:.32;
  cursor:not-allowed;
}

/* spinner ring (hidden when not running) */
.btn-generate__spinner {
  display:none;
  width:18px; height:18px;
  border:2.5px solid #0a0a0a;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .6s linear infinite;
}
.btn-generate.running .btn-generate__spinner { display:block; }
.btn-generate.running .btn-generate__label   { opacity:.55; }

@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════
   STATUS / TIMELINE
   ═══════════════════════════════════════════════════════════════════ */
.status-section {
  margin-top:40px;
  display:none;                      /* shown by JS */
}
.status-section.visible { display:block; }

.timeline {
  display:flex;
  justify-content:center;
  gap:0;
  position:relative;
}

/* connecting line behind dots */
.timeline::before {
  content:'';
  position:absolute;
  top:10px; left:50%;
  transform:translateX(-50%);
  width:62%; height:1.5px;
  background:var(--border);
  z-index:0;
}

.timeline__item {
  flex:1;
  max-width:160px;
  text-align:center;
  position:relative;
  z-index:1;
}

.timeline__dot {
  width:20px; height:20px;
  border-radius:50%;
  border:2px solid var(--border-hi);
  background:var(--bg-1);
  margin:0 auto 8px;
  position:relative;
  transition:border-color .3s, background .3s, box-shadow .3s;
}

.timeline__label {
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-2);
  text-transform:uppercase;
  transition:color .3s;
}

/* ── active ── */
.timeline__item.active .timeline__dot {
  border-color:var(--amber);
  background:var(--amber);
  box-shadow:0 0 10px var(--amber-glow);
}
.timeline__item.active .timeline__label { color:var(--amber); }

/* ── done ── */
.timeline__item.done .timeline__dot {
  border-color:var(--green);
  background:var(--green);
  box-shadow:none;
}
.timeline__item.done .timeline__label { color:var(--green); }

/* ── error ── */
.timeline__item.error .timeline__dot {
  border-color:var(--red);
  background:var(--red);
}
.timeline__item.error .timeline__label { color:var(--red); }

/* ── pulsing ring while active ── */
.timeline__item.active .timeline__dot::after {
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid var(--amber);
  opacity:0;
  animation:pulse .9s ease-out infinite;
}
@keyframes pulse {
  0%   { transform:scale(.8); opacity:.7; }
  100% { transform:scale(1.5); opacity:0; }
}

/* log text */
.status-log {
  text-align:center;
  margin-top:18px;
  font-size:12px;
  color:var(--text-2);
  min-height:1.4em;
  font-style:italic;
}
.status-log.err { color:var(--red); font-style:normal; }

/* ═══════════════════════════════════════════════════════════════════
   RESULT
   ═══════════════════════════════════════════════════════════════════ */
.result-section {
  margin-top:56px;
  display:none;
}
.result-section.visible { display:block; animation:fadeUp .4s ease; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0);    }
}

.result-section__heading {
  font-family:var(--font-head);
  font-weight:700;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-2);
  text-align:center;
  margin-bottom:18px;
}

.result-section__frame {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-1);
  /* subtle inner shadow */
  box-shadow: inset 0 2px 12px rgba(0,0,0,.45);
}
.result-section__frame img {
  display:block;
  width:100%;
  height:auto;
}

/* download button */
.btn-download {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:22px auto 0;
  padding:10px 28px;
  border:1.5px solid var(--amber);
  border-radius:var(--radius);
  color:var(--amber);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  text-align:center;
  transition:background .2s, color .2s;
}
.btn-download:hover {
  background:var(--amber);
  color:#0a0a0a;
}
.btn-download svg { width:18px; height:18px; }

/* center the download btn */
.result-section { text-align:center; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .upload-row { flex-direction:column; }
  .upload-row__arrow { transform:rotate(90deg); margin:-4px 0; }
  .timeline { flex-wrap:wrap; gap:12px; }
  .timeline::before { display:none; }
}

.step-block {
  max-width: 860px;
  margin: 0 auto 2.5rem;
  animation: stepIn 0.35s cubic-bezier(.22,1,.36,1) both;
}

.step-block--hidden {
  display: none;
}

/* reveal step 2 with a slight slide-down */
.step-block--hidden + .step-block,
.step-block:not(.step-block--hidden) {
  animation: stepIn 0.4s cubic-bezier(.22,1,.36,1) both;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.step-block__header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.step-block__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.35);
}

.step-block__title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.step-block__hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255,255,255,.3);
  margin-left: auto;
}

/* ─── Person gallery grid ─────────────────────────────────────────── */
.person-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.person-gallery__loading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: rgba(255,255,255,.4);
  grid-column: 1 / -1;
  padding: 1.5rem 0;
}

/* ─── Person card (thumbnail button) ───────────────────────────────── */
.person-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  outline: none;
}

.person-card:hover:not(.locked) {
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
}

.person-card.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}

.person-card.selected::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: #fff;
  color: #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.person-card.locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.person-card.locked.selected {
  opacity: 0.7;   /* keep selected one a bit brighter */
}

.person-card__img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1a1a1a;
}

.person-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.person-card:hover:not(.locked) .person-card__img-wrap img {
  transform: scale(1.04);
}

.person-card__name {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.67rem;
  color: rgba(255,255,255,.5);
  padding: 0.45rem 0.5rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ─── Group dropzone locked state ──────────────────────────────────── */
.dropzone.locked {
  opacity: 0.5;
  pointer-events: none;
}