/* ============================================================
   JAMES APTER — Home Page Styles  (css/home.css)
   Requires: css/global.css
   ============================================================ */

/* ── Transparent nav (index.html only) ──────────────────────── */
.transparent-nav nav {
  background: transparent;
  border-bottom: none;
  position: fixed;
  width: 100%;
  isolation: isolate;
  transition: background 0.5s ease, border-color 0.5s ease;
}

.transparent-nav .nav-links a,
.transparent-nav .nav-avail {
  transition: color 0.5s ease;
}

/* Text uses difference blend — inverts automatically over any background.
   Applied only to links and avail, NOT the logo, so logo colors are preserved. */
.transparent-nav .nav-links,
.transparent-nav .nav-avail {
  color: var(--ink);
}

/* About (3rd), Contact (4th) + Available go white for right image */
.transparent-nav .nav-links a:nth-child(3),
.transparent-nav .nav-links a:nth-child(4),
.transparent-nav .nav-avail {
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Logo border lightened slightly so it reads over photos */
.transparent-nav .logo-j { border-color: rgba(255,255,255,0.4); }
.transparent-nav .logo-a { border-color: rgba(255,255,255,0.4); }
.transparent-nav .logo-dot { border-color: rgba(255,255,255,0.4); }

/* Once scrolled past hero — restore everything to normal */
.transparent-nav.scrolled nav {
  background: var(--cream);
  border-bottom: var(--border);
  width: 100%;
  isolation: auto;
}
.transparent-nav.scrolled .nav-links,
.transparent-nav.scrolled .nav-avail,
.transparent-nav.scrolled .nav-links a:nth-child(3),
.transparent-nav.scrolled .nav-links a:nth-child(4) {
  color: var(--ink);
  text-shadow: none;
}
.transparent-nav.scrolled .nav-links a:hover { opacity: 1; color: var(--blue); }
.transparent-nav.scrolled .logo-j { border-color: var(--ink); }
.transparent-nav.scrolled .logo-a { border-color: var(--ink); }
.transparent-nav.scrolled .logo-dot { border-color: var(--ink); }

/* ── Two-portrait Hero ───────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);  /* outer border all around */
  position: relative;
}

.hero-img {
  position: relative;
}

.hero-img--left {
  border-right: 2px solid var(--ink);  /* divider between images */
}

/* Images at natural size — bleed below fold */
.hero-img img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-ph {
  width: 100%;
  height: 100vh;
  display: block;
}

/* Sticky portfolio button — stays visible through hero + scroll sections */
.hero-cta-btn {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: var(--ink);
  border: var(--border);
  padding: 10px 22px;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: opacity .3s ease, background .15s, color .15s;
  z-index: 100;
  opacity: 1;
  pointer-events: auto;
}
.hero-cta-btn.hidden {
  opacity: 0;
  pointer-events: none;
}
.hero-cta-btn:hover {
  background: var(--ink);
  color: white;
}

@media (max-width: 600px) {
  .hero { grid-template-columns: 1fr; }
  .hero-img--left { border-right: none; border-bottom: 1px solid var(--cream3); }
}

/* ── Scroll Photo Reveal ─────────────────────────────────────── */
.scroll-reveal-outer {
  height: 450vh; /* taller = more scroll room = more spread out */
  position: relative;
}

.scroll-reveal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-bottom: var(--border);
  background: white;
}

.scroll-reveal-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each scattered photo */
.scroll-photo {
  position: absolute;
  top: 50%;
  left: var(--left, 20%);
  width: clamp(260px, 30vw, 440px);
  aspect-ratio: 3/2;
  transform: translateY(120%) rotate(var(--rot, 0deg));
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  background: var(--cream2);
  overflow: hidden;
}

/* Photos 2, 4, 5 are portrait */
.scroll-photo:nth-child(2),
.scroll-photo:nth-child(4),
.scroll-photo:nth-child(5) {
  aspect-ratio: 2/3;
  width: clamp(180px, 20vw, 300px);
}

