/* desk · five moments, mostly for the phone (8.11.2026):
   1. the pull cord for the evening, 2. the polaroid that develops,
   3. sheets dealt onto the table, 4. the stamp on "let's talk",
   5. the line's cases as a stack you swipe.
   Every one is an extra. Without JS and with reduced motion the page is the
   same page. Motion is transform and opacity only. Nothing covers text or the
   button while the visitor is reading. moments.js adds .cord-live, .dev-*,
   .deal-wait and .stack-on; the inline script in <head> adds .dev-pre. */

/* ============================ 1. the pull cord (home hero, phone) ============================ */
.cord { display: none; }
@media (max-width: 860px) {
  /* hangs from the top of the mat over the card's empty end margin: the card's text starts 26px in, the knob ends 22px in */
  .cord-live .cord { display: block; position: absolute; z-index: 7; top: 0; inset-inline-end: calc(var(--pad) + 1px); width: 22px; pointer-events: none; }
  .cord-line { display: block; width: 2px; height: 118px; margin: 0 auto; background: #231F20; transform-origin: 50% 0; will-change: transform; }
  .cord-knob { position: absolute; top: 112px; left: 0; display: block; width: 22px; height: 34px; pointer-events: auto; touch-action: none; cursor: pointer; will-change: transform;
    filter: drop-shadow(0 3px 2px rgba(35,31,32,.35)); -webkit-tap-highlight-color: transparent; }
  .cord-knob svg { display: block; width: 22px; height: 34px; }
  /* a real tap target around a small knob: 44 by 64. It grows toward the edge of the screen, not toward the card's text */
  .cord-knob::before { content: ""; position: absolute; top: -14px; bottom: -16px; inset-inline-start: -4px; inset-inline-end: -18px; }

  /* the evening on a phone: the same dark and the same pool as the lamp, centred on the name card */
  .cord-live > .hero { position: relative; z-index: 2; isolation: isolate; }
  .cord-live .lamp-dark, .cord-live .lamp-pool { display: block; position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
  .cord-live .lamp-dark span, .cord-live .lamp-pool span { position: absolute; left: -1400px; top: -1400px; width: 2800px; height: 2800px; }
  /* the card covers most of a phone's width, so the dark starts closer than on a desktop or the evening would not show */
  .cord-live .lamp-pool span { background: radial-gradient(circle at 50% 50%, rgba(255,236,190,.7) 0, rgba(255,226,170,.3) 150px, rgba(255,226,170,0) 290px); mix-blend-mode: screen; }
  .cord-live .lamp-dark span { background: radial-gradient(circle at 50% 50%, rgba(20,16,17,0) 0, rgba(20,16,17,0) 90px, rgba(20,16,17,.88) 340px); }
  .cord-live .lamp-dark { opacity: 0; transition: opacity .7s; }
  .cord-live .lamp-pool { opacity: 0; transition: opacity .5s; }
  .cord-live.is-night .lamp-dark, .cord-live.is-night .lamp-pool { opacity: 1; }
}

/* ============================ 2. the polaroid develops ============================ */
.dev-w { position: relative; display: block; }
.dev { display: none; }
.dev-pre .dev { display: block; position: absolute; inset: 0; pointer-events: none; }
.dev i { position: absolute; inset: 0; }
/* the unexposed film: pale blue grey, a little lighter at the top */
.dev-a { background: linear-gradient(170deg, #eef2f3 0, #dde5e8 60%, #d3dde1 100%); }
/* the colour comes last: a grey layer in saturation mode keeps the picture grey until it fades */
.dev-b { background: #808a8d; mix-blend-mode: saturation; }
/* fail-safe: if moments.js never arrives, the picture develops by itself after 2.5 seconds */
.dev-pre .dev-a { animation: dev-out 1.1s cubic-bezier(.45, 0, .55, 1) 2.5s both; }
.dev-pre .dev-b { animation: dev-out 1.1s ease-in-out 2.9s both; }
/* moments.js holds it until the portrait is on screen (and loaded), then develops it in about a second and a half */
.dev-pre .dev-wait .dev i { animation: none; opacity: 1; }
.dev-pre .dev-go .dev-a { animation: dev-out 1.05s cubic-bezier(.45, 0, .55, 1) 0s both; }
.dev-pre .dev-go .dev-b { animation: dev-out 1.1s ease-in-out .4s both; }
.dev-pre .dev-done .dev { display: none; }
@keyframes dev-out { from { opacity: 1; } to { opacity: 0; } }

/* ============================ 3. sheets dealt onto the table ============================ */
/* only a sheet still below the screen waits; one already seen never does */
.deal-wait { opacity: 0; }

/* ============================ 4. the stamp on "let's talk" ============================ */
.stamp-hit { position: fixed; z-index: 95; left: 0; top: 0; height: auto; aspect-ratio: 150 / 232; color: var(--black); opacity: 0; mix-blend-mode: multiply; pointer-events: none; transform-origin: 50% 50%; }

/* ============================ 5. the line's cases as a stack (phone) ============================ */
.stack-n { display: none; }
@media (max-width: 860px) {
  .board.stack-on { --dir: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; touch-action: pan-y; padding-bottom: 8px; }
  [dir="rtl"] .board.stack-on { --dir: -1; }
  .board.stack-on > .case { grid-area: 1 / 1; width: 82%; justify-self: start; z-index: calc(30 - var(--k, 0));
    /* the next sheets peek out at the end side, a little lower, a little turned */
    transform: translate3d(calc(var(--dir) * var(--kk, 0) * 30px), calc(var(--kk, 0) * 7px), 0) rotate(calc(var(--dir) * var(--kk, 0) * 2.6deg)) scale(calc(1 - var(--kk, 0) * .035));
    transition: transform .34s var(--ease), opacity .25s; -webkit-tap-highlight-color: transparent; }
  .board.stack-on > .case.st-far { opacity: 0; }
  .board.stack-on > .case.st-drag { transition: none; }
  .board.stack-on .sheet { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .stack-n.on { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; margin: 18px auto 0; min-height: 44px; padding: 4px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    background: var(--black); color: var(--white); font-family: var(--f-label); font-weight: 700; font-size: 16px; letter-spacing: .08em; border-radius: 3px; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
  /* the count is two numbers: in Hebrew it still reads "this of all", left to right */
  .stack-n.on { direction: ltr; }
}

@media (prefers-reduced-motion: reduce) {
  .dev { display: none !important; }
  .cord-line, .cord-knob, .board.stack-on > .case { transition: none !important; }
  .deal-wait { opacity: 1 !important; }
}