/* desk · interactions (8.11.2026). Six ideas Oren picked, built from scratch:
   the lamp, the sketch that draws itself, the peeling corner, sheets that lean
   to the mouse, the clipboard that lifts, the lit language switch.
   Every one is an extra. Without JS, with reduced motion, on a keyboard and on
   touch the page reads the same; nothing here covers text or the button.
   Motion is transform and opacity only. play.js adds the classes on <html>:
   .fx (motion allowed), .fx-fine (a mouse), .sk-live (sketches run). */

/* ============================ 6. the language switch: a lit glass switch ============================
   Pure CSS, no JS. The two links stay two links. A glass knob sits on the
   current language with an orange glow from its edge; hovering the other
   language pulls the knob a little toward it and the glow brightens. */
.lang { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 0;
  background: linear-gradient(180deg, #141112, #2f2a2b); box-shadow: inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.14), 0 0 0 1.5px rgba(255,255,255,.3); }
.lang a { position: relative; z-index: 1; justify-content: center; color: var(--white); background: transparent !important; transition: color .3s; }
.lang a[aria-current="true"] { color: var(--black) !important; }
.lang::before, .lang::after { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .35s; }
/* the glow: an orange halo leaking from the knob's edge */
.lang::before { background: var(--orange); filter: blur(9px); opacity: .55; }
/* the knob: frosted glass */
.lang::after { background: linear-gradient(180deg, #fff 0%, #f1eded 55%, #e2dcdc 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(35,31,32,.18), 0 0 0 1px rgba(255,111,0,.85), 0 2px 4px rgba(0,0,0,.5); }
html[dir="ltr"] .lang::before, html[dir="ltr"] .lang::after { transform: translate3d(100%, 0, 0); }   /* English is the second link */
html[dir="rtl"] .lang:has(a:not([aria-current]):hover)::before, html[dir="rtl"] .lang:has(a:not([aria-current]):hover)::after { transform: translate3d(-16%, 0, 0); }
html[dir="ltr"] .lang:has(a:not([aria-current]):hover)::before, html[dir="ltr"] .lang:has(a:not([aria-current]):hover)::after { transform: translate3d(84%, 0, 0); }
.lang:hover::before { opacity: 1; }
.lang:has(a:focus-visible)::before { opacity: 1; }

/* ============================ 1. the lamp (home hero) ============================ */
.lamp, .lamp-dark, .lamp-pool { display: none; }
@media (min-width: 861px) {
  .hero-mat > .hero { z-index: 2; isolation: isolate; }
  .lamp { display: block; position: absolute; z-index: 6; top: 0; width: 120px; pointer-events: none;
    /* hangs in the gap between the name card and the portrait */
    inset-inline-end: calc(var(--pad) + (100% - 2 * var(--pad) - clamp(30px, 5vw, 80px)) * .4286 + clamp(30px, 5vw, 80px) / 2 - 92px); }
  .lamp-arm { position: relative; transform-origin: 50% 0; will-change: transform; }
  .lamp-art { display: block; width: 120px; height: 170px; overflow: visible; filter: drop-shadow(0 10px 8px rgba(35,31,32,.35)); }
  .lamp-live .lamp-art { pointer-events: auto; cursor: pointer; touch-action: none; }
  .fx .lamp-live .lamp-art { cursor: grab; }
  .lamp.grab .lamp-art { cursor: grabbing !important; }
  .lamp-bulb { opacity: .55; transition: opacity .4s; }
  /* the cone: light leaving the shade, soft, and never strong enough to wash out text */
  .lamp-cone { position: absolute; top: 158px; left: 50%; width: 520px; height: 460px; margin-left: -260px; pointer-events: none; opacity: .32; transition: opacity .5s;
    background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255,226,170,.55), rgba(255,226,170,0) 100%);
    -webkit-mask: linear-gradient(to bottom, #000, transparent); mask: linear-gradient(to bottom, #000, transparent);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen; }
  /* the pool of light on the mat, and the dark of the evening; both move with the light (transform) */
  .lamp-dark, .lamp-pool { display: block; position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
  .lamp-dark span, .lamp-pool span { position: absolute; left: -1400px; top: -1400px; width: 2800px; height: 2800px; will-change: transform; }
  .lamp-pool span { background: radial-gradient(circle at 50% 50%, rgba(255,236,190,.62) 0, rgba(255,226,170,.28) 210px, rgba(255,226,170,0) 420px); mix-blend-mode: screen; }
  .lamp-pool { opacity: 0; transition: opacity .6s; }
  .lamp-dark span { background: radial-gradient(circle at 50% 50%, rgba(20,16,17,0) 0, rgba(20,16,17,0) 170px, rgba(20,16,17,.86) 520px); }
  .lamp-dark { opacity: 0; transition: opacity .8s; }
  .lamp-live .lamp-pool { opacity: .75; }
  /* evening: the mat goes dark around the light. The paper, the cards and the button stay as they are */
  .hero-mat.is-night .lamp-dark { opacity: 1; }
  .hero-mat.is-night .lamp-pool { opacity: 1; }
  .hero-mat.is-night .lamp-cone { opacity: .6; }
  .hero-mat.is-night .lamp-bulb { opacity: 1; }

  /* cast shadows: a blurred plate behind the card and the portrait, pushed away from the light */
  .lamp-live .hero > .idx { box-shadow: 0 2px 3px rgba(35,31,32,.22); }
  .lamp-live .hero > .idx::after { content: ""; position: absolute; z-index: -1; inset: 6%; background: rgba(35,31,32,.42); filter: blur(22px);
    transform: translate3d(var(--cx, 0px), var(--cy, 18px), 0); pointer-events: none; }
  .lamp-live .pol-w > .polaroid { box-shadow: 0 2px 4px rgba(35,31,32,.25); }
}
/* the portrait in its wrapper: the wrapper takes the grid place and the drag, the polaroid inherits --x --y --r */
.hero > .pol-w { position: relative; z-index: 3; justify-self: center; width: min(100%, 400px); }
.hero .pol-w > .polaroid { width: 100%; justify-self: auto; margin: 0; }
.pol-w > .cast { display: none; }
@media (min-width: 861px) {
  .lamp-live .pol-w > .cast { display: block; position: absolute; z-index: 0; inset: 5%; background: rgba(35,31,32,.45); filter: blur(24px); pointer-events: none;
    transform: translate3d(calc(var(--x, 0px) + var(--cx, 0px)), calc(var(--y, 0px) + var(--cy, 18px)), 0) rotate(calc(var(--r, 0deg) * var(--tilt))); }
}
@media (max-width: 860px) {
  .hero > .pol-w { width: 74%; margin-top: -10px; }
  .hero .pol-w > .polaroid { width: 100%; margin-top: 0; }
}

/* ============================ 2. the sketch that draws itself ============================ */
.sk { display: none; }
.sk-live .sk { display: block; position: absolute; z-index: 2; overflow: hidden; pointer-events: none; transition: opacity .6s var(--ease);
  background-color: #fbfaf8;
  background-image: linear-gradient(rgba(35,31,32,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(35,31,32,.08) 1px, transparent 1px);
  background-size: 12px 12px; }
.sk-live .browser .sk { inset: 26px 0 0 0; }
.sk-live .phone .sk { inset: 10px; border-radius: 22px; }
.sk-art { position: absolute; inset: 7% 6%; width: 88%; height: 86%; overflow: visible; }
.sk-s { stroke: #3a3536; stroke-width: 1.7; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; opacity: .88;
  transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; }
.sk.go .sk-s { animation: sk-draw var(--u) linear var(--t) forwards; }
@keyframes sk-draw { to { transform: scaleX(1); } }
.sk-track { position: absolute; inset: 7% 6%; pointer-events: none; }
.sk-track > span, .sk-track { will-change: transform; }
.sk-pen { position: absolute; left: 0; top: -26px; width: 26px; height: 26px; opacity: 0; transition: opacity .3s; filter: drop-shadow(1px 3px 2px rgba(35,31,32,.35)); }
.sk.go .sk-pen { opacity: 1; }
.sk.done .sk-pen { opacity: 0; }
/* the real screen shows through: on hover (mouse), on a tap, or by itself a moment after drawing */
.sk.peek { opacity: 0; }
.fx-fine .browser:hover > .sk.go, .fx-fine .phone:hover > .sk.go { opacity: 0; }
.sk-host:not(.sk-once) { cursor: pointer; }

/* ============================ 3. the peeling corner (sheets that open a case) ============================ */
.peel { position: absolute; z-index: 6; bottom: 0; inset-inline-end: 0; width: 96px; height: 96px; transform-origin: 100% 100%;
  transform: scale(var(--pk, 0)); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); cursor: grab; touch-action: none;
  background: linear-gradient(to top left, #c95700 0, #e46300 49.5%, transparent 50%),
              linear-gradient(to top left, transparent 50%, #d8d2d2 50%, #f4f1f0 72%, #fff 100%);
  box-shadow: -4px -4px 10px rgba(35,31,32,.18); }
[dir="rtl"] .peel { transform-origin: 0 100%;
  background: linear-gradient(to top right, #c95700 0, #e46300 49.5%, transparent 50%),
              linear-gradient(to top right, transparent 50%, #d8d2d2 50%, #f4f1f0 72%, #fff 100%);
  box-shadow: 4px -4px 10px rgba(35,31,32,.18); }
/* the hit area stays a real corner even while the fold is small */
.peel::before { content: ""; position: absolute; inset: -40% ; }
.board .case:hover .peel { --pk: .3; }
.peel.pulling { transition: none; cursor: grabbing; }
.peel.gone { transition: transform .32s ease-in, opacity .32s .1s; --pk: 6; opacity: 0; }

/* ============================ 4. sheets lean toward the mouse ============================ */
.fx-fine .board .sheet { transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(calc(var(--r, 0deg) * var(--tilt)))
    perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.fx-fine .board .case.leaning .sheet { transition: transform .18s ease-out; }
.tsh { position: absolute; z-index: 0; inset: 4% 6%; background: rgba(35,31,32,.5); filter: blur(20px); pointer-events: none; opacity: 0;
  transform: translate3d(calc(var(--x, 0px) + var(--shx, 0px)), calc(var(--y, 0px) + var(--shy, 16px)), 0) rotate(calc(var(--r, 0deg) * var(--tilt)));
  transition: opacity .3s, transform .18s ease-out; }
.board .case > .sheet { z-index: 1; }
.board .case.leaning > .tsh { opacity: 1; }
.board .case.dragging > .tsh { opacity: 1; transition: none; }

/* ============================ 5. the clipboard lifts toward you ============================ */
.lift { position: relative; min-width: 0; }
.lift-sh { display: none; }
@media (min-width: 861px) {
  .fx-fine .lift { perspective: 1600px; }
  .fx-fine .lift > .form { transform-origin: 50% 100%; transform: rotateX(9deg) scale(.97); transition: transform .6s cubic-bezier(.2, .9, .2, 1); }
  .fx-fine .lift:hover > .form { transform: rotateX(5deg) scale(.98); }
  .fx-fine .lift.up > .form { transform: translate3d(0, -12px, 0) rotateX(0) scale(1.015); }
  .fx-fine .lift-sh { display: block; position: absolute; z-index: 0; inset: 6% 4% -2%; background: rgba(0,0,0,.75); filter: blur(30px); opacity: .25; transform: translate3d(0, 0, 0) scale(.94);
    transition: opacity .6s, transform .6s cubic-bezier(.2, .9, .2, 1); pointer-events: none; }
  .fx-fine .lift.up > .lift-sh { opacity: 1; transform: translate3d(0, 34px, 0) scale(1); }
  .fx-fine .lift > .form { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lamp-arm, .peel, .sk, .tsh, .lift > .form { transition: none !important; animation: none !important; }
  .lang::before, .lang::after { transition: none; }
}