/* The landing's press scenes (W5), driven by scenes.js. Ported from the approved prototype (press/press.css, 20 Oct).
   The pinned scenes take their scroll length only with html.motion; without it the sections are the static comp. */
html:not(.motion) .m-only { display: none; }
.motion .m-only { display: block; } .motion .ci.m-only { display: grid; } .motion .s-only { display: none; }
.motion .pin { height: var(--len, 300vh); padding-top: 0; }
.motion .pin > .sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.motion .pin > .sticky > * { width: 100%; }

/* the what: the band of sources, a blank sheet with crop marks, four plates that print and register */
.wview { perspective: 1600px; perspective-origin: 50% 0%; }
.wstage { position: relative; transform-style: preserve-3d; }
.motion .wstage > .card { visibility: hidden; }
.plate { position: absolute; box-sizing: border-box; transform-origin: 50% 0; mix-blend-mode: multiply; pointer-events: none; }
.plate .scr { position: absolute; transform: rotate(var(--th)); }
.plate .inn { position: absolute; transform: rotate(calc(-1 * var(--th))); }
.plate .card { border-bottom-color: transparent; }
.plate.sep .card, .plate.sep .card * { color: var(--sepia) !important; }
.plate .reg { position: absolute; left: -34px; top: 14px; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; color: var(--ink); }
.plate.sep .reg { color: var(--sepia); }
.plate .reg::before, .plate .reg::after { content: ""; position: absolute; background: currentColor; }
.plate .reg::before { left: -5px; right: -5px; top: 50%; height: 1px; } .plate .reg::after { top: -5px; bottom: -5px; left: 50%; width: 1px; }
.wsheet { position: absolute; pointer-events: none; transform-origin: 50% 0; }
.wsheet svg { position: absolute; inset: -14px; overflow: visible; }
.wslug { position: absolute; left: 0; font-size: 11px; }
.wslug span { transition: color .2s; }

/* the check-in: your words type in; the card comes apart and writes itself in them */
.ci { display: grid; grid-template-columns: 340px 1fr; gap: 28px 48px; align-items: center; }
.ci-words { padding: 18px 20px 20px; }
.ci-type { font-size: 21px; line-height: 1.45; margin-top: 10px; min-height: 2.9em; }
.ci-type .tb { color: transparent; }
.caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -3px; background: var(--ink); margin: 0 1px; }
.ci-card { position: relative; perspective: 900px; }
.ci-card canvas { position: absolute; pointer-events: none; transform-origin: 50% 50%; }
.ci-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; padding-top: 14px; }
.ci-rail > b { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.ci-rail > b > i { display: block; height: 1px; background: var(--ink); transform-origin: 0 0; transform: scaleX(0); }
.ci-rail span { transition: color .2s; } .ci-rail span.on { color: var(--ink); }

/* ask: the month as a contact sheet; the days found are circled in grease pencil */
.think { display: none; } .motion .think { display: block; height: 0; overflow: visible; }
.think svg { width: 22px; height: 22px; display: block; margin-top: 14px; opacity: 0; }
.contact { position: relative; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule); }
.contact .chd { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 10.5px; }
.contact .frs { display: grid; grid-template-columns: repeat(15, 1fr); gap: 12px 5px; }
.fr { position: relative; }
.fr .fi { position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--ink); background: var(--paper); overflow: hidden; transition: background-color .2s; }
.fr .fi i { position: absolute; height: 2px; background: var(--ink); }
.fr .fi i.ev { height: 4px; }
.fr > span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--mid); text-align: center; }
.fr.m > span { color: var(--ink); }
.fr.hot .fi { background: var(--ink); } .fr.hot .fi i { background: var(--paper); }
.contact .scan { position: absolute; width: 2px; background: var(--ink); pointer-events: none; opacity: 0; }
.contact svg.gp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gp path { fill: none; stroke: var(--sepia); stroke-width: 1.7; stroke-linecap: round; transition: stroke-width .2s; }
.gp path.hot { stroke-width: 2.8; }

@media (max-width: 600px) {
  .motion .pin[data-desk] { height: auto; padding-top: 80px; }
  .motion .pin[data-desk] > .sticky { position: static; height: auto; display: block; }
  .motion .wpin { height: 300vh; }
  .motion .wstick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  .plate .reg { left: auto; right: 0; top: -24px; }
  .ci { grid-template-columns: 1fr; gap: 18px; } .ci-type { font-size: 18px; min-height: 0; }
  .ci-rail { gap: 10px; } .ci-rail span { font-size: 10px; }
  .motion [data-scene="checkin"] .g-head { margin-bottom: 20px; }
  .motion [data-scene="ask"] .g-2 { gap: 20px; }
  .motion [data-scene="ask"] h2 { font-size: 30px; }
  .contact .frs { grid-template-columns: repeat(10, 1fr); gap: 10px 4px; }
}