/* ==========================================================
   THE SPREAD — photographs that converge

   A tall section whose stage is sticky: the screen holds still while
   the page scrolls through it, and in that time a stack of photographs
   in the middle opens into a spread. spread.js writes every position;
   this file is the frame, the type and the one thing the script does
   not touch — what it all looks like.

   The section replaced the mirrored zoom strip that used to sit in the
   "about" band. That strip was the hero's own slider shown a second
   time, with the same six photographs; this gives them a place of
   their own rather than a repeat.
   ========================================================== */
.spread{
  position:relative;width:100%;
  /* the room the stage has to travel through: enough for the stack to
     hold, open and hold again without the opening feeling rushed */
  height:340vh;
  background:var(--page-bg);
}
.spread-stage{
  position:sticky;top:0;
  height:100vh;width:100%;
  overflow:hidden;isolation:isolate;
}

/* The hero's whole background, not an imitation of it: the same .sky layers
   the hero carries, and hero-glow.js draws its mesh into this canvas too.
   It inverts with the theme exactly as the hero does — a dark field on the
   light page, a pale one on the dark page — so the copy over it takes
   --panel-ink rather than --text. */
.sky--spread{z-index:0;}

/* ---------- the copy ----------
   Both texts stand in the same place and cross over: one asks, the other
   answers.

   Above the cards, not under them: the original let a photograph pass over
   its own headline, which on a demo reads as depth and on a company's front
   page reads as a mistake. pointer-events stay off, so the cards below are
   still the things a pointer finds. */
.spread-copy{
  position:absolute;inset:0;z-index:15;
  display:grid;place-items:center;
  padding:0 26px;text-align:center;pointer-events:none;
}
.spread-text{
  position:absolute;max-width:52ch;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;
}
/* Two words on a screen, so they are the size of a screen. The portal that
   follows closes in on the second of them, and a small one would leave it
   nothing to aim at. */
.spread-title{
  margin:0;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-size:clamp(40px,8vw,130px);font-weight:800;letter-spacing:-.055em;line-height:1;
  color:var(--panel-ink);text-wrap:balance;
}

/* ---------- the cards ----------
   Every card is pinned to the middle and moved from there, so one number
   pair per card is the whole position. The script writes width, height,
   translate, rotate and scale; nothing else here may set them. */
.spread-cards{position:absolute;inset:0;z-index:10;}
.spread-card{
  position:absolute;left:50%;top:50%;
  will-change:transform;
}
.spread-card-in{
  position:relative;height:100%;width:100%;
  overflow:hidden;border-radius:12px;
  box-shadow:0 18px 40px rgba(4,16,46,.22);
  outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;
}
:root[data-theme="dark"] .spread-card-in{
  box-shadow:0 18px 40px rgba(3,18,66,.14);
  outline-color:rgba(3,18,66,.1);
}
/* a lift across the face, so a photograph on a photograph still reads as
   two separate things */
.spread-card-in::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(42deg, rgba(2,7,26,.24) 0%, transparent 46%, rgba(255,255,255,.16) 100%);
  opacity:.6;
}
.spread-card img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
/* only once the spread is open: a card that answers the pointer while it is
   still crossing the screen fights the animation */
.spread.is-spread .spread-card{cursor:pointer;}
.spread.is-spread .spread-card:hover img{transform:scale(1.06);}
.spread.is-spread .spread-card:hover .spread-card-in{
  box-shadow:0 26px 56px rgba(4,16,46,.3);
  outline-color:rgba(220,152,69,.5);
}

/* ---------- the scroll hint ----------
   14vh up, not 4: the dock floats about 96px off the foot of the viewport
   once the header has scrolled away, and a hint behind it is no hint. */
.spread-hint{
  position:absolute;inset-inline:0;bottom:14vh;z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--panel-ink-soft);pointer-events:none;
}
.spread-bar{
  position:relative;display:block;
  width:1px;height:26px;overflow:hidden;
  background:color-mix(in srgb, var(--panel-ink) 30%, transparent);
}
.spread-bar::after{
  content:"";position:absolute;inset:0;
  background:var(--amber);
  animation:spreadBar 1.5s ease-in-out infinite;
}
@keyframes spreadBar{
  from{translate:0 -100%;}
  to{translate:0 100%;}
}

/* ---------- a phone ----------
   Two columns of one card size (the script switches to them on a coarse
   pointer), and less road to travel: the same spread over 340vh of a
   phone is a long way to scroll for six pictures. */
@media (max-width:900px){
  .spread{height:270vh;}
  .spread-copy{padding:0 22px;}
  .spread-card-in{border-radius:14px;}
  .spread-hint{bottom:15vh;}
  /* the card is square here, and spread.js is the one that says so: both
     of its sides are written in vw */
}

/* ---------- still ----------
   prefers-reduced-motion: the spread is already open, the section is no
   taller than the screen, and nothing moves. */
.spread.is-static{height:auto;}
.spread.is-static .spread-stage{position:static;height:auto;min-height:100vh;}
.spread.is-static .spread-bar::after{animation:none;}
.spread.is-static .spread-card img{transition:none;}
@media (prefers-reduced-motion:reduce){
  .spread-card img{transition:none;}
  .spread-bar::after{animation:none;}
}