/*
 * Devices the work is shown on: the MagTran M3 keypad, a laptop, a phone and
 * an app window. Each is drawn at a fixed design size and scaled by its host,
 * so the page's work tiles and the reel share the same objects.
 */

/* ---------------- MagTran M3, running Ectodeck ---------------- */

.m3 { position: relative; width: 900px; height: 460px; }
.m3-body {
  position: absolute;
  inset: 0;
  border-radius: 46px;
  background: linear-gradient(162deg, #2a2a2e 0%, #141416 30%, #0b0b0c 70%, #111113 100%);
  box-shadow:
    0 70px 90px -40px rgba(0, 0, 0, 0.9),
    0 26px 40px -24px rgba(0, 0, 0, 0.7),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.7);
}
.m3-screen {
  position: absolute;
  left: 34px;
  top: 38px;
  width: 646px;
  height: 384px;
  border-radius: 20px;
  overflow: hidden;
  background: #010407;
  box-shadow: inset 0 0 0 2px #050506;
}
.m3-screen img { max-width: none; }
.m3-screen .reef {
  position: absolute;
  left: -4%;
  top: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  display: block;
}
.m3-screen .dim {
  position: absolute;
  inset: 0;
  background: #010407;
}
.m3-screen .fish, .m3-screen .flake {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 50% 50%;
}
.m3-screen .fish { width: 120px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.m3-screen .flake { width: 22px; height: auto; }
.m3-screen .ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid rgba(220, 245, 255, 0.85);
  opacity: 0;
}
.m3-keys {
  position: absolute;
  left: 34px;
  top: 38px;
  width: 646px;
  height: 384px;
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
}
.m3-key {
  position: relative;
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.07));
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -8px 14px rgba(0, 0, 0, 0.16),
    0 10px 18px rgba(0, 0, 0, 0.32);
  transform-origin: 50% 50%;
}
.m3-key::after {
  content: '';
  position: absolute;
  left: 12%;
  top: 8%;
  width: 46%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  filter: blur(1px);
}
.m3-knobs {
  position: absolute;
  right: 40px;
  top: 38px;
  bottom: 38px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.m3-knob {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 3deg, rgba(0, 0, 0, 0.12) 3deg 6deg),
    radial-gradient(circle at 36% 30%, #4d4d53, #1d1d20 56%, #0c0c0d);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.6), inset 0 1.5px 1px rgba(255, 255, 255, 0.28), inset 0 0 0 7px rgba(10, 10, 11, 0.9);
}
.m3-knob::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 13px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  border-radius: 2px;
  background: #d4d4d8;
  opacity: 0.8;
}
.m3-port {
  position: absolute;
  left: 322px;
  top: -5px;
  width: 58px;
  height: 12px;
  border-radius: 6px;
  background: #050506;
  box-shadow: inset 0 0 0 2px #2c2c30;
}
.m3-port i {
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  box-shadow: 0 0 0 2px #c8f22e, 0 0 16px rgba(200, 242, 46, 0.7);
  opacity: 0;
}

/* ---------------- laptop ---------------- */

