/*
 * theme.css — Kitchen Ken Burns.
 *
 * Direction: a quiet editing suite, like Frame.io's review screen — warm
 * graphite that lets kitchen photographs carry the colour, with one brass
 * accent borrowed from cabinet hardware. Opens dark (photos read best on a
 * dark ground); the light set below is a warm stone variant, not an inversion.
 * Type: Archivo for headings, DM Sans for reading, DM Mono for timecodes.
 */

:root {
  color-scheme: dark;

  --canvas: #141311;
  --surface: #1d1b18;
  --surface-2: #26231f;
  --border: #34302a;
  --border-strong: #4f493f;
  --ink: #f2eee8;
  --muted: #a9a197;
  --accent: #e0a23b;
  --accent-hover: #ebb45a;
  --accent-ink: #1a1206;
  --accent-text: #e8b04f;
  --accent-strong: #f0c47a;
  --accent-soft: #33281a;
  --accent-border: #5a4526;
  --success: #3f9d63;
  --success-ink: #0d1a12;
  --success-soft: #16261c;
  --success-strong: #7cc99a;
  --warning: #d98b2b;
  --warning-ink: #1a1006;
  --warning-soft: #2e2114;
  --warning-strong: #eab071;
  --danger: #d9534a;
  --danger-ink: #ffffff;
  --danger-soft: #311a18;
  --danger-strong: #ef8c84;
  --chart-1: #e0a23b;
  --chart-2: #7cc99a;
  --chart-3: #8fb3e8;
  --chart-4: #ef8c84;
  --chart-5: #c9a3e6;
  --chart-6: #a9a197;

  --font-display: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0.625rem;
  --radius-card: 1rem;
  --radius-input: 0.625rem;
  --shadow-card: none;
  --shadow-btn: none;
  --btn-weight: 600;
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f5f2ed;
  --surface: #ffffff;
  --surface-2: #ebe6de;
  --border: #ddd6cb;
  --border-strong: #a89e90;
  --ink: #1c1915;
  --muted: #655d53;
  --accent: #8f5c0f;
  --accent-hover: #7a4e0c;
  --accent-ink: #ffffff;
  --accent-text: #80520d;
  --accent-strong: #5f3e09;
  --accent-soft: #f3e6cf;
  --accent-border: #dcc39a;
  --success: #1f7a46;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #1a6a3c;
  --warning: #a85a0c;
  --warning-ink: #ffffff;
  --warning-soft: #f6e5d2;
  --warning-strong: #8a4a09;
  --danger: #b42a22;
  --danger-ink: #ffffff;
  --danger-soft: #f7dedb;
  --danger-strong: #a1241d;
  --chart-1: #8f5c0f;
  --chart-2: #1f7a46;
  --chart-3: #2f5f9e;
  --chart-4: #b42a22;
  --chart-5: #7a4aa0;
  --chart-6: #655d53;
}

/*
 * app.css — Kitchen Ken Burns' own screen: the transition bar, the photo
 * strip (empty drop zone, reorderable cards, add-more tile), the live
 * camera-move preview on each photo, the render track, the recent list and
 * the API-call view. Tokens only.
 */

/* ---- Ground: a faint brass light from above, over the canvas ---------- */
.app-ground {
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--canvas);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- Transition bar ----------------------------------------------------- */
.cut-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
@media (min-width: 64rem) {
  .cut-bar { flex-direction: row; align-items: center; }
}

/* The first photo has no cut into it: a quiet marker holds the row so the
   move pickers line up across every card. */
.cut-start {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  min-width: 0;
  padding: 0 0.75rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-input);
  font-size: 0.875rem;
  color: var(--muted);
}
.frame:not(.is-first) [data-opening] { display: none; }
.frame.is-first [data-cut] { display: none; }

/* A picker that "Apply to all cuts" just changed glows once. */
@keyframes cut-flash {
  0% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { border-color: var(--border-strong); box-shadow: 0 0 0 0 transparent; }
}
.input.is-flash { animation: cut-flash 900ms ease-out; }
html.reduced-motion .input.is-flash { animation: none; }

/* ---- The photo strip ---------------------------------------------------
   One surface with sprocket holes along both edges. Empty, it is one big
   drop zone; with photos, a grid of cards that reflows from one column on a
   phone to five on a laptop, ending in an "Add more" tile. */
.filmstrip {
  position: relative;
  padding: 2rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 0.5rem;
  border-radius: 0.125rem;
  background: repeating-linear-gradient(90deg, var(--surface-2) 0 0.875rem, transparent 0.875rem 1.75rem);
  pointer-events: none;
}
.filmstrip::before { top: 0.75rem; }
.filmstrip::after { bottom: 0.75rem; }
@media (min-width: 64rem) {
  .filmstrip { padding: 2rem 1.25rem; }
}
.filmstrip.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
}

.drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 18rem;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  border: 1.5px dashed var(--border-strong);
  border-radius: 0.75rem;
  background: var(--surface-2);
  transition: border-color 160ms ease;
}
.drop-empty:hover,
.filmstrip.is-dragover .drop-empty { border-color: var(--accent); }
.filmstrip:focus-within .drop-empty { box-shadow: var(--ring); }

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.25rem 1rem;
}
.filmstrip:not(.has-photos) .frames { display: none; }
.filmstrip.has-photos .drop-empty { display: none; }

.frame { min-width: 0; }
.frame.is-dragging { opacity: 0.35; }

.frame-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: grab;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-2);
}
.frame-photo:active { cursor: grabbing; }

.frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

.frame-num {
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--ink);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
}

.frame-grip {
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.frame-photo:hover .frame-grip,
.frame-photo:focus-visible .frame-grip { opacity: 1; }
@media (hover: none) { .frame-grip { display: none; } }

/* The opening fade-in and closing fade-out, drawn as a black edge on the
   first and last photo while that switch is on. */
.frame-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.frame-fade-in { background: linear-gradient(90deg, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0) 50%); }
.frame-fade-out { background: linear-gradient(270deg, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0) 50%); }
.frame:not(.is-first) .frame-fade-in,
.frame:not(.is-last) .frame-fade-out,
.filmstrip.no-fade-in .frame-fade-in,
.filmstrip.no-fade-out .frame-fade-out { display: none; }

.frame-busy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--canvas) 60%, transparent);
}
.frame.is-busy .frame-busy { display: grid; }

.frame-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  aspect-ratio: 16 / 9;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  border: 1.5px dashed var(--border-strong);
  border-radius: 0.75rem;
  background: var(--surface-2);
  transition: border-color 160ms ease, color 160ms ease;
}
.frame-add:hover { border-color: var(--accent); color: var(--ink); }

/* ---- The camera-move preview ------------------------------------------
   Each photo plays its chosen move on a 5-second loop, so the card shows
   roughly what JSON2Video will do with it. */
@keyframes kb-zoom-in { from { transform: scale(1); } to { transform: scale(1.16); } }
@keyframes kb-zoom-out { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes kb-in-left { from { transform: scale(1.06) translateX(-2%); } to { transform: scale(1.16) translateX(3%); } }
@keyframes kb-out-right { from { transform: scale(1.16) translateX(3%); } to { transform: scale(1.06) translateX(-2%); } }
@keyframes kb-in-up { from { transform: scale(1.06) translateY(-2%); } to { transform: scale(1.16) translateY(3%); } }
@keyframes kb-out-down { from { transform: scale(1.16) translateY(3%); } to { transform: scale(1.06) translateY(-2%); } }

.frame-img[data-effect="zoom-in"] { animation: kb-zoom-in 5s ease-in-out infinite; }
.frame-img[data-effect="zoom-out"] { animation: kb-zoom-out 5s ease-in-out infinite; }
.frame-img[data-effect="in-left"] { animation: kb-in-left 5s ease-in-out infinite; }
.frame-img[data-effect="out-right"] { animation: kb-out-right 5s ease-in-out infinite; }
.frame-img[data-effect="in-up"] { animation: kb-in-up 5s ease-in-out infinite; }
.frame-img[data-effect="out-down"] { animation: kb-out-down 5s ease-in-out infinite; }

html.reduced-motion .frame-img,
.frame.is-dragging .frame-img { animation: none; }

/* ---- Rendering -------------------------------------------------------- */
.render-card { border-color: var(--accent-border); }

@keyframes render-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}
.render-track {
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}
.render-track > span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: render-slide 1.6s ease-in-out infinite;
}
html.reduced-motion .render-track > span { width: 100%; animation: none; opacity: 0.6; }

.reel-player {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.reel-player video {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Recent renders --------------------------------------------------- */
.recent-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.recent-row + .recent-row { border-top: 1px solid var(--border); }

.recent-thumb {
  width: 5rem;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--surface-2);
}
.recent-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 40rem) {
  .recent-thumb { width: 7rem; }
}

/* ---- The API call ----------------------------------------------------- */
.api-call > * + * { margin-top: 1.5rem; }
.api-step > * + * { margin-top: 0.75rem; }
.api-step-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}
.api-step-num {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--accent);
  color: var(--accent-ink);
}
.api-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.api-line code {
  min-width: 0;
  overflow-wrap: anywhere;
}
.api-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.code-block {
  max-height: 18rem;
  margin-top: 0.25rem;
  overflow: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}