/* home: Foldman spread collage. Captions flow with their photo (no absolute offsets), so
   longer Thai captions and narrow screens can't push them over the screenshots. */
.collage{grid-template-columns:repeat(12,minmax(0,1fr));gap:44px 22px}
.collage .snap figcaption{position:static;max-width:none;margin-top:14px;padding-left:40px;position:relative}
.collage .snap figcaption::before{ /* hand-drawn arrow pointing up at the shot */
  content:"";position:absolute;left:0;top:-10px;width:32px;height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M4 27 C6 16 12 9 24 5 M15 3 L25 4 L21 13' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.collage .snap figcaption small{margin-top:6px}
.cap2{display:block;color:var(--red);margin-top:8px;transform:rotate(-2deg)}

.s-deck{grid-column:1 / span 5;grid-row:1 / span 2;transform:rotate(-2.5deg);margin-top:30px}
.s-deck .tape{left:50%;top:-12px;transform:translateX(-50%) rotate(4deg)}
.s-deck figcaption{transform:rotate(-2deg)}
.s-rack{grid-column:6 / span 7;transform:rotate(1.6deg)}
.s-rack .tape{right:-18px;top:-8px;transform:rotate(30deg)}
.s-rack figcaption{transform:rotate(1deg)}
.s-card{grid-column:6 / span 7;transform:rotate(-1.2deg)}
.s-card .tape{left:-16px;top:-6px;transform:rotate(-34deg)}
.s-card figcaption{transform:rotate(-1deg)}
.s-card figcaption::before{filter:invert(22%) sepia(90%) saturate(3000%) hue-rotate(220deg)} /* riso blue arrow */
/* the hatch shot keeps its caption on the right, in its own column */
.s-hatch{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:18px 26px;align-items:center;transform:rotate(.8deg);margin-top:10px}
.s-hatch .tape{left:30%;top:-12px;transform:rotate(-3deg)}
.s-hatch img{grid-column:1}
.s-hatch figcaption{grid-column:2;margin:0;transform:rotate(3deg)}
.s-hatch figcaption::before{left:0;top:4px;transform:rotate(-80deg)} /* points left at the shot */
:lang(th) .snap figcaption{line-height:1.4}
.readmore{margin-top:30px}
@media (max-width:640px){
  .s-hatch{display:block}
  .s-hatch figcaption{margin-top:14px}
  .s-hatch figcaption::before{top:-10px;transform:none}
}

/* ---------- always-on motion (paused off-screen by home.js, off under reduced motion) ---------- */
.motion-paused *, .motion-paused *::before{animation-play-state:paused!important}

/* the hero tape is always rolling, slowly; PLAY and FF/REW speed it up */
.cassette-wrap:not(.playing):not(.winding) .reel{animation:spin 7s linear infinite}

/* hand-drawn arrows boil along with the cassettes (home.js reseeds #rough) */
.snap .arrow path{filter:url(#rough)}

/* label-maker ticker between the hero and side A */
.ticker{overflow:hidden;width:104%;margin:-26px 0 10px -2%;position:relative;z-index:2;transform:rotate(-1.2deg);
  box-shadow:0 4px 0 rgba(0,0,0,.15)}
.ticker-tape{
  display:flex;width:max-content;
  background:#141414;color:#f4f4f2;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.4);
  animation:ticker 42s linear infinite;
}
.ticker-run{display:flex;align-items:center;gap:22px;padding:11px 11px 10px;white-space:nowrap;
  font:700 16px/1 'Courier Prime','Sarabun',monospace;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.28),0 -1px 0 rgba(0,0,0,.6)}
.ticker-run:lang(th){letter-spacing:0;font-size:17px}
.ticker-run b{color:var(--yellow);font-weight:400}
.ticker-run span:nth-of-type(3n+2){color:var(--pink)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* O2 bubbles drawn in marker, rising behind the hero */
.o2{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero > :not(.o2){position:relative;z-index:1}
.o2 i{
  position:absolute;bottom:-60px;display:grid;place-items:center;border-radius:50%;
  border:2.5px solid #000;background:radial-gradient(circle at 32% 30%,#fff 0 18%,transparent 19%) ;
  font:400 13px var(--marker);font-style:normal;color:var(--riso);opacity:.8;
  animation:rise var(--t,14s) linear infinite;animation-delay:var(--d,0s);
}
.o2 .b1{left:46%;width:26px;height:26px;--t:13s;--d:-2s}
.o2 .b2{left:52%;width:42px;height:42px;--t:17s;--d:-9s;border-color:var(--riso)}
.o2 .b3{left:58%;width:16px;height:16px;--t:11s;--d:-5s}
.o2 .b4{left:4%;width:22px;height:22px;--t:15s;--d:-12s}
.o2 .b5{left:93%;width:38px;height:38px;--t:19s;--d:-4s;border-color:var(--pink);color:var(--pink)}
.o2 .b6{left:49%;width:12px;height:12px;--t:9s;--d:-7s}
.o2 .b7{left:88%;width:20px;height:20px;--t:12s;--d:-1s}
@keyframes rise{
  0%{transform:translate(0,0)}
  25%{transform:translate(14px,-25vh)}
  50%{transform:translate(-10px,-50vh)}
  75%{transform:translate(12px,-75vh)}
  100%{transform:translate(0,-105vh) scale(1.15);opacity:0}
}

/* ransom letters get re-cut now and then */
.ransom span.recut{animation:recut .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes recut{0%{scale:1.25;filter:brightness(1.6)}100%{scale:1}}

@media (max-width:640px){
  .ticker{margin-top:-18px}
  .ticker-run{font-size:14px;padding:9px 9px 8px}
  .o2 .b4,.o2 .b7{display:none}
}
@media (prefers-reduced-motion:reduce){ .o2{display:none} }
.readmore + .credit{margin-top:30px}