.laptop { position: relative; }
.laptop-lid {
  position: relative;
  padding: 16px 16px 20px;
  border-radius: 24px 24px 10px 10px;
  background: #0a0a0b;
  box-shadow: inset 0 0 0 2px #2a2a2e, inset 0 0 0 5px #0a0a0b, inset 0 0 0 6px #19191c;
}
.laptop-lid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #1f1f23;
}
.laptop-screen { position: relative; overflow: hidden; border-radius: 6px; background: #0c0c0e; }
.laptop-base {
  position: relative;
  height: 22px;
  margin: 0 -7%;
  border-radius: 2px 2px 20px 20px;
  background: linear-gradient(#4a4a4f, #2a2a2e 45%, #161618);
  box-shadow: 0 40px 50px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.laptop-base::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 16%;
  height: 8px;
  margin-left: -8%;
  border-radius: 0 0 10px 10px;
  background: #1a1a1d;
}

/* ---------------- phone ---------------- */

.phone {
  position: relative;
  width: 300px;
  height: 620px;
  padding: 12px;
  border-radius: 50px;
  background: #0a0a0b;
  box-shadow: inset 0 0 0 2px #2c2c30, inset 0 0 0 4px #0a0a0b, 0 50px 70px -30px rgba(0, 0, 0, 0.9);
}
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 40px; background: #0e0e10; }
.phone-screen::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 11px;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  border-radius: 14px;
  background: #000;
  z-index: 3;
}

/* ---------------- app window ---------------- */

.window {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0d0d0f;
  box-shadow: 0 0 0 1px #26262b, 0 50px 70px -34px rgba(0, 0, 0, 0.9);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #131316;
  border-bottom: 1px solid #1f1f24;
}
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: #2a2a30; }
.window-bar b { margin-left: 10px; font: 500 12px var(--sans, 'Geist', sans-serif); color: #a1a1aa; }

/* ---------------- shared glyph icon (a family glyph without its splat) ---------------- */

.glyph { display: inline-block; width: 22px; height: 22px; flex: none; }
.glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------- Ectodeck's reef, swimming ---------------- */

.m3-screen .fish.swim-a { width: 112px; animation: swim-left 17s linear infinite -5s; }
.m3-screen .fish.swim-b { width: 124px; animation: swim-right 23s linear infinite -13s; }
.m3-screen .fish.swim-c { width: 104px; animation: swim-left-low 20s linear infinite -2s; }
@keyframes swim-left {
  0% { transform: translate(680px, 168px) rotate(0deg); }
  25% { transform: translate(470px, 150px) rotate(3deg); }
  50% { transform: translate(262px, 172px) rotate(-3deg); }
  75% { transform: translate(60px, 152px) rotate(3deg); }
  100% { transform: translate(-150px, 166px) rotate(0deg); }
}
@keyframes swim-right {
  0% { transform: translate(-170px, 58px) scaleX(-1); }
  30% { transform: translate(90px, 80px) scaleX(-1) rotate(-3deg); }
  60% { transform: translate(350px, 62px) scaleX(-1) rotate(3deg); }
  100% { transform: translate(700px, 88px) scaleX(-1); }
}
@keyframes swim-left-low {
  0% { transform: translate(690px, 262px); }
  35% { transform: translate(420px, 246px) rotate(4deg); }
  70% { transform: translate(160px, 268px) rotate(-3deg); }
  100% { transform: translate(-140px, 250px); }
}
@media (prefers-reduced-motion: reduce) {
  .m3-screen .fish { animation: none !important; }
  .m3-screen .fish.swim-a { transform: translate(380px, 158px); }
  .m3-screen .fish.swim-b { transform: translate(90px, 70px) scaleX(-1); }
  .m3-screen .fish.swim-c { transform: translate(250px, 262px); }
}

/* ---------------- Ectochat, on a phone ---------------- */

.chat { display: flex; flex-direction: column; padding: 54px 14px 14px; background: #0f0f11; font-family: var(--sans, 'Geist', sans-serif); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 0 6px 14px; border-bottom: 1px solid #1f1f24; color: #f4f4f5; }
.chat-head b { font-size: 15px; font-weight: 600; }
.chat-head small { font-size: 13px; color: #71717a; }
.chat-log { list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.chat-log li { max-width: 84%; }
.chat-log li b { display: block; margin: 0 0 4px 12px; font-size: 11px; font-weight: 500; color: #a1a1aa; }
.chat-log p { padding: 10px 13px; border-radius: 18px; font-size: 14px; line-height: 1.35; }
.chat-log .them p { background: #1d1d21; color: #e4e4e7; border-bottom-left-radius: 6px; }
.chat-log .me { align-self: flex-end; }
.chat-log .me p { background: #e9e9ec; color: #111113; border-bottom-right-radius: 6px; }
.chat-input { display: flex; align-items: center; height: 42px; margin-top: 12px; padding: 0 16px; border-radius: 21px; background: #17171a; border: 1px solid #26262b; color: #71717a; font-size: 14px; }

/* ---------------- Ectopulse, on a laptop ---------------- */

.pulse-app { display: grid; grid-template-columns: 172px 1fr; height: 100%; background: #0e0e10; font-family: var(--sans, 'Geist', sans-serif); color: #f4f4f5; }
.pa-rail { padding: 20px 14px; background: #0a0a0c; border-right: 1px solid #1d1d21; }
.pa-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pa-site { margin: 14px 0 12px 2px; font-size: 12px; color: #71717a; }
.pa-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-rail li { padding: 7px 10px; border-radius: 7px; font-size: 13px; color: #a1a1aa; }
.pa-rail li.on { background: #1a1a1e; color: #f4f4f5; }
.pa-main { padding: 22px 26px; }
.pa-title { margin-bottom: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pa-title span { margin-left: 8px; font-size: 13px; font-weight: 500; color: #71717a; }
.pa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1d1d21; }
.pa-list li { display: grid; grid-template-columns: 124px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid #1d1d21; }
.pa-list b { font-size: 13.5px; font-weight: 500; color: #e4e4e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-list i { font-style: normal; font-size: 12px; color: #71717a; }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #a1a1aa; white-space: nowrap; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #71717a; }
.st.prog::before { background: #60a5fa; }
.st.wait::before { background: #a78bfa; }
.st.done::before { background: #4ade80; }
.st.new::before { background: #d4d4d8; }

/* ---------------- Ectofield, in a window ---------------- */

.field-canvas {
  position: relative;
  height: calc(100% - 38px);
  background: #0b0b0d radial-gradient(#26262b 1px, transparent 1.3px) 0 0 / 22px 22px;
  font-family: var(--sans, 'Geist', sans-serif);
}
.field-canvas .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.field-canvas .wires path { fill: none; stroke: #45454d; stroke-width: 2; }
.field-canvas .wires path.live { stroke: #c8f22e; stroke-dasharray: 7 9; animation: wire-flow 1.1s linear infinite; }
@keyframes wire-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .field-canvas .wires path.live { animation: none; } }
.node {
  position: absolute;
  width: 164px;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: #16161a;
  border: 1px solid #2a2a30;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
}
.node.wide { width: 172px; }
.node .nk { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #71717a; }
.node b { display: block; font-size: 15px; line-height: 1.35; font-weight: 550; color: #f4f4f5; }
.node .port { position: absolute; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #0b0b0d; border: 2px solid #52525b; }
.node .port.out { right: -6px; }
.node .port.in { left: -6px; }

/* ---------------- Contentingency, on the laptop ---------------- */

.cg-app { display: flex; flex-direction: column; height: 100%; background: #0f0f11; font-family: var(--sans, 'Geist', sans-serif); color: #f4f4f5; }
.cg-top { display: flex; align-items: center; gap: 22px; height: 46px; padding: 0 18px; border-bottom: 1px solid #1f1f23; }
.cg-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cg-logo img { width: 18px; height: 18px; display: block; }
.cg-top nav { display: flex; gap: 4px; margin-left: 10px; }
.cg-top nav span { padding: 6px 10px; border-radius: 7px; font-size: 12px; color: #a1a1aa; }
.cg-top nav span.on { background: #1c1c20; color: #f4f4f5; }
.cg-user { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #27272a; color: #d4d4d8; font-size: 10px; font-weight: 600; }
.cg-board { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 0; overflow: hidden; }
.cg-col { display: flex; flex-direction: column; gap: 8px; }
.cg-colhead { display: flex; align-items: center; gap: 7px; margin: 0 0 2px 2px; font-size: 11.5px; font-weight: 600; color: #d4d4d8; }
.cg-colhead i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.cg-colhead b { font-weight: 500; color: #71717a; }
.cg-task { position: relative; padding: 9px 10px 9px 13px; border-radius: 9px; background: #17171a; border: 1px solid #242428; }
.cg-task::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #fb7a30; }
.cg-task b { display: block; font-size: 11.5px; font-weight: 550; line-height: 1.3; color: #ececef; }
.cg-task small { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: #8b8b94; }
.cg-task small i { font-style: normal; padding: 1px 6px; border-radius: 5px; background: #222226; color: #b4b4bb; }
.window-body { height: calc(100% - 38px); }
.window-body .pulse-app { height: 100%; }