/* ==========================================================================
   Contact "machine" — the enquiry form housed in a computer that is plugged
   in, with a keyboard underneath whose keys light as you type in the form.
   Echoes the hero: nothing works until it has power.
   ========================================================================== */

.machine{
  position:relative;
  display:flex; flex-direction:column; align-items:stretch;
  padding-top:150px;
}

/* ── power feed ──────────────────────────────────────────────────────── */

.machine-power{
  position:absolute; top:0; inset-inline-end:16px;
  width:min(340px,64%); height:140px;
  pointer-events:none;
}
.machine-cable{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; fill:none; stroke-linecap:round;
}
.mc-wire{ stroke:var(--line-2); stroke-width:2.6; }
.mc-live{
  stroke:var(--accent); stroke-width:1.8;
  stroke-dasharray:18 420; stroke-dashoffset:438;
  opacity:0;
}
.machine-socket{
  position:absolute; top:-6px; inset-inline-end:0;
  width:26px; height:32px; border-radius:5px;
  background:var(--surface-2); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.machine-socket i{ width:3px; height:9px; border-radius:2px; background:var(--ink-3); opacity:.7; }

/* ── monitor ─────────────────────────────────────────────────────────── */

.machine-body{
  border:1px solid var(--line-2);
  border-radius:18px;
  background:var(--surface);
  padding:14px;
  box-shadow:var(--shadow);
}

.machine-bezel{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 8px 12px;
}
.machine-bezel img{ width:132px; height:auto; opacity:.95; }
:root[data-theme="night"] .machine-bezel img{ content:url("../img/logo-full-night.png"); }

.machine-led{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

.machine-viewport{
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--line);
  padding:clamp(20px,2.4vw,30px);
  position:relative; overflow:hidden;
}
/* faint scanlines, only where they will not hurt legibility */
:root[data-theme="night"] .machine-viewport::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent) 0 1px, transparent 1px 4px);
}
.machine-viewport > *{ position:relative; }

/* the form loses its own panel now that the screen provides one */
.machine .contact-form{
  background:none; border:0; padding:0; border-radius:0;
}

/* ── stand ───────────────────────────────────────────────────────────── */

.machine-stand{ display:flex; flex-direction:column; align-items:center; }
.machine-stand .neck{
  width:64px; height:16px;
  background:var(--surface-2);
  border:1px solid var(--line); border-top:0;
  border-radius:0 0 6px 6px;
}
.machine-stand .foot{
  width:168px; height:8px; margin-top:-1px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:6px;
}

/* ── keyboard ────────────────────────────────────────────────────────── */

.machine-kbd{
  margin-top:20px;
  display:grid; gap:5px;
  padding:12px 12px 14px;
  border-radius:12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  /* sits slightly away from the viewer, like a keyboard on a desk */
  transform:perspective(900px) rotateX(11deg);
  transform-origin:top center;
  box-shadow:var(--shadow);
}
.kbd-row{ display:flex; gap:5px; }
.kbd-key{
  flex:1 1 0; min-width:0;
  height:clamp(20px,2.3vw,30px);
  border-radius:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-bottom-width:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-size:clamp(8px,.72vw,10.5px); font-weight:500;
  color:var(--ink-3);
  user-select:none;
  transition:background .18s ease, color .18s ease, transform .1s ease,
             border-color .18s ease, box-shadow .18s ease;
}
.kbd-key.wide-1{ flex-grow:1.6; }
.kbd-key.wide-2{ flex-grow:2.2; }
.kbd-key.wide-3{ flex-grow:3; }
.kbd-key.space { flex-grow:8; }

