/* Parkodoro landing page. Shared tokens and parts are in site.css. */

main { padding-inline: var(--edge); }
main > section, main > aside { margin-top: calc(var(--space) * 11); }

/* Sections fade up as they scroll in — only when JS is there to mark them. */
[data-reveal="pending"] { opacity: 0; transform: translateY(14px); }
[data-reveal="shown"] { transition: opacity .55s ease, transform .55s ease; }

/* ---------- hero ---------- */

.hero {
  position: relative; margin: 0; padding-block: calc(var(--space) * 9.5) calc(var(--space) * 5);

  /* Text on the left, up to the window, which hangs under its menu bar item:
     where that is depends on what's right of the item (the theme switch, the
     clock), so the script measures it into --window-x. */
  > :not(.window) { max-width: calc(var(--window-x, calc(100% - 380px)) - 32px); }
  h1 { font-size: clamp(40px, 6.2vw, 68px); margin-bottom: 22px; text-wrap: balance; }
  .lead { font-size: var(--fz-lead); line-height: 1.5; max-width: 30em; margin-bottom: 30px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 236px; }
  .hero > :not(.window) { max-width: none; }
}

.download {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  .badge img { height: 48px; width: auto; }
  .requirements { color: var(--text3); font-size: var(--fz-small); line-height: 1.45; }
}

/* The app's window, a screenshot. It isn't content: it doesn't take the
   pointer or a text selection, so dragging over it can't break the illusion. */
.window {
  width: 224px; height: 194px;
  border-radius: 11px; box-shadow: var(--panel-shadow);
  pointer-events: none; user-select: none; -webkit-user-select: none;
  transform-origin: 50% 0;
  transition: opacity .16s ease, transform .16s ease;
  img { width: 224px; height: 194px; }
}
.hero .window {
  position: absolute; z-index: 10; top: 1px;
  left: var(--window-x, calc(100% - 224px));
  isolation: isolate;
}
.hero .window.is-closed, .hero .window.is-pending { opacity: 0; transform: scale(.97) translateY(-3px); }

/* The running tile, redrawn over the screenshot's own: the app's shimmer is
   two conic gradients turning once every 4 s, a translucent shading in the
   panel's colour over the colour loop, both from off the tile's corners.
   It keeps turning under Reduce Motion, as in the app: only colour moves. */
