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

:root {
  --black: #080808;
  --white: #f4f4f4;
  --gap:   3px;
  --nav:   52px;
  --cap:   44px;
  --ease:  cubic-bezier(.4,0,.2,1);
}

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  font-family: 'Space Mono', monospace;
}

/* ── NAV ─────────────────────────────────────────── */
nav {
  position: fixed; top:0; left:0; right:0;
  height: var(--nav);
  background: rgba(8,8,8,.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; z-index: 900;
}
.nav-brand {
  font-family: 'Anton', sans-serif; font-size: 1.25rem;
  letter-spacing: .12em; color: var(--white);
  cursor: pointer; text-decoration: none; transition: opacity .25s;
}
.nav-brand:hover { opacity: .5; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 1.8rem; }
.nav-links a {
  font-family: 'Anton', sans-serif; font-size: .68rem;
  letter-spacing: .22em; color: rgba(244,244,244,.4);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links .dl {
  border: 1px solid rgba(244,244,244,.18); padding: .38rem 1rem;
  color: rgba(244,244,244,.55);
  transition: background .25s, color .25s, border-color .25s;
}
.nav-links .dl:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ── GALLERY ─────────────────────────────────────── */
#gallery {
  scroll-behavior: smooth; 
  position: absolute; top: var(--nav); left:0; right:0; bottom:0;
  display: flex; 
  overflow-x: auto; 
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; 
  user-select: none; -webkit-user-select: none;
}
#gallery::-webkit-scrollbar { display: none; }

.panel {
  flex-shrink: 0;
  width: 100vw;
  height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  scroll-snap-align: start; 
  scroll-snap-stop: always;
}

/* ── COVER ───────────────────────────────────────── */
.cover { background:var(--black); flex-direction:column; gap:0; }
.cover-dino { width: min(52vw,520px); }
.cover-title {
  font-family:'Anton',sans-serif;
  font-size: clamp(6.5rem,19vw,17rem);
  line-height:.88; letter-spacing:.01em;
  color:var(--white); text-align:center;
}
.cover-sub {
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:clamp(.5rem,1.1vw,.8rem); letter-spacing:.5em;
  color:var(--white); text-align:center; margin-top:1.1rem;
}

/* ── TEXT STATEMENT PAGES ────────────────────────── */
.text-panel { background:var(--black); padding:0 10vw; }
.text-panel p {
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:clamp(.62rem,1.1vw,.9rem); line-height:1.95;
  letter-spacing:.06em; color:var(--white);
  text-align:center; max-width:660px;
}

/* ── SECTION INTROS ──────────────────────────────── */
.section-intro { flex-direction:column; gap:2rem; }
.section-intro.dark  { background:var(--black); color:var(--white); }
.section-intro.light { background:var(--white);  color:var(--black); }
.section-art { width:min(46vw,480px); }
.section-heading {
  font-family:'Anton',sans-serif;
  font-size:clamp(4.5rem,14vw,13rem);
  letter-spacing:.03em; line-height:1; text-align:center;
}

/* ── SHARED IMAGE SLOT ───────────────────────────── */
.slot { overflow:hidden; background:#111; }
.slot img {
  width:100%; height:100%; object-fit:cover; display:block;
  cursor:pointer; background:#1c1c1c;
  transition: opacity .25s var(--ease);
}
.slot img:hover { opacity:.8; }
.slot.lt { background:#e0e0e0; }
.slot.lt img { background:#d0d0d0; }

/* ── FULL-BLEED PHOTO ────────────────────────────── */
.photo { background:#111; width:100%; height:100%; }
.photo img {
  width:100%; height:100%; object-fit:cover;
  display:block; cursor:pointer; background:#1c1c1c;
  transition: opacity .25s var(--ease);
}
.photo img:hover { opacity:.8; }

/* ── CAPTIONED ───────────────────────────────────── */
.captioned { flex-direction:column; align-items:stretch; }
.captioned.dk { background:var(--black); }
.captioned.lt { background:var(--white); }
.c-img { flex:1; overflow:hidden; background:#111; min-height:0; }
.c-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  cursor:pointer; background:#1c1c1c;
  transition: opacity .25s var(--ease);
}
.c-bar {
  flex-shrink:0; height:var(--cap);
  display:flex; align-items:center; justify-content:center;
}
.captioned.dk .c-bar { background:var(--black); border-top:1px solid rgba(255,255,255,.06); }
.captioned.lt .c-bar { background:var(--white);  border-top:1px solid rgba(0,0,0,.08); }
.c-word {
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
}
.captioned.dk .c-word { color:var(--white); }
.captioned.lt .c-word { color:var(--black); }

/* ── STRIP LAYOUTS ───────────────────────────────── */
.sl, .sr { background:var(--black); align-items:stretch; }
.sl-strip, .sr-strip { flex-shrink:0; overflow:hidden; background:#111; }
.sl-strip img, .sr-strip img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; transition: opacity .25s; }
.sl-stack, .sr-stack { flex:1; display:flex; flex-direction:column; gap:var(--gap); }

/* ── HALF-SPLIT ──────────────────────────────────── */
.hs { gap:var(--gap); align-items:stretch; background:var(--black); }
.hs-slot { flex:1; overflow:hidden; background:#111; }
.hs-slot img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }

/* ── CREDITS ─────────────────────────────────────── */
.credits { background:var(--white); flex-direction:column; gap:1.4rem; }
.qr-wrap { width:min(190px,26vw); aspect-ratio:1; background:#111; padding:.6rem; }
.qr-wrap img { width:100%; height:100%; object-fit:contain; display:block; background:#eee; }
.credits-copy { font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(.52rem,1vw,.75rem); letter-spacing:.22em; color:var(--black); text-align:center; }

/* ── MODAL ───────────────────────────────────────── */
.modal-bd {
  position:fixed; inset:0; background:rgba(0,0,0,.94);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none; transition:opacity .28s;
}
.modal-bd.open { opacity:1; pointer-events:all; }
.modal-card {
  background:#0d0d0d; border:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column;
  width:min(92vw,860px); max-height:92vh; overflow:hidden;
  position:relative; transform:translateY(14px) scale(.97);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.modal-bd.open .modal-card { transform:translateY(0) scale(1); }
.modal-x {
  position:absolute; top:.8rem; right:.8rem;
  width:32px; height:32px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--white); font-family:'Space Mono',monospace; font-size:.9rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:10; transition:background .2s;
}
.modal-img-wrap { background:#0a0a0a; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:1; min-height:160px; max-height:65vh; }
.modal-img-wrap img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.modal-foot { flex-shrink:0; padding:1.2rem 1.6rem; border-top:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.modal-meta { flex:1; min-width:0; }
.modal-file { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.06em; color:rgba(244,244,244,.28); margin-bottom:.35rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-buy { font-family:'Anton',sans-serif; font-size:1.3rem; letter-spacing:.06em; color:var(--white); }
.modal-cta { display:flex; align-items:center; gap:1.1rem; flex-shrink:0; }
.modal-price { font-family:'Anton',sans-serif; font-size:2rem; color:var(--white); }
.btn-buy { font-family:'Space Mono',monospace; font-weight:700; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; background:var(--white); color:var(--black); border:1px solid var(--white); padding:.8rem 1.6rem; cursor:pointer; transition:background .2s, color .2s; }
.btn-buy:hover { background:transparent; color:var(--white); }

/* ── SCROLL HINT ─────────────────────────────────── */
.hint {
  position:fixed; bottom:1.3rem; right:1.8rem;
  font-family:'Space Mono',monospace; font-size:.52rem; letter-spacing:.3em;
  color:rgba(244,244,244,.18); z-index:100; pointer-events:none;
  display:flex; align-items:center; gap:.7rem;
  animation:hint 7s ease forwards .6s; opacity:0;
}
.hint::after { content:''; display:block; width:28px; height:1px; background:rgba(244,244,244,.18); }
@keyframes hint {
  0%{opacity:0;transform:translateX(6px)} 12%{opacity:1;transform:translateX(0)}
  80%{opacity:1} 100%{opacity:0;transform:translateX(-4px)}
}

/* ── WELCOME POPUP ── */
.welcome-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

.welcome-content {
  text-align: center;
  padding: 2rem;
}

.welcome-content h2 {
  font-family: 'Anton', sans-serif;
  font-size: 4rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.btn-continue {
  margin-top: 2rem;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  padding: 1rem 2.5rem;
  font-family: 'Space Mono', monospace;
  cursor: pointer;
  letter-spacing: 0.2em;
}

.btn-continue:hover {
  background: var(--white);
  color: var(--black);
}