/* SPDX-License-Identifier: LicenseRef-Polycode-Proprietary */
/* Copyright 2026 Polycode Limited */

:root {
  --sky: #b2b9bc; /* the intentïon sky */
  --housing: #c9c1ad;
  --housing-dark: #8d846f;
  --bezel: #2b2b2b;
  --phosphor: #33ff66;
  --phosphor-dim: #1a7f33;
  --key: #e9e4d6;
  --key-text: #2b2b2b;
  --cancel: #c8322b;
  --clear: #e3b52b;
  --enter: #2f8f46;
  --paper: #fbf8ef;
  --paper-rule: #c9d8e6;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--sky);
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
}

/* Clouds: five fog layers fading in and out on staggered clocks, as intentïon's sky does. */
.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.fog {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: fade 10s ease-in-out infinite;
}

.fog-bottom-low {
  background-image: url("images/fog/fog-bottom-low.png");
  animation-duration: 3s;
}
.fog-bottom-risen {
  background-image: url("images/fog/fog-bottom-risen.png");
  animation-duration: 4s;
}
.fog-centre {
  background-image: url("images/fog/fog-centre.png");
  animation-duration: 5s;
}
.fog-corner-bottom-right {
  background-image: url("images/fog/fog-corner-bottom-right.png");
  animation-duration: 6s;
}
.fog-diagonal-down-right {
  background-image: url("images/fog/fog-diagonal-down-right.png");
  animation-duration: 7s;
}

@keyframes fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* The 80s cash machine. */
.atm {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 20px 20px 28px;
  border-radius: 14px;
  background: linear-gradient(var(--housing), var(--housing-dark));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.atm-brand {
  margin: 0 0 14px;
  font:
    700 0.95rem/1 "Courier New",
    monospace;
  letter-spacing: 0.2em;
  text-align: center;
  color: #3d3a32;
}

.atm-screen {
  padding: 14px;
  border-radius: 10px;
  background: var(--bezel);
  box-shadow: inset 0 0 0 3px #111;
}

.atm-screen-glass {
  position: relative;
  min-height: 150px;
  padding: 16px;
  border-radius: 6px;
  background: radial-gradient(ellipse at center, #062b12 0%, #01140a 100%);
  color: var(--phosphor);
  font:
    700 1.05rem/1.6 "Courier New",
    monospace;
  text-shadow: 0 0 6px var(--phosphor);
  overflow: hidden;
}

/* Scan lines over the phosphor. */
.atm-screen-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.25) 2px 4px);
  pointer-events: none;
}

.atm-line {
  margin: 0;
  letter-spacing: 0.08em;
}

.atm-pin {
  margin-top: 12px;
  font-size: 1.6rem;
  letter-spacing: 0.4em;
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  vertical-align: middle;
  background: var(--phosphor);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.atm-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.6fr;
  gap: 10px;
  margin-top: 18px;
}

.key {
  min-height: 52px;
  border: 0;
  border-radius: 6px;
  background: var(--key);
  color: var(--key-text);
  font:
    700 1.2rem "Courier New",
    monospace;
  box-shadow:
    0 4px 0 #9b9482,
    inset 0 1px 0 #fff;
  cursor: pointer;
}

.key:active,
.key.pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9b9482;
}

.key:focus-visible {
  outline: 3px solid var(--phosphor);
  outline-offset: 2px;
}

/* The entered key's ring, fading out over half a second. */
.key.lit {
  animation: key-lit 500ms ease-out forwards;
}

@keyframes key-lit {
  from {
    outline: 3px solid var(--phosphor);
    outline-offset: 2px;
  }
  to {
    outline: 3px solid transparent;
    outline-offset: 2px;
  }
}

.key-cancel,
.key-clear,
.key-enter {
  font-size: 0.8rem;
  color: #fff;
}
.key-cancel {
  background: var(--cancel);
}
.key-clear {
  background: var(--clear);
  color: #2b2b2b;
}
.key-enter {
  background: var(--enter);
}

.atm-slot {
  position: relative;
  height: 10px;
  margin: 22px auto 0;
  width: 70%;
  border-radius: 5px;
  background: #222;
  box-shadow: inset 0 2px 3px #000;
}

/* The strip of ledger paper the slot feeds out when the PIN is accepted. It
   shares its view-transition name with the chat page's sheet, so the
   navigation grows the strip into the page. */
.atm-paper {
  position: absolute;
  top: 5px;
  left: 6%;
  width: 88%;
  height: 0;
  background: var(--paper) repeating-linear-gradient(transparent 0 15px, var(--paper-rule) 15px 16px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  view-transition-name: ledger-paper;
}

.dispensing .atm-paper {
  animation: feed 350ms cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

@keyframes feed {
  to {
    height: 45vh;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-group(ledger-paper) {
  animation-duration: 240ms;
  animation-timing-function: ease-out;
}

/* The chat page's sheet, the strip's destination. */
.ledger-sheet {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  min-height: 80vh;
  padding: 32px 24px;
  background: var(--paper) repeating-linear-gradient(transparent 0 23px, var(--paper-rule) 23px 24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  font:
    1rem/24px "Courier New",
    monospace;
  color: #2b2b2b;
  view-transition-name: ledger-paper;
}

.ledger-sheet h1 {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  .fog {
    animation: none;
    opacity: 0.6;
  }
  .cursor {
    animation: none;
  }
  .key.lit {
    animation: none;
  }
}