/* IRIS microsite — one screen, no page scroll.
   The installation's editorial look: fine lines, black / white /
   grey (iris_editorial.py). body.light = a paper screen (05, 09):
   the chrome turns dark. */

@font-face { font-family: "Antikor Mono"; src: url("fonts/AntikorMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Antikor Mono"; src: url("fonts/AntikorMono-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Antikor Mono"; src: url("fonts/AntikorMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }

:root {
  --bg: #000;
  --panel: rgba(0, 0, 0, .94);
  --faint: #2c2c2c;
  --line: #707070;
  --dim: #929292;
  --ink: #ececec;
  --pad: max(14px, env(safe-area-inset-left));
}

body.light {
  --faint: #cfcfcf;
  --line: #9a9a9a;
  --dim: #6e6e6e;
  --ink: #111;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Antikor Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body { position: fixed; inset: 0; }

#screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------- chrome ---------------- */

.bar {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--pad);
  z-index: 3;
  pointer-events: none;
  transition: color .35s ease;
}

.bar.top {
  top: env(safe-area-inset-top);
  height: 46px;
}

.bar.bottom {
  bottom: env(safe-area-inset-bottom);
  height: 26px;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--dim);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.brand .num { font-size: 11px; color: var(--dim); letter-spacing: .1em; margin-right: 6px; }
.brand .iris { font-weight: 400; font-size: 12px; letter-spacing: .3em; }
.brand .by { font-size: 9px; color: var(--dim); letter-spacing: .16em; }
.brand .logo { height: 9px; width: auto; transition: filter .35s ease; }
body.light .brand .logo { filter: invert(1); }
.brand .status { font-size: 11px; color: var(--ink); letter-spacing: .14em; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }

nav { display: flex; gap: 2px; pointer-events: auto; white-space: nowrap; flex: none; }

button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 10px 8px;
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
}
button:hover, button:focus-visible, button[aria-expanded="true"] { background: var(--ink); color: var(--bg); outline: none; }
body.light button:hover, body.light button:focus-visible, body.light button[aria-expanded="true"] { color: #ececec; }

/* ---------------- panels (INFO / CREDITS) ---------------- */

.panel {
  /* laptop / desktop: a file on the right */
  --top: calc(env(safe-area-inset-top) + 58px);
  --bottom: calc(env(safe-area-inset-bottom) + 38px);
  position: absolute;
  z-index: 4;
  top: var(--top);
  right: var(--pad);
  width: min(500px, 38vw);
  max-height: calc(100% - var(--top) - var(--bottom));
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .94);
  border: 1px solid #555;
  color: #ececec;
  /* fluid type: one scale for every screen */
  --fs: clamp(13px, 0.55vw + 9px, 15px);
  --ink: #ececec;
  --dim: #929292;
  --faint: #2c2c2c;
  --line: #555;
}
.panel[hidden] { display: none; }
.panel.opening { animation: open .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* fine + marks on two corners */
.panel::before, .panel::after {
  content: "+";
  position: absolute;
  font-size: 13px;
  line-height: 1;
  color: #ececec;
}
.panel::before { left: -5px; top: -7px; }
.panel::after { right: -5px; bottom: -7px; }

.panel-head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 0 4px 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: calc(var(--fs) * 0.78);
  letter-spacing: .14em;
  color: var(--dim);
}
.panel-head button { min-width: 44px; min-height: 40px; color: #ececec; }
.panel-head button:hover, .panel-head button:focus-visible { background: #ececec; color: #000; }

.panel-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--fs) * 1.4) calc(var(--fs) * 1.4) calc(var(--fs) * 1.8);
  font-size: var(--fs);
  line-height: 1.7;
  color: var(--dim);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.panel-body h1 {
  margin: 0 0 calc(var(--fs) * 1.6);
  font-family: "IBM Plex Mono", "Antikor Mono", ui-monospace, monospace;
  font-weight: 300;
  font-size: calc(var(--fs) * 2.6);
  letter-spacing: .6em;
  color: var(--ink);
  line-height: 1;
}
.panel-body h1 span {
  display: block;
  margin-top: 1em;
  font-family: "Antikor Mono", ui-monospace, monospace;
  font-size: calc(var(--fs) * 0.82);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--dim);
  line-height: 1.5;
  text-transform: uppercase;
}
.panel-body p { margin: 0 0 1.05em; max-width: 62ch; }
.panel-body strong { color: var(--ink); font-weight: 600; }
.panel-body .lead { color: var(--ink); font-size: 1.15em; line-height: 1.5; }
.panel-body .end { color: var(--ink); margin-top: 1.6em; }
.panel-body .end::after { content: ""; display: block; width: 1.4em; border-top: 1px solid var(--ink); margin-top: 1em; }
.small { font-size: 10px; letter-spacing: .1em; color: var(--dim); }

.credits { margin: 0 0 2em; }
.credits div { padding: .9em 0; border-bottom: 1px solid var(--faint); }
.credits dt { font-size: .75em; letter-spacing: .14em; color: var(--dim); margin-bottom: .3em; }
.credits dd { margin: 0; font-size: 1.3em; color: var(--ink); letter-spacing: .03em; line-height: 1.3; }

.made-by { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .75em; letter-spacing: .14em; }
.made-by img { height: 1.3em; width: auto; }

/* tablet (iPad portrait + landscape): a centred file, wider */
@media (min-width: 641px) and (max-width: 1180px) and (pointer: coarse),
       (min-width: 641px) and (max-width: 900px) {
  .panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(620px, 86vw);
    --fs: 15px;
  }
}

/* phone: a sheet over the full width, up to the header */
@media (max-width: 640px) {
  .panel {
    left: var(--pad);
    right: var(--pad);
    width: auto;
    --fs: 14px;
  }
}

/* phone held sideways: short screen, use all of it */
@media (max-height: 500px) and (orientation: landscape) {
  .panel {
    --top: calc(env(safe-area-inset-top) + 50px);
    --bottom: calc(env(safe-area-inset-bottom) + 30px);
    left: auto;
    right: var(--pad);
    transform: none;
    width: min(560px, 62vw);
    --fs: 13px;
  }
  .panel-body h1 { font-size: calc(var(--fs) * 2); }
}

/* ---------------- camera refused ---------------- */

.nocam {
  position: absolute;
  z-index: 2;
  left: 50%; top: 62%;
  transform: translate(-50%, 0);
  width: min(360px, calc(100% - 2 * var(--pad)));
  text-align: center;
}
.nocam[hidden] { display: none; }

/* the start button's hit area: invisible, the canvas draws the look */
.begin {
  position: absolute;
  z-index: 2;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.begin[hidden] { display: none; }

/* Antikode logos link to antikode.com */
.logo-link { display: flex; align-items: center; }
.logo-hit { position: absolute; z-index: 2; opacity: 0; cursor: pointer; }
.logo-hit[hidden] { display: none; }
.nocam p { margin: 0 0 10px; font-weight: 600; letter-spacing: .14em; font-size: 13px; }
.nocam .small { font-weight: 400; line-height: 1.6; }
.nocam button { margin-top: 8px; border: 1px solid var(--line); padding: 10px 16px; }

.bar.bottom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .bar.bottom .local { display: none; }
}
@media (max-width: 460px) {
  .brand .status { display: none; }
  button { padding: 10px 5px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel.opening { animation: none; }
}