/* egatomx.com v44: the close-up belt and its reader (ported from the haiseed.ai candidate belt, 2026-10-26).
   Before belt-v44.js runs, the seven cards are a plain horizontal row that scrolls natively and nothing is hidden.
   The script adds belt-ready to the .closeups root (plus belt-flat on phones and belt-static under reduced motion),
   belt-copy to the loop copies and is-open to the reader while it is open. Only transform and opacity animate. */

.closeups{--belt-bg:#080808;--belt-card:#141414;--belt-ink:#f5f5f3;--belt-soft:#bcbcbc;--belt-green:#48bb7a;--belt-ease:var(--ease-out,cubic-bezier(.23,1,.32,1));--belt-card-w:360px;--belt-gap:28px;position:relative;color:var(--belt-ink);font-family:var(--font-body,"Hanken Grotesk","Helvetica Neue",Arial,sans-serif)}
@media(max-width:1023px){.closeups{--belt-card-w:min(78vw,300px);--belt-gap:14px}}

/* The row before the script, and the native snap row under reduced motion. */
.belt-view{position:relative}
.belt-track{display:flex;gap:var(--belt-gap);margin:0;padding:8px 24px 24px;list-style:none;overflow-x:auto;scrollbar-width:none}
.belt-track::-webkit-scrollbar{display:none}
.belt-card{position:relative;display:flex;flex:0 0 var(--belt-card-w);min-width:0;will-change:transform}
.belt-open{display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;width:100%;min-width:0;margin:0;padding:0 0 20px;border:0;border-radius:18px;overflow:hidden;background:var(--belt-card);color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);-webkit-tap-highlight-color:transparent}
.belt-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#101010}
.belt-media img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.belt-title{display:block;margin:16px 20px 0;font-size:1rem;line-height:1.35;font-weight:600}
.belt-lead{display:block;margin:6px 20px 0;font-size:.875rem;line-height:1.5;color:var(--belt-soft)}

/* Previous, Pause or Play, Next: 44 px circles. Hidden until the script runs, because they do nothing without it. */
.belt-controls{display:none;justify-content:center;gap:10px;margin:4px 0 0}
.closeups.belt-ready .belt-controls{display:flex}
.belt-ctl{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#242424;color:var(--belt-ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.belt-ctl[hidden]{display:none}
.belt-ctl::before{content:"";display:block;box-sizing:border-box}
.belt-ctl[data-belt-prev]::before,.belt-ctl[data-belt-next]::before{width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(2px) rotate(45deg)}
.belt-ctl[data-belt-next]::before{transform:translateX(-2px) rotate(-135deg)}
.belt-ctl[data-belt-toggle]::before{width:11px;height:13px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.belt-ctl[data-belt-toggle][aria-pressed=true]::before{width:0;height:0;margin-left:3px;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
@media(hover:hover) and (pointer:fine){
  .belt-ctl{transition:transform 140ms var(--belt-ease)}
  .belt-ctl:hover{background:#3e3e3e}
  .belt-ctl:active{transform:scale(.97)}
}
.belt-ctl:focus-visible,.belt-open:focus-visible,.reader-close:focus-visible{outline:3px solid #a4efbd;outline-offset:3px}
.belt-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}

/* The belt: cards placed by the script on a gentle curve (computers) or a flat moving row (phones). clip rather
   than hidden, so native focus scrolling cannot move the track; a keyboard-focused card is centred by the script.
   The perspective sits on the track, the cards' own parent: a browser applies perspective to direct children only,
   and Chromium cannot hit-test cards inside a preserve-3d track, so the haiseed placement (perspective on the view)
   would render without depth and the copies would not take clicks. */
.closeups.belt-ready:not(.belt-static) .belt-view{overflow:hidden;overflow:clip;padding:28px 0 36px;touch-action:pan-y pinch-zoom;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.closeups.belt-ready:not(.belt-static) .belt-track{position:relative;display:block;overflow:visible;margin:0;padding:0;perspective:1700px;-webkit-user-select:none;user-select:none}
.closeups.belt-ready:not(.belt-static) .belt-card{position:absolute;top:0;left:50%;flex:none;width:var(--belt-card-w);margin:0 0 0 calc(var(--belt-card-w) / -2)}
.closeups.belt-ready.belt-flat:not(.belt-static) .belt-view{padding:12px 0 20px;-webkit-mask-image:none;mask-image:none}
.closeups.belt-ready.belt-flat:not(.belt-static) .belt-track{perspective:none}

/* Reduced motion: a native snap-scroll row, the loop copies hidden, no drift, no Pause button, no transitions. */
.closeups.belt-static .belt-track{scroll-snap-type:x mandatory;scroll-padding-inline:24px}
.closeups.belt-static .belt-card{scroll-snap-align:start}
.closeups.belt-static .belt-copy{display:none}
@media(prefers-reduced-motion:reduce){
  .belt-track{scroll-snap-type:x mandatory;scroll-padding-inline:24px}
  .belt-card{scroll-snap-align:start}
  .belt-copy{display:none}
  .belt-ctl[data-belt-toggle]{display:none}
  .belt-ctl,.closeup-reader{transition:none}
}

/* The reader: one close-up at a time, image left and copy right on computers, a full-screen sheet on phones. */
.closeup-reader{width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;overflow:auto;border:0;border-radius:24px;background:#141414;color:#f5f5f3;font-family:var(--font-body,"Hanken Grotesk","Helvetica Neue",Arial,sans-serif);box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;transform:scale(.97);transition:opacity 220ms var(--ease-out,cubic-bezier(.23,1,.32,1)),transform 220ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.closeup-reader[open]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.closeup-reader.is-open{opacity:1;transform:none}
.closeup-reader.is-instant{transition:none}
.closeup-reader::backdrop{background:rgba(0,0,0,.7)}
.reader-close{grid-column:1/-1;grid-row:1/-1;justify-self:end;align-self:start;position:sticky;top:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:14px 14px 0 0;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.reader-close::before,.reader-close::after{content:"";position:absolute;width:16px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.reader-close::after{transform:rotate(-45deg)}
@media(hover:hover) and (pointer:fine){
  .reader-close{transition:transform 140ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
  .reader-close:hover{background:rgba(0,0,0,.8)}
  .reader-close:active{transform:scale(.97)}
}
.reader-media{position:relative;grid-column:1;grid-row:1;margin:0;min-height:100%;aspect-ratio:3/2;background:#101010}
.reader-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reader-copy{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:44px 48px}
.reader-copy h3{margin:0 0 18px;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.reader-copy p{margin:0 0 14px;font-size:1.0625rem;line-height:1.6;color:#d9d9d6;text-wrap:pretty}
.reader-copy p:last-child{margin-bottom:0}
@media(max-width:900px){
  .closeup-reader{width:100vw;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0}
  .closeup-reader[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start}
  .reader-media{grid-column:1;grid-row:1;min-height:0}
  .reader-copy{grid-column:1;grid-row:2;justify-content:flex-start;padding:26px 22px 44px}
  .reader-copy h3{font-size:1.4rem}
  .reader-copy p{font-size:1rem}
}