/*
 * 2000s Digicam: a camera picker, the chosen camera around the drop zone and
 * the result, and the adjustments.
 *
 * Tailwind never scans public/, so this file uses the semantic custom
 * properties from src/styles/global.css for page chrome. The cameras are the
 * SVGs in src/tools/digicam-filter/cameras/, inlined by the page in fixed
 * colours so they do not flip with the theme; their cam-* classes are the
 * hooks styled here. Naming: .ef-* (the page), .cam-* (inside a drawing).
 */

/* The LCD lettering: the Sony's dot matrix and the Canon's condensed type.
   SIL Open Font License, see fonts/OFL.txt and fonts/OFL-saira-condensed.txt. */
@font-face {
  font-family: "DotGothic16";
  src: url("./fonts/dotgothic16-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Saira Condensed";
  src: url("./fonts/saira-condensed-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.ef-page {
  /* 4rem clears the fixed navbar (h-16 in Navbar.astro). */
  padding-top: calc(4rem + 1.25rem);
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  min-height: 70vh;
}

@media (min-width: 40rem) {
  .ef-page {
    padding-top: calc(4rem + 2.5rem);
  }
}

/* The cookie notice is one row from `md` up, stacked on a phone. */
body:has(#cookie-banner:not([hidden])) .ef-page {
  padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 48rem) {
  body:has(#cookie-banner:not([hidden])) .ef-page {
    padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
  }
}

.ef-wrap {
  max-width: 52rem;
  margin: 0 auto;
}

/* Several of these set display, which would otherwise beat [hidden]. */
.ef-wrap [hidden] {
  display: none !important;
}

.ef-head {
  text-align: center;
  margin-bottom: 1.25rem;
}

.ef-title {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-fg-strong);
  margin: 0;
}

.ef-lede {
  max-width: 34rem;
  margin: 0.6rem auto 0;
  color: var(--color-fg-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---- camera picker --------------------------------------------------------- */

.ef-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-sunken);
}

.ef-pick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.ef-pick-year {
  font-size: 0.75rem;
  font-weight: 500;
}

.ef-pick[aria-checked="true"] {
  background: var(--color-surface-raised);
  color: var(--color-fg-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

/* In dark mode the raised and sunken surfaces are the same grey. */
.dark .ef-pick[aria-checked="true"],
.dark .ef-print-view[aria-pressed="true"] {
  background: var(--color-border-strong);
}

.ef-pick:disabled {
  cursor: default;
}

.ef-pick:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- cameras ---------------------------------------------------------------- */

.ef-cam {
  width: 100%;
  margin: 0 auto;
}

.ef-cam-screen {
  max-width: 50rem;
}

/* A drawing is --vw by --vh units. Its screen slot and invisible buttons take
   --x, --y, --w and --h in those units, so each stays on its piece of the
   drawing at any width. */
.ef-body {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--vw) / var(--vh);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Soft shadow under the body. */
.ef-body::before {
  content: "";
  position: absolute;
  inset: 12% 3% 2%;
  border-radius: 5% / 7%;
  box-shadow:
    0 2.2cqw 4.5cqw -0.5cqw rgb(0 0 0 / 0.32),
    0 0.6cqw 1.2cqw rgb(0 0 0 / 0.12);
}

.ef-cam-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ef-body > .ef-slot,
.ef-hit {
  position: absolute;
  left: calc(var(--x) * 100% / var(--vw));
  top: calc(var(--y) * 100% / var(--vh));
  width: calc(var(--w) * 100% / var(--vw));
  height: calc(var(--h) * 100% / var(--vh));
}

.ef-body > .ef-slot {
  z-index: 1;
}

.ef-hit {
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.ef-hit-round {
  border-radius: 50%;
}

.ef-hit:disabled {
  cursor: default;
}

.ef-hit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* A held button sinks or darkens on the drawing. */
.cam-shutter {
  transition: transform 80ms ease-out;
}

.ef-body:has(.ef-hit[data-press="shutter"]:active) .cam-shutter {
  transform: translateY(3px);
}

.cam-press {
  transition: opacity 80ms ease-out;
}

/* Before and After stay pressed in, with a lit label, while their view shows. */
.ef-body:has(.ef-hit[data-view="before"][aria-pressed="true"]) .cam-btn-before .cam-press,
.ef-body:has(.ef-hit[data-view="after"][aria-pressed="true"]) .cam-btn-after .cam-press {
  opacity: 0.14;
}

.cam-label {
  transition: fill 150ms;
}

.ef-body:has(.ef-hit[data-view="before"][aria-pressed="true"]) .cam-label-before,
.ef-body:has(.ef-hit[data-view="after"][aria-pressed="true"]) .cam-label-after {
  fill: var(--cam-lit, #1f858b);
}

.ef-body:has(.ef-hit[data-press="play"]:active) .cam-btn-play .cam-press,
.ef-body:has(.ef-hit[data-press="before"]:active) .cam-btn-before .cam-press,
.ef-body:has(.ef-hit[data-press="after"]:active) .cam-btn-after .cam-press,
.ef-body:has(.ef-hit[data-press="new"]:active) .cam-btn-new .cam-press,
.ef-body:has(.ef-hit[data-press="flash"]:active) .cam-btn-flash .cam-press,
.ef-body:has(.ef-hit[data-press="download"]:active) .cam-btn-download .cam-press,
.ef-body:has(.ef-hit[data-press="mode"]:active) .cam-btn-mode .cam-press,
.ef-body:has(.ef-hit[data-press="iso"]:active) .cam-btn-iso .cam-press,
.ef-body:has(.ef-hit[data-press="macro"]:active) .cam-btn-macro .cam-press,
.ef-body:has(.ef-hit[data-press="center"]:active) .cam-btn-center .cam-press {
  opacity: 0.2;
}

/* A round shade the size of the key, even where its target is wider. */
.ef-hit[data-press="pad"]:active {
  background: radial-gradient(circle closest-side, rgb(0 0 0 / 0.18), transparent);
}

/* Lamps: ready once the edit is back, busy while it runs. */
.cam-led,
.cam-glow {
  transition: fill 200ms, opacity 200ms;
}

.ef-wrap.is-ready .cam-led-ready {
  fill: var(--cam-ready, #5ed14a);
}

.ef-wrap.is-ready .cam-glow-ready {
  opacity: 0.75;
}

.ef-cam:has(.ef-busy:not([hidden])) .cam-led-busy {
  fill: var(--cam-busy, #ff9d1f);
}

.ef-cam:has(.ef-busy:not([hidden])) .cam-glow-busy {
  opacity: 0.75;
}

/* The Canon's Print/Share button lights blue when the photo is ready, and its
   busy screen speaks in its own lettering. */
.ef-cam[data-camera="sd600"] {
  --cam-ready: #4a9bff;
}

.ef-cam[data-camera="sd600"] .ef-busy {
  font-family: "Saira Condensed", ui-sans-serif, sans-serif;
  font-size: max(12px, 2.9cqw);
  letter-spacing: 0.02em;
}

/* ---- the screen ------------------------------------------------------------ */

/* The idle screen (the OSD and UPLOAD PHOTO) is part of each drawing. This box
   holds the file picker over it, then the photo. */
.ef-lcd {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ef-drop {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.ef-drop:hover {
  background: rgb(255 255 255 / 0.03);
}

.ef-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.ef-lcd:has(.ef-file:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* A photo dragged over the page frames the screen. */
.ef-wrap.is-dragging .ef-lcd {
  outline: 0.35cqw solid #f1f3ee;
  outline-offset: -1cqw;
}

.ef-stage {
  position: absolute;
  inset: 0;
}

/* Keyboard focus lands here when the button that had it goes away mid-run. */
.ef-stage:focus {
  outline: none;
}

.ef-stage:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.ef-frame {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #06090c;
}

/* Glare on the glass, lined up with the drawings'. */
.ef-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025) 30%, transparent 44%);
  pointer-events: none;
}

.ef-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sits over the original while the edit runs, in the camera's lettering. */
.ef-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3cqw;
  background: rgb(6 9 12 / 0.72);
  color: #f1f3ee;
  font-family: "DotGothic16", ui-monospace, monospace;
  font-size: max(11px, 2.4cqw);
  line-height: 1;
  text-shadow: 0 0 2px #05080a, 1px 1px 0 #05080a;
  font-variant-numeric: tabular-nums;
}

.ef-progress {
  position: relative;
  display: flex;
  gap: 0.7cqw;
  padding: 0.45cqw;
  border: 0.25cqw solid currentColor;
}

.ef-progress i {
  width: 1.2cqw;
  height: 1.8cqw;
  background: currentColor;
  opacity: 0.2;
}

/* The lit blocks, drawn over the dim ones. */
.ef-progress::after {
  content: "";
  position: absolute;
  top: 0.45cqw;
  bottom: 0.45cqw;
  left: 0.45cqw;
  width: calc(100% - 0.9cqw);
  background: repeating-linear-gradient(90deg, currentColor 0 1.2cqw, transparent 1.2cqw 1.9cqw);
}

/* ---- film: a lab print under the camera ------------------------------------ */

.ef-cam-film {
  max-width: 40rem;
}

/* The FunSaver's flash button glows amber when the flash is on, and its print
   is lettered in the wrap's orange. */
.ef-cam[data-camera="disposable"] {
  --cam-flash: #ffc247;
  --film-ink: #f8a223;
}

.ef-print-idle {
  display: none;
}

/* No wider than lets a tall photo's print fit on the screen. */
.ef-print {
  width: min(100%, 30rem, calc(62vh * var(--photo-ratio, 1.5)));
  margin: 1.5rem auto 0;
}

.ef-print-paper {
  container-type: inline-size;
  padding: 3.5% 3.5% 11%;
  border-radius: 2px;
  background: linear-gradient(170deg, #fefdf9, #f2efe7);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.2),
    0 14px 30px -12px rgb(0 0 0 / 0.4);
  transform: rotate(-1.2deg);
}

.ef-print .ef-slot {
  position: relative;
}

.ef-print .ef-lcd {
  position: relative;
  inset: auto;
  aspect-ratio: var(--photo-ratio, 1.5);
  background: linear-gradient(160deg, #26211b, #14110d);
}

.ef-print .ef-frame {
  background: #14110d;
}

.ef-print .ef-frame::after {
  background: linear-gradient(120deg, rgb(255 255 255 / 0.06), transparent 40%);
}

/* The edit comes back at the nearest ratio the model offers: fill the print with it. */
.ef-print .ef-img {
  object-fit: cover;
}

.ef-print .ef-print-idle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--film-ink, #f5c518);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: clamp(0.85rem, 4.2cqw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ef-print .ef-drop:hover .ef-print-idle {
  color: #fff3c4;
}

/* The darkroom: a red safelight over the original while the edit runs. */
.ef-print .ef-busy {
  gap: 0.6rem;
  background: rgb(66 10 6 / 0.66);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: clamp(0.8rem, 3.6cqw, 1.1rem);
  letter-spacing: 0.08em;
  text-shadow: none;
}

.ef-print .ef-progress {
  display: none;
}

.ef-print-views {
  display: flex;
  justify-content: center;
  gap: 2px;
  width: fit-content;
  margin: 1.1rem auto 0;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-sunken);
}

.ef-print-view {
  min-height: 2.25rem;
  padding: 0.35rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.ef-print-view[aria-pressed="true"] {
  background: var(--color-surface-raised);
  color: var(--color-fg-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

.ef-print-view:disabled {
  cursor: default;
}

.ef-print-view:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The film camera's flash: the ready light follows the flash mode, the flash
   window fires when a photo goes in, and the wheel winds on for a new photo. */
.cam-flash-pop {
  transition: opacity 500ms ease-out;
}

.ef-body:has(.ef-hit[data-press="shutter"]:active) .cam-flash-pop {
  opacity: 0.95;
  transition: none;
}

.ef-wrap[data-flash="off"] .cam-flash-pop {
  display: none;
}

.ef-wrap[data-flash="on"] .cam-led-flash {
  fill: var(--cam-flash, #ff6a3d);
}

.ef-wrap[data-flash="on"] .cam-glow-flash {
  opacity: 0.8;
}

.ef-wrap[data-flash="auto"] .cam-glow-flash {
  opacity: 0.3;
}

.cam-wheel {
  transition: transform 120ms ease-out;
}

.ef-body:has(.ef-hit[data-press="new"]:active) .cam-wheel {
  transform: translateX(-4px);
}

/* ---- adjustments ----------------------------------------------------------- */

.ef-adjust {
  max-width: 36rem;
  margin: 1.1rem auto 0;
  padding: 0.7rem 0.9rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface-raised);
}

.ef-adjust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.ef-adjust-title {
  margin: 0;
  color: var(--color-fg-strong);
  font-size: 0.95rem;
  font-weight: 700;
}

.ef-adjust-reset {
  min-height: 2rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.ef-adjust-reset:focus-visible,
.ef-slider input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ef-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
}

.ef-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
}

.ef-slider label {
  color: var(--color-fg-strong);
  font-size: 0.8rem;
  font-weight: 600;
}

.ef-slider output {
  color: var(--color-fg-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.ef-slider input {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--color-accent);
}

/* ---- actions --------------------------------------------------------------- */

.ef-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.ef-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ef-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-fg-strong);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.ef-btn:hover {
  border-color: var(--color-fg-muted);
  text-decoration: none;
}

.ef-btn-primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.ef-btn-primary:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

.ef-status {
  min-height: 1.5rem;
  margin: 0.9rem 0 0;
  color: var(--color-fg-muted);
  font-size: 0.95rem;
  text-align: center;
}

.ef-status.is-error {
  color: var(--color-danger);
  font-weight: 600;
}

/* Outside the tool's box, so it ends up right above the footer's blue band. */
.ef-note {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 max(1rem, env(safe-area-inset-left, 0px)) 1.5rem;
  color: var(--color-fg-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

/* ---- motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* The memory card blinks, like the camera's own warning. */
  .cam-card {
    animation: ef-blink 1.4s steps(1, end) infinite;
  }

  .ef-cam:has(.ef-busy:not([hidden])) .cam-led-busy {
    animation: ef-lamp 0.9s steps(1, end) infinite;
  }

  .ef-cam:has(.ef-busy:not([hidden])) .cam-glow-busy {
    animation: ef-blink 0.9s steps(1, end) infinite;
  }

  .ef-progress::after {
    animation: ef-fill 3s steps(6, jump-none) infinite;
  }

  .ef-cam:has(.ef-busy:not([hidden])) .cam-flash-pop {
    animation: ef-pop 900ms ease-out 1;
  }
}

@keyframes ef-pop {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 0;
  }
}

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

@keyframes ef-lamp {
  50% {
    fill: #2e312f;
  }
}

@keyframes ef-fill {
  from {
    width: 0;
  }
}

@media (max-width: 30rem) {
  .ef-page {
    padding-top: calc(4rem + 0.4rem);
  }

  .ef-head {
    margin-bottom: 0.8rem;
  }

  .ef-title {
    font-size: 1.6rem;
  }

  .ef-lede {
    margin-top: 0.3rem;
    font-size: 0.85rem;
  }

  .ef-picker {
    width: 100%;
    margin-bottom: 0.8rem;
    border-radius: 1.4rem;
  }

  /* Short phones shrink the camera rather than pushing the buttons off screen. */
  .ef-cam {
    max-width: min(100%, calc(38svh * var(--vw) / var(--vh)));
  }

  .ef-adjust {
    margin-top: 0.8rem;
  }

  .ef-bar {
    margin-top: 0.6rem;
  }

  .ef-status {
    min-height: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
  }

  .ef-pick {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
  }

  .ef-pick-year {
    display: none;
  }

  .ef-sliders {
    gap: 0.4rem 0.9rem;
  }

  .ef-actions {
    width: 100%;
  }

  .ef-actions .ef-btn {
    flex: 1 1 auto;
  }
}