.kbd-key.is-down{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  transform:translateY(2px);
  border-bottom-width:1px;
  box-shadow:0 0 16px -2px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* ── powered state: set once the form is in view ─────────────────────── */

.machine.is-live .mc-live{
  opacity:1;
  animation:mcFlow 3.4s linear infinite;
}
@keyframes mcFlow{ to{ stroke-dashoffset:0; } }

.machine.is-live .machine-led{ animation:ledPulse 2.6s ease-in-out infinite; }
@keyframes ledPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%    { box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ── layout ──────────────────────────────────────────────────────────── */

@media (max-width:900px){
  .machine{ padding-top:14px; }
  .machine-power{ display:none; }
  .machine-kbd{ transform:none; }
}
@media (max-width:560px){
  .kbd-row:nth-child(1){ display:none; }   /* the number row adds nothing small */
  .kbd-key{ height:18px; font-size:7.5px; }
}

@media (prefers-reduced-motion:reduce){
  .machine.is-live .mc-live,
  .machine.is-live .machine-led{ animation:none; }
  .machine.is-live .mc-live{ opacity:.7; stroke-dashoffset:0; stroke-dasharray:none; }
  .kbd-key{ transition:none; }
}

/* ==========================================================================
   The plug, the fault state and the confirmation screen
   ========================================================================== */

/* ── the plug ────────────────────────────────────────────────────────── */

.machine-power{ pointer-events:none; }   /* only the plug is interactive */

/* Seated on the socket rather than parked beside it: the plug is centred
   on the wall plate, a shade wider than it, and sits in front of it — which
   is what a plug pushed home actually looks like head-on. The size and the
   two offsets belong together; the plug's 36×42 artwork is fitted into the
   button, so changing one without the others moves it off the plate. */
.machine-plug{
  position:absolute; top:-4px; inset-inline-end:-4px;
  width:34px; height:32px; padding:0;
  border:0; background:none; cursor:grab;
  pointer-events:auto; touch-action:none;
  transition:transform .42s var(--ease);
  z-index:3;
}
.machine-plug:active{ cursor:grabbing; }
.machine-plug svg{
  width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.34));
}
:root[data-theme="day"] .machine-plug svg{ filter:drop-shadow(0 2px 3px rgba(17,32,58,.18)); }
/* The plug face has to be opaque. `--surface-2` is translucent at night,
   and the socket's two slots showed straight through the seated plug — it
   read as glass rather than as something covering the plate. */