@property --rotate { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rotate { to { --rotate: 360deg; } }
.running-tile {
  --panel: #f1f1f1;
  --shade: conic-gradient(from var(--rotate) at 150% -50%, color-mix(in srgb, var(--panel) 20%, transparent), color-mix(in srgb, var(--panel) 40%, transparent), color-mix(in srgb, var(--panel) 20%, transparent));
  position: absolute; left: 83px; top: 40px; width: 126px; height: 52px; border-radius: 6px;
  background-image: var(--shade), conic-gradient(from var(--rotate) at -50% -50%, #fa8750, #ff5854, #ff418e, #ff4e61, #fa8750);
  animation: rotate 4s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);  /* the last-used outline */
  display: flex; align-items: center; justify-content: center;
  /* 600, not the app's 500: white on colour reads heavier in AppKit */
  color: #fff; font: 600 12px/1 var(--font);

  &.rest { background-image: var(--shade), conic-gradient(from var(--rotate) at -50% -50%, #586cff, #546bff, #4646ff, #7d41ff, #586cff); }
  .noise-badge { position: absolute; top: 4px; right: 4px; width: 10px; height: 8px; opacity: .85; }
  /* bottom: 4.3px puts its baseline on the other tiles' counts */
  .count { position: absolute; left: 5px; bottom: 4.3px; font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .running-tile { --panel: #1f1f21; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } }
:root[data-theme="dark"] .running-tile { --panel: #1f1f21; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

.readout {
  position: absolute; left: 0; right: 0; top: 10px; height: 18px;
  font: 13px/18px var(--font); font-variant-numeric: tabular-nums; text-align: center;
  color: rgba(0, 0, 0, .85);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .readout { color: rgba(255, 255, 255, .88); } }
:root[data-theme="dark"] .readout { color: rgba(255, 255, 255, .88); }

/* ---------- hotkey demo: the top of a screen ---------- */

.screen {
  position: relative; margin-top: calc(var(--space) * 5);
  height: 318px; max-width: 720px;
  border-top: 1px solid var(--line);

  .menubar {
    height: 26px; padding: 0; font-size: 12.5px; z-index: 3;
    > * { height: 20px; padding: 0 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; }
    .status svg { width: 16px; height: 16px; }
    .status.is-open { background: var(--highlight); }
  }
  .window {
    position: absolute; top: 27px; left: var(--x, 0); z-index: 4;
    opacity: 0; transform: scale(.97) translateY(-3px);
    transition-duration: .12s;
    &.is-shown { opacity: 1; transform: none; }
    img { position: absolute; inset: 0; visibility: hidden; }
    img.is-current { visibility: visible; }
  }
  .keys {
    position: absolute; bottom: 22px; left: var(--x, 0); z-index: 4;
    display: flex; gap: var(--space);
  }
}

.keys kbd {
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500;
  border-radius: calc(11px * var(--bdrs-x)); border-bottom-width: 3px;
  transition: background .08s, transform .08s, border-color .08s;
  &.is-down { background: var(--fill2); border-bottom-width: 1px; transform: translateY(2px); border-color: var(--text3); }
}

/* The window you were in: a video call, sketched. Its traffic lights go grey
   while the timer window has focus and come back when focus returns. Title
   bar and call controls are drawn by its pseudo-elements; head and shoulders
   are one mask, so no darker patch where they'd overlap. */
@property --dot-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --dot-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --dot-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
.call {
  --dot-1: var(--fill2); --dot-2: var(--fill2); --dot-3: var(--fill2);
  position: absolute; left: 0; top: 52px; z-index: 2;
  width: min(390px, 56%); height: 236px;
  display: grid; grid-template: 30px 1fr 18px / 1fr 1fr; gap: 8px 6px;
  padding: 0 10px 10px;
  border-radius: calc(12px * var(--bdrs-x)); background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  transition: box-shadow .15s ease, --dot-1 .15s ease, --dot-2 .15s ease, --dot-3 .15s ease;

  &.is-active { --dot-1: #ff5f57; --dot-2: #febc2e; --dot-3: #28c840; box-shadow: 0 12px 34px rgba(0, 0, 0, .13); }
  &::before, &::after { content: ""; grid-column: 1 / -1; }
  &::before {
    background:
      radial-gradient(circle at 5.5px 50%, var(--dot-1) 5px, transparent 5.5px),
      radial-gradient(circle at 23.5px 50%, var(--dot-2) 5px, transparent 5.5px),
      radial-gradient(circle at 41.5px 50%, var(--dot-3) 5px, transparent 5.5px),
      linear-gradient(var(--fill2), var(--fill2)) center / 64px 7px no-repeat;
  }
  &::after {
    background:
      radial-gradient(circle at calc(50% - 28px) 50%, var(--fill2) 8.5px, transparent 9px),
      radial-gradient(circle at 50% 50%, var(--fill2) 8.5px, transparent 9px),
      radial-gradient(circle at calc(50% + 28px) 50%, var(--fill2) 8.5px, transparent 9px);
  }
  .face { position: relative; border-radius: calc(8px * var(--bdrs-x)); background: var(--fill); overflow: hidden; }
  .face::before {
    content: ""; position: absolute; inset: 0 13%;
    background: var(--fill2);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 82'%3E%3Cpath d='M50 10a15 15 0 1 1 0 30a15 15 0 1 1 0-30zM16 82c0-22 15-36 34-36s34 14 34 36z'/%3E%3C/svg%3E") bottom center / contain no-repeat;
  }
}
@media (max-width: 640px) { .call { width: 100%; height: 176px; } }

/* ---------- intervals ---------- */

.try {
  max-width: 520px; margin-top: calc(var(--space) * 3.75);

  label { display: block; font-size: var(--fz-small); color: var(--text3); margin-bottom: 6px; }
  input {
    width: 100%; font: 600 21px var(--mono); letter-spacing: .02em;
    border: 1px solid var(--line); border-radius: calc(9px * var(--bdrs-x)); background: var(--card);
    padding: 10px 14px; color: var(--text); outline: none;
  }
  input:focus { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 25%, transparent); }
  input[aria-invalid="true"] { border-color: var(--invalid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--invalid) 20%, transparent); }
  .examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .examples button {
    font: 600 13px var(--mono); color: var(--text2);
    background: var(--fill); border: 0; border-radius: 6px; padding: 4px var(--space); cursor: pointer;
    transition: background-color .2s ease-out, color .2s ease-out;
  }
  .examples button:hover { background: var(--fill2); color: var(--text); transition: none; }
  .phases { display: flex; gap: 4px; margin-top: calc(var(--space) * 2); height: 36px; }
  output { display: block; margin-top: 10px; font-size: 15px; color: var(--text2); min-height: 3em; }
  &:has([aria-invalid="true"]) output { color: var(--invalid); }
}
.phase {
  flex: var(--minutes);
  min-width: 6px; overflow: hidden; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(7px * var(--bdrs-x)); background: var(--work);
  color: #fff; font: 650 12.5px var(--font);
  &.break { background: var(--rest); }
}

/* ---------- brown noise ---------- */

.noise {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-top: calc(var(--space) * 3.5);
  figcaption { font-size: var(--fz-small); line-height: 1.45; color: var(--text3); }
}
.player {
  flex: 1 1 260px; max-width: 400px; min-width: 0;
  display: flex; align-items: center; gap: calc(var(--space) * 2);
  padding: 14px calc(var(--space) * 2);
  border: 1px solid var(--line); border-radius: calc(14px * var(--bdrs-x)); background: var(--card);

  button {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--work); color: #fff; display: flex; align-items: center; justify-content: center;
  }
  svg { width: 30px; height: 30px; }
  /* A triangle centres by its mass, not its box; in the centred flex box a
     3px margin moves it by half that. */
  button:not([aria-pressed="true"]) svg { margin-left: 3px; }
  /* width 0, grown by flex: otherwise the canvas's own pixel width (× the
     screen's density) sets how narrow the player can get */
  canvas { flex: 1; width: 0; height: 40px; border-radius: 2px; background: var(--fill); color: var(--text2); }
}

/* ---------- hours ---------- */

.hours {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--space) * 6); align-items: start;
  /* Heading and three paragraphs at their own height; the last row takes
     whatever the taller shot leaves, so the paragraphs keep their spacing. */
  grid-template-rows: auto auto auto 1fr;
  > :not(.log) { grid-column: 1; }
}
.log {
  grid-column: 2; grid-row: 1 / span 4;
  position: relative; width: 224px; margin-right: 190px;
  img { width: 224px; height: 396px; border-radius: 11px; box-shadow: var(--panel-shadow); }
  figcaption {
    position: absolute; left: calc(100% + 14px); top: 244px; width: 170px;
    font-size: 13.5px; line-height: 1.35; color: var(--text2);
  }
  figcaption::before { content: ""; position: absolute; right: calc(100% + 4px); top: 9px; width: 14px; border-top: 1.5px solid var(--text3); }
}
@media (max-width: 820px) {
  .hours { grid-template-columns: 1fr; grid-template-rows: none; }
  .log { grid-column: 1; grid-row: auto; margin: calc(var(--space) * 1.5) 0 0; }
}
@media (max-width: 480px) {
  .log figcaption { position: static; width: auto; margin-top: 14px; }
  .log figcaption::before { display: none; }
}

/* ---------- automation ---------- */

.automation {
  position: relative;
  padding: 30px 32px 22px;
  border-radius: calc(20px * var(--bdrs-x));
  background: var(--card); border: 1px solid var(--line);

  > :not(.macro-key) { max-width: calc(100% - 250px); }
  h2 { font-size: 24px; margin-bottom: 10px; }
  p { margin-bottom: calc(var(--space) * 1.5); }
  pre { margin: 0; font-size: 12.5px; }
  /* a one-key macro pad; its cable runs off past the card's edge */
  .macro-key { position: absolute; right: -8px; top: -25px; width: 167px; height: auto; max-width: none; }
}
@media (max-width: 760px) {
  .automation { padding-top: 92px; margin-top: 130px; }
  .automation > :not(.macro-key) { max-width: 100%; }
  .automation .macro-key { top: -58px; }
}
@media (max-width: 560px) { .automation { padding: 92px 18px 16px; margin-inline: -8px; } }

/* ---------- visibility ---------- */

.icons {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px calc(var(--space) * 3);
  margin: calc(var(--space) * 4) 0 var(--space); max-width: 620px;
  figure { display: flex; flex-direction: column; gap: 10px; }
  svg { width: 32px; height: 32px; color: var(--text); display: block; }
  figcaption { font-size: var(--fz-small); color: var(--text3); line-height: 1.35; }
}
@media (max-width: 520px) { .icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(var(--space) * 3) calc(var(--space) * 4.5);
  margin-top: calc(var(--space) * 7); padding-top: calc(var(--space) * 4.25); border-top: 1px solid var(--line);
  dt { font-size: var(--fz); font-weight: 650; letter-spacing: -.01em; margin-bottom: 4px; }
  dd { font-size: 15px; color: var(--text2); line-height: 1.5; }
}

/* ---------- closing ---------- */

.closing {
  text-align: center; margin-top: calc(var(--space) * 14);
  img { width: 96px; height: 96px; margin: 0 auto 14px; }
  h2 { margin-bottom: var(--space); }
  .tagline { margin-inline: auto; font-size: var(--fz-small); color: var(--text3); }
  .download { justify-content: center; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="pending"], .screen .window, .hero .window.is-closed, .hero .window.is-pending { transform: none; }
}