/* ==========================================================================
   The office: the noir room around the Mac SE.
   The room is a render drawn by js/film.js on a canvas; js/scene.js moves the
   camera between standing in the room and sitting at the Mac (body.seated).
   ========================================================================== */

.office {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip; /* not a scroll box, so focusing an offscreen hotspot can't scroll it */
  background: #000;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.office.pointing { cursor: pointer; }
body.reading .office { cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- The picture ---------- */

.plates { position: absolute; inset: 0; }
.plate {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  opacity: 0;
  transform-origin: 0 0;
}

.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.film.show { opacity: 1; }

/* Without WebGL, the still stands in: grain and lightning come from CSS. */
.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  animation: grain 0.9s steps(6) infinite;
}
body.gl .grain { display: none; }
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-7%, 4%); }
  40%  { transform: translate(5%, -9%); }
  60%  { transform: translate(-4%, 8%); }
  80%  { transform: translate(9%, 2%); }
  100% { transform: translate(-2%, -5%); }
}

.flash {
  position: absolute;
  inset: 0;
  background: #dfe8ff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
body:not(.gl) .office.striking .flash { animation: flash 0.8s linear both; }
@keyframes flash {
  0% { opacity: 0; } 4% { opacity: 0.18; } 10% { opacity: 0.03; }
  35% { opacity: 0.12; } 55% { opacity: 0; } 100% { opacity: 0; }
}

/* ---------- Props: keyboard and screen-reader stand-ins over the picture ---------- */

.hotspots {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  --s: 1;
}
.hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  border-radius: calc(6px / var(--s));
}
.hotspot:focus { outline: none; }
.hotspot:focus-visible {
  outline: calc(1.5px / var(--s)) solid rgba(235, 229, 214, 0.7);
  outline-offset: calc(3px / var(--s));
}
body.sitting .hotspots,
body.seated .hotspots,
body.in-insert .hotspots { visibility: hidden; }

/* ---------- Title card and captions ---------- */