:root, :root[data-theme="night"]{ --plug-face:#1E2C46; }
:root[data-theme="day"]{ --plug-face:#F6F7F4; }
.pl-body  { fill:var(--plug-face); stroke:var(--line-2); stroke-width:1.5; }
.pl-sheen { fill:var(--surface); opacity:.7; }
.pl-grip  { fill:var(--line-2); }
.pl-collar{ fill:var(--line-2); opacity:.85; }
.machine-plug:hover .pl-body{ stroke:var(--accent); }

/* The pins are only there to be seen once they leave the socket. Plugged
   in they would be buried in the wall, so they are hidden — and they come
   back, red, the moment the plug is dragged or pulled out. */
.pl-pin{ fill:var(--ink-3); opacity:0; transition:opacity .3s var(--ease), fill .3s var(--ease); }
.machine-plug.is-dragging .pl-pin{ opacity:.9; }

/* A reminder every so often that the plug can be grabbed. It pulses rather
   than moves: the lead is a drawn path, and a nudge would open a gap at
   the joint where the cable leaves the plug. */
.machine:not(.is-unplugged) .machine-plug .pl-body{ animation:plugHint 7s ease-in-out 3s infinite; }
@keyframes plugHint{
  0%,86%,100%{ stroke:var(--line-2); }
  91%{ stroke:var(--accent); }
  96%{ stroke:color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
}
.machine-plug.is-dragging{ transition:none; }
.machine-plug.is-dragging .pl-body{ animation:none !important; }

/* pulled out: the plug hangs square under the socket, pins bared */
.machine.is-unplugged .machine-plug{ transform:translate(0, 44px); animation:none; }
.machine.is-unplugged .pl-pin{ fill:#D9534F; opacity:1; }

/* the flash as contact is broken */
.ms-spark{
  position:absolute; left:50%; top:78%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:#FFD9A0;
  opacity:0; pointer-events:none;
}
.ms-spark.is-lit{ animation:sparkPop .42s ease-out; }
@keyframes sparkPop{
  0%  { opacity:1; transform:scale(.3); box-shadow:0 0 0 0 rgba(255,170,60,.9); }
  60% { opacity:.8; transform:scale(1.5); box-shadow:0 0 14px 5px rgba(255,150,40,.45); }
  100%{ opacity:0; transform:scale(2.1); box-shadow:0 0 22px 10px rgba(255,150,40,0); }
}
.machine-socket{ position:absolute; }

.mc-wire, .mc-live{ transition:d .42s var(--ease); stroke-linejoin:round; stroke-linecap:round; }
/* while JS redraws the lead every frame its own easing would only lag */
.machine-cable.is-tracking .mc-wire,
.machine-cable.is-tracking .mc-live{ transition:none; }
.machine.is-unplugged .mc-live{ opacity:0 !important; animation:none !important; }

/* ── fault banner, deliberately above the box ────────────────────────── */

.machine-alert{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:16px; padding:12px 16px;
  border-radius:12px;
  background:color-mix(in srgb, #D9534F 12%, var(--surface));
  border:1px solid color-mix(in srgb, #D9534F 42%, transparent);
  color:#E8736E;
  font-size:14px;
  animation:alertIn .3s var(--ease) both;
}
.machine-alert[hidden]{ display:none; }
@keyframes alertIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.ma-led{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:#E8433C; box-shadow:0 0 10px #E8433C;
  animation:faultBlink 1.1s steps(1,end) infinite;
}
@keyframes faultBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.18; } }

.ma-code{
  font-family:var(--f-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.09em; color:#FF8A84;
  padding:3px 8px; border-radius:5px;
  background:color-mix(in srgb, #D9534F 18%, transparent);
}
.ma-text{ color:var(--ink-2); }
.ma-fix{
  margin-inline-start:auto;
  padding:7px 14px; border-radius:8px; cursor:pointer;
  font-family:var(--f-body); font-size:13px; font-weight:600;
  color:#fff; background:#C9443F; border:1px solid #C9443F;
  transition:background .25s var(--ease);
}
.ma-fix:hover{ background:#B23A36; }

/* ── the machine with no power ───────────────────────────────────────── */

.machine.is-unplugged .machine-led{ background:#E8433C; box-shadow:0 0 10px #E8433C; animation:none; }
.machine.is-unplugged .machine-body{ border-color:color-mix(in srgb, #D9534F 34%, var(--line-2)); }

.machine.is-unplugged .machine-viewport{
  filter:grayscale(.55) brightness(.62);
}
.machine.is-unplugged .machine-viewport::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(120,20,16,.30));
}
.machine.is-unplugged .contact-form{ pointer-events:none; }
.machine.is-unplugged .machine-kbd{ opacity:.5; filter:grayscale(.6); }

/* ── confirmation on the screen ──────────────────────────────────────── */

.machine-done{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:30px; text-align:center;
  background:var(--bg);
  animation:doneIn .45s var(--ease) both;
}
.machine-done[hidden]{ display:none; }
@keyframes doneIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }

.md-check{
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.md-check svg{ width:30px; height:30px; }
.md-check svg path{ stroke-dasharray:34; stroke-dashoffset:34; animation:checkDraw .5s .18s var(--ease) forwards; }
@keyframes checkDraw{ to{ stroke-dashoffset:0; } }

.machine-done h3{ font-size:clamp(19px,1.7vw,23px); }
.machine-done p{ color:var(--ink-2); font-size:14.6px; max-width:42ch; }

@media (prefers-reduced-motion:reduce){
  .machine-alert, .machine-done{ animation:none; }
  .machine:not(.is-unplugged) .machine-plug .pl-body{ animation:none; }
  .ms-spark.is-lit{ animation:none; }
  .md-check svg path{ animation:none; stroke-dashoffset:0; }
  .ma-led{ animation:none; }
  .machine-plug, .mc-wire, .mc-live, .pl-pin{ transition:none; }
}