/* Double Exposure — minimal monochrome camera UI */

:root{
  --bg:        #08080A;
  --ink:       #F4F2ED;
  --ink-dim:   rgba(244,242,237,.56);
  --ink-faint: rgba(244,242,237,.32);
  --hair:      rgba(244,242,237,.16);
  --glass:     rgba(18,18,21,.52);
  --r:         999px;
  --ease:      cubic-bezier(.2,.8,.2,1);
  --pad:       max(20px, env(safe-area-inset-left));
  --top:       calc(14px + env(safe-area-inset-top));
  --bot:       calc(16px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Several blocks below set display:, which would otherwise beat the UA's
   [hidden]{display:none} and leave "hidden" panels covering the screen. */
[hidden]{display:none!important}

html,body{height:100%;overflow:hidden;overscroll-behavior:none}

body{
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.5 ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  font-feature-settings:"kern","liga","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}

svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ── screens ─────────────────────────────────────────────── */
.screen{
  position:fixed;inset:0;
  display:none;
  flex-direction:column;
  opacity:0;
  transition:opacity .32s var(--ease);
}
.screen.is-active{display:flex;opacity:1}

/* ── start ───────────────────────────────────────────────── */
.screen--start{
  justify-content:flex-end;
  padding:var(--top) var(--pad) var(--bot);
  gap:0;
}
.start__mark{color:var(--ink);opacity:.9;margin-bottom:auto;padding-top:8vh}
.start__mark svg{stroke-width:1;overflow:visible}
.start__mark circle{opacity:.85}
.start__title{
  font-size:clamp(38px,12vw,58px);
  line-height:.94;
  font-weight:300;
  letter-spacing:-.035em;
  margin-bottom:18px;
}
.start__copy{
  max-width:34ch;
  color:var(--ink-dim);
  font-size:15px;line-height:1.55;
  letter-spacing:-.005em;
  margin-bottom:36px;
}
.start__actions{display:flex;flex-direction:column;gap:10px}
.start__note{
  margin-top:14px;text-align:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  appearance:none;border:1px solid transparent;
  border-radius:var(--r);
  padding:15px 22px;
  font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--ink);color:#0A0A0C}
.btn--ghost{background:transparent;border-color:var(--hair);color:var(--ink)}
.btn--ghost:hover{border-color:rgba(244,242,237,.34)}
.btn:focus-visible,.icon:focus-visible,.shutter:focus-visible,.chip:focus-visible{
  outline:1.5px solid var(--ink);outline-offset:3px;
}

.icon{
  appearance:none;background:transparent;border:0;color:var(--ink);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--r);
  opacity:.78;
  transition:opacity .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.icon svg{width:22px;height:22px}
.icon:active{transform:scale(.92)}
.icon[aria-pressed="true"]{opacity:1;background:rgba(244,242,237,.14)}
.icon--text{width:auto;padding:0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ── stage (the only blended context) ────────────────────── */
.stage{
  position:absolute;inset:0;
  background:#000;
  isolation:isolate;
  overflow:hidden;
}
#video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:#000;
}
#video.is-mirrored{transform:scaleX(-1)}
.base{
  position:absolute;
  mix-blend-mode:screen;
  will-change:transform;
  transform-origin:50% 50%;
  pointer-events:none;
}

/* ── overlays ────────────────────────────────────────────── */
/* Scrims keep the controls legible over a bright viewfinder. They sit
   outside .stage, so they never reach the captured frame. */
.scrim{position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.scrim--top{top:0;height:172px;background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}
.scrim--bot{bottom:0;height:290px;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.24) 46%,rgba(0,0,0,0))}

.grid{position:absolute;inset:0;pointer-events:none}
.grid span{position:absolute;background:rgba(255,255,255,.15)}
.grid span:nth-child(1){left:33.333%;top:0;bottom:0;width:1px}
.grid span:nth-child(2){left:66.666%;top:0;bottom:0;width:1px}
.grid span:nth-child(3){top:33.333%;left:0;right:0;height:1px}
.grid span:nth-child(4){top:66.666%;left:0;right:0;height:1px}

.flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
}
.flash.is-firing{animation:flash .34s var(--ease)}
@keyframes flash{0%{opacity:0}12%{opacity:.92}100%{opacity:0}}

.hint{
  position:absolute;left:50%;top:calc(var(--top) + 62px);
  transform:translateX(-50%);
  padding:8px 14px;border-radius:var(--r);
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;pointer-events:none;
  animation:fadein .4s var(--ease);
}
@keyframes fadein{from{opacity:0;transform:translate(-50%,-6px)}}

.err{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  padding:0 32px;text-align:center;background:var(--bg);
}
.err__title{font-size:20px;font-weight:400;letter-spacing:-.02em}
.err__body{color:var(--ink-dim);font-size:14px;max-width:32ch;margin-bottom:10px}

/* ── bars ────────────────────────────────────────────────── */
.bar{position:absolute;left:0;right:0;z-index:3;display:flex;align-items:center}
.bar--top{top:0;padding:var(--top) calc(var(--pad) - 10px) 0;gap:2px}
.bar--flow{position:static;flex:0 0 auto}   /* in-flow variant, for the review header */
.bar--bottom{bottom:0;flex-direction:column;padding:0 var(--pad) var(--bot);gap:18px}
.bar__spacer{flex:1;display:flex;justify-content:center}
.bar__title{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* ── dial (opacity) ──────────────────────────────────────── */
.dial{width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.dial__label{
  display:flex;justify-content:space-between;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.dial__label span{color:var(--ink-dim);font-variant-numeric:tabular-nums}
.dial__range{
  appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;touch-action:none;
}
.dial__range::-webkit-slider-runnable-track{height:1px;background:var(--hair)}
.dial__range::-moz-range-track{height:1px;background:var(--hair)}
.dial__range::-webkit-slider-thumb{
  appearance:none;width:14px;height:14px;border-radius:var(--r);
  background:var(--ink);margin-top:-6.5px;
  box-shadow:0 0 0 6px rgba(8,8,10,.55);
  transition:transform .16s var(--ease);
}
.dial__range::-moz-range-thumb{
  width:14px;height:14px;border:0;border-radius:var(--r);background:var(--ink);
  box-shadow:0 0 0 6px rgba(8,8,10,.55);
}
.dial__range:active::-webkit-slider-thumb{transform:scale(1.25)}
.dial__reset{
  appearance:none;background:transparent;border:0;color:var(--ink-faint);
  font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:2px 0;cursor:pointer;align-self:flex-start;
}
.dial__reset:active{color:var(--ink)}

/* ── deck (base · shutter · roll) ────────────────────────── */
.deck{
  width:100%;max-width:460px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;
}
.chip{
  appearance:none;position:relative;
  width:48px;height:48px;border-radius:14px;
  border:1px solid var(--hair);background:rgba(244,242,237,.05);
  color:var(--ink-dim);cursor:pointer;overflow:hidden;
  display:grid;place-items:center;
  transition:transform .18s var(--ease),border-color .2s var(--ease);
}
.chip:active{transform:scale(.94)}
.chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip__plus{width:20px;height:20px}
.chip--roll{justify-self:center}
.deck>.chip:first-child{justify-self:start}
.deck>.chip:last-child{justify-self:end}

.shutter{
  appearance:none;width:74px;height:74px;border-radius:var(--r);
  border:1.5px solid rgba(244,242,237,.85);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:transform .16s var(--ease);
}
.shutter span{
  width:60px;height:60px;border-radius:var(--r);background:var(--ink);
  transition:transform .16s var(--ease),background .16s var(--ease);
}
.shutter:active{transform:scale(.96)}
.shutter:active span{transform:scale(.86)}
.shutter[disabled]{opacity:.35;pointer-events:none}

/* ── review ──────────────────────────────────────────────── */
.screen--review{background:var(--bg);padding-bottom:var(--bot)}
.review__frame{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:8px var(--pad) 18px;
}
.review__frame img{width:100%;height:100%;object-fit:contain;display:block}
.review__actions{
  width:100%;max-width:460px;margin:0 auto;
  padding:0 var(--pad);
  display:flex;gap:8px;justify-content:center;
}
.review__actions .btn{flex:1 1 0;min-width:0;padding:14px 10px;font-size:14px;text-align:center;white-space:nowrap}

/* ── roll ────────────────────────────────────────────────── */
.screen--roll{background:var(--bg)}
.roll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  padding:calc(var(--top) + 52px) 3px calc(var(--bot) + 12px);
  align-content:start;
}
.roll figure{position:relative;aspect-ratio:1;overflow:hidden;background:#111}
.roll img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.roll__empty{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ink-faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;
}

/* ── toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--bot) + 132px);
  transform:translate(-50%,10px);
  padding:10px 18px;border-radius:var(--r);
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hair);
  font-size:12px;letter-spacing:.04em;color:var(--ink);
  opacity:0;pointer-events:none;z-index:9;white-space:nowrap;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media (min-width:760px){
  .screen--start{justify-content:center;padding-left:max(6vw,var(--pad))}
  .start__mark{margin-bottom:34px;padding-top:0}
  .start__actions{flex-direction:row;max-width:520px}
  .btn{padding:15px 26px}
}