.titles {
  position: fixed;
  top: max(5vh, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 16px;
  text-align: center;
  color: #dcd5c4;
  pointer-events: none;
  text-shadow: 0 2px 18px #000, 0 0 2px #000;
  transition: opacity 0.6s, visibility 0s;
}
.titles p, .titles h1 { margin: 0; opacity: 0; animation: title-in 1.6s ease forwards; }
/* a soft shade behind the titles, so they read over the bright blinds */
body:not(.tall) .titles::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * max(5vh, env(safe-area-inset-top)));
  bottom: -2.5em;
  left: 0;
  right: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 30%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3) 60%, transparent);
}
.titles .kicker {
  font-family: var(--ui-font);
  font-size: clamp(13px, 1.35vw, 17px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e6dcc4;
  text-shadow: 0 0 2px #000, 0 0 8px #000, 0 2px 18px #000;
  animation-delay: 0.6s;
}
.titles h1 {
  margin-top: 0.35em;
  font-family: var(--stamp-font);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 60px);
  letter-spacing: 0.04em;
  line-height: 1.1;
  animation-delay: 1.3s;
}
.titles .dek {
  margin-top: 0.4em;
  font-family: var(--type-font);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 19px);
  animation-delay: 2.1s;
}
.titles .hint {
  margin-top: 1.2em;
  font-family: var(--type-font);
  font-size: clamp(15px, 1.45vw, 20px);
  letter-spacing: 0.04em;
  color: #efe7d4;
  text-shadow: 0 0 2px #000, 0 0 8px #000, 0 2px 18px #000;
  animation: title-in 1.4s ease 3.4s forwards, hint 3.4s ease-in-out 4.8s infinite;
}
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
.hint-drag { display: none; }
body.tall .hint-drag { display: block; margin-top: 0.45em; font-size: 0.86em; color: #b7ae98; }
@keyframes title-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hint { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

body.sitting .titles,
body.seated .titles,
body.in-insert .titles { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }
body.captioning .titles .hint { visibility: hidden; }

.caption {
  position: fixed;
  left: 50%;
  bottom: max(7vh, calc(env(safe-area-inset-bottom) + 64px));
  z-index: 4;
  max-width: min(40em, calc(100vw - 32px));
  margin: 0;
  padding: 0.35em 0.9em;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.62);
  color: #ebe5d6;
  font-family: var(--type-font);
  font-size: clamp(14px, 1.25vw, 18px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.caption small { display: block; margin-top: 0.25em; font-size: 0.8em; color: #b7ae98; }
.caption.show { opacity: 1; }
body.seated .caption { opacity: 0; }

/* The envelope's card: a typed note with the address on it */
.contact {
  position: fixed;
  left: 50%;
  bottom: max(7vh, calc(env(safe-area-inset-bottom) + 64px));
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em 0.8em;
  max-width: calc(100vw - 32px);
  padding: 0.7em 0.8em 0.7em 1.1em;
  transform: translateX(-50%) rotate(-0.6deg);
  background: #e9e1cc;
  color: #1b1712;
  font-family: var(--type-font);
  font-size: clamp(15px, 1.3vw, 18px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), inset 0 0 40px rgba(120, 90, 40, 0.18);
  animation: contact-in 0.35s ease-out both;
}
.contact[hidden] { display: none; }
.contact-label { flex-basis: 100%; font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5f4c; }
.contact-mail { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; user-select: all; -webkit-user-select: all; }
.contact-btn {
  min-height: 32px;
  padding: 0 0.8em;
  border: 1.5px solid #1b1712;
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}
.contact-btn:hover, .contact-btn:focus-visible { background: #1b1712; color: #e9e1cc; outline: none; }
.contact-x { width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-color: transparent; }
.contact-x svg { width: 16px; height: 16px; }
@keyframes contact-in { from { opacity: 0; transform: translateX(-50%) translateY(12px) rotate(-0.6deg); } }
body.tall .contact { top: calc(var(--stage-bottom) + 14px); bottom: auto; }
body.contacting .caption { opacity: 0; }
body.contacting .titles .hint { visibility: hidden; }

/* Tall screens: the picture is letterboxed, with the titles in the bar above
   it and the narration in the bar below. */
body.tall .titles {
  top: 0;
  height: var(--stage-top);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
body.tall .titles::before,
body.tall .titles::after { content: ""; flex: 1 1 0; min-height: 0; }
body.tall .titles .hint,
body.tall .caption {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--stage-bottom) + 14px);
  bottom: auto;
  margin: 0 auto;
  padding: 0 16px;
  transform: none;
  background: none;
}
body.tall .caption { max-width: 32em; }

/* ---------- The live Mac: hidden while standing, revealed once seated ---------- */

.room {
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform-origin: 0 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
.room .mac { pointer-events: auto; }
body.seated .room { visibility: visible; opacity: 1; transition: opacity 0.35s; }

/* Seated on a large screen, the rendered Mac is the frame around the live screen. */
body.render-frame .mac { filter: none; }
body.render-frame .mac-case,
body.render-frame .bezel { background: none; box-shadow: none; }
body.render-frame .mac-chin { visibility: hidden; }
body.render-frame .screen { border-radius: calc(var(--screen-h) * 0.018); }

/* ---------- Controls ---------- */

.controls {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  top: max(16px, env(safe-area-inset-top));
  z-index: 5;
  display: flex;
  gap: 8px;
}
.ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  height: 36px;
  padding: 0 0.9em 0 0.7em;
  border: 1px solid rgba(220, 212, 194, 0.28);
  border-radius: 18px;
  background: rgba(10, 10, 12, 0.6);
  color: #d8d1bf;
  font-family: var(--type-font);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, border-color 0.2s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ctl[hidden] { display: none; }
.ctl:hover, .ctl:focus-visible { opacity: 1; border-color: rgba(220, 212, 194, 0.6); outline: none; }
.ctl svg { width: 18px; height: 18px; flex: none; }
.ctl .off { display: none; }
.ctl[aria-pressed="true"] .on { display: none; }
.ctl[aria-pressed="true"] .off { display: block; }

.noscript { position: fixed; inset: 0; z-index: 10; margin: 0; padding: 20vh 16px; background: rgba(0, 0, 0, 0.8); }

/* Phones: the Mac fills the screen once seated, so its Special menu carries
   Stand Up and Sound, and the floating controls step aside. */
@media (max-width: 720px), (max-height: 480px) {
  .controls { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
  .ctl { width: 36px; padding: 0; justify-content: center; }
  .ctl span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.seated .controls { display: none; }
  .caption { bottom: calc(env(safe-area-inset-bottom) + 68px); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none !important; }
  .office.striking .flash { animation: none !important; }
}