.scroll-photo img,
.scroll-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* vertical offsets from center so photos scatter around the midpoint */
.scroll-photo:nth-child(1) { margin-top: -18%; }
.scroll-photo:nth-child(2) { margin-top: -28%; }
.scroll-photo:nth-child(3) { margin-top: -14%; }
.scroll-photo:nth-child(4) { margin-top: -8%;  }
.scroll-photo:nth-child(5) { margin-top: -10%; }

@media (max-width: 760px) {
  .scroll-photo { width: 60vw; }
  .scroll-photo:nth-child(2),
  .scroll-photo:nth-child(4),
  .scroll-photo:nth-child(5) { width: 44vw; }
}

/* ── Bio Block ───────────────────────────────────────────────── */
.bio-block {
  padding: 80px var(--pad-x);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bio-block-inner {
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.bio-name {
  font-family: var(--fd);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
}
.bio-text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--gray);
  max-width: 520px;
}
.bio-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}

/* ── Reddit Comments Stack ──────────────────────────────────── */
.comments-section {
  padding: 72px var(--pad-x);
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ── JAMES background text behind comments ── */
.comments-section {
  position: relative;
  overflow: hidden;
}

.comments-bg-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.comments-bg-inner {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: jamesBanner 18s linear infinite;
  flex-shrink: 0;
}

.comments-bg-inner span {
  font-family: var(--fd);
  font-size: clamp(100px, 16vw, 180px);
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 2px var(--cream3);
  letter-spacing: -2px;
  user-select: none;
  flex-shrink: 0;
}

/* Alternate letter colors subtly */
.comments-bg-inner span:nth-child(2) { -webkit-text-stroke-color: #f0e8d8; }
.comments-bg-inner span:nth-child(3) { -webkit-text-stroke-color: var(--cream3); }
.comments-bg-inner span:nth-child(4) { -webkit-text-stroke-color: #f0e8d8; }

@keyframes jamesBanner {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Keep comments content above the bg text */
.comments-intro,
.comments-stage,
.comments-hint {
  position: relative;
  z-index: 1;
}

.comments-intro {
  align-self: flex-start;
}

.comments-stage {
  position: relative;
  width: 100%;
  max-width: 680px;
  min-height: 360px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder shown before images are added */
.comments-placeholder {
  border: var(--bsm);
  background: var(--cream2);
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 0.06em;
}

/* Each comment screenshot card */
.comment-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  /* JS sets transform, z-index, opacity */
  translate: -50% -50%;
  width: 88%;
  max-width: 600px;
  background: white;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.35s var(--ease), z-index 0s, opacity 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.comment-card img {
  width: 100%;
  height: auto;
  display: block;
}

.comment-card:hover {
  box-shadow: 0 8px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
}

.comments-hint {
  font-size: 10px;
  color: var(--gray-l);
  letter-spacing: 0.1em;
}

/* ── Turtle golf section ────────────────────────────────────── */
.turtle-section {
  border-bottom: var(--border);
  display: flex;
  justify-content: center;
  background: white;
  overflow: hidden;
}

/* ── Reach teaser ───────────────────────────────────────────── */
.reach-teaser {
  padding: 72px var(--pad-x);
  border-bottom: var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.reach-half {
  padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 220px;
  border: var(--bsm);
  position: relative; overflow: hidden;
}
.reach-half:first-child { background: var(--cream); margin-right: -1px; }
.reach-half:last-child  { background: white; }

.reach-platform-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.1em; margin-bottom: 20px;
}
.r-icon    { width: 22px; height: 22px; flex-shrink: 0; }
.reach-num { font-family: var(--fd); font-size: clamp(48px, 6vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -2px; margin-bottom: 8px; }
.reach-num.r-red  { color: var(--red); }
.reach-num.r-blue { color: var(--blue); }
.reach-desc { font-size: 11px; color: var(--gray); line-height: 1.7; margin-bottom: 24px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .collage-grid    { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px; }
  .collage-cell--tall { grid-row: span 1; }
  .collage-intro   { flex-direction: column; gap: 4px; }
  .reach-teaser    { grid-template-columns: 1fr; }
  .reach-half:first-child { margin-right: 0; margin-bottom: -1px; }
  .comments-stage  { min-height: 280px; }
}