@font-face { font-family: "Big Shoulders"; src: url("fonts/bigshoulders-latin-var.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/publicsans-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* Horror: tired fluorescent office. Calm: the agency's clean white. */
  --ground-horror: #e2e1d5;
  --ground-calm: #eef0ee;
  --ink: #16181d;
  --ink-2: #3f454c;
  --paper: #f4f3ee;
  --red: #c8281f;
  --led: #ff4a3d;
  --hazard: #f2c230;
  --floor-horror: #cbc9bb;
  --floor-calm: #dfe2df;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --text: "Public Sans", system-ui, sans-serif;
  --pad: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground-horror); color: var(--ink); font: 400 17px/1.45 var(--text); -webkit-font-smoothing: antialiased; transition: background-color .6s; overflow-x: clip; }
body.is-calm { background: var(--ground-calm); }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }

/* ---------- Stage: one screen ---------- */
/* The room (wall + floor) fills the viewport; the composition lives in a centred stage. */
.stage {
  --bar-h: 60px; --actions-h: calc(96px + env(safe-area-inset-bottom, 0px));
  position: relative; width: 100%; margin: 0 auto;
  height: 100vh; height: 100svh; min-height: 720px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--bar-h) auto minmax(0, 1fr) var(--actions-h);
  grid-template-areas: "bar" "copy" "scene" "actions";
  padding: 0 var(--pad);
  transition: filter 2.4s cubic-bezier(.3, 0, .2, 1);
}
.bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.logo { display: block; width: 92px; height: 28px; background: var(--ink); -webkit-mask: url("merlin-logo.svg") left center / contain no-repeat; mask: url("merlin-logo.svg") left center / contain no-repeat; }
.agency { font: 800 20px/1 var(--display); letter-spacing: .01em; }

.copy { grid-area: copy; position: relative; z-index: 3; padding-top: 8px; }
.headline { font: 900 clamp(46px, 13vw, 104px)/1 var(--display); text-transform: uppercase; margin: 0; letter-spacing: -.005em; max-width: 11ch; text-wrap: balance; }
.headline:focus { outline: none; }
.sightings { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; max-width: 26ch; font-size: 17px; line-height: 1.35; }
.sightings li { padding-left: 22px; position: relative; }
.sightings li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 3px; background: var(--ink); }
mark { background: linear-gradient(transparent 55%, var(--hazard) 55% 92%, transparent 92%); color: inherit; padding: 0 1px; }
.calm .headline { line-height: 1.02; }
.lede { font-size: 19px; line-height: 1.35; margin: 14px 0 0; max-width: 22ch; }
/* A rubber stamp, inked on after the memory is gone. */
.stamp { margin: 16px 0 0; min-height: 44px; }
.stamp span {
  display: inline-block; padding: 7px 12px 6px; border: 3px solid currentColor; border-radius: 3px;
  font: 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2);
  transform: rotate(-3.5deg); opacity: .92;
}
.stamp span:empty { display: none; }

/* ---------- Scene: generated art, standing on the floor ---------- */
.heap, .ficus { grid-area: scene; align-self: end; justify-self: start; width: auto; height: auto; max-width: 80%; max-height: 74%; margin: 0 0 -6px calc(-1 * var(--pad)); position: relative; z-index: 1; }
.ficus { max-height: 64%; margin-left: 12%; opacity: 0; }
.agent { grid-area: scene; align-self: end; justify-self: end; height: 100%; aspect-ratio: 581 / 1515; margin: 0 -2% -6px 0; position: relative; z-index: 2; pointer-events: none; }
.agent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.agent-calm, .agent-aim { opacity: 0; }
/* The aiming pose is a touch wider than its box; widen it so the figure keeps the same height as the other poses. */
.agent .agent-aim { left: -1.3%; width: 102.6%; }
.aiming .agent-armed { opacity: 0; }
.aiming .agent-aim { opacity: 1; }
.dither { position: absolute; pointer-events: none; }

.is-calm .heap, .is-calm .agent-armed { opacity: 0; }
.is-calm .ficus, .is-calm .agent-calm { opacity: 1; }

/* The floor: a linoleum band under the actions, running the full width of the room. */
.actions { grid-area: actions; position: relative; z-index: 4; padding-top: 16px; }
.actions::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background: var(--floor-horror); border-top: 3px solid var(--ink); transition: background-color .6s;
}
.is-calm .actions::before { background: var(--floor-calm); }
.neuralizer {
  width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; justify-content: center;
  background: var(--red); color: #fff; border: 0; border-radius: 6px; padding: 8px 20px;
  font: 900 28px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 4px 0 #7d1812;
}
.neuralizer img { width: 84px; height: auto; }
.neuralizer:hover { background: #b3221a; }
.neuralizer:active { transform: translateY(3px); box-shadow: 0 1px 0 #7d1812; }
.neuralizer[disabled] { cursor: default; }

.after { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.primary {
  min-height: 56px; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--ink); color: var(--paper);
  font: 800 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; text-align: left;
}
.primary:hover { background: #262a31; }
.after .primary { flex: 1 1 auto; }
.quiet { min-height: 44px; padding: 8px 4px; background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: 16px; color: var(--ink-2); }
.quiet:hover { color: var(--ink); }

/* ---------- Neuralize sequence ----------
   arming: the room goes dark, only the agent stays lit, the pen charges.
   flash: white blooms from the pen tip until it covers everything.
   clear: the white drains away slowly and the eye re-adjusts (over-exposed, blurred, colourless),
   while the junk dithers into a ficus and the agent's pose dithers into the calm one (main.js).
   Then the calm copy settles in and the stamp lands. */
.dim { position: fixed; inset: 0; z-index: 5; background: #0d0e11; opacity: 0; pointer-events: none; }
.arming .dim { opacity: .88; transition: opacity .6s ease; }
.arming .copy, .arming .actions { opacity: 0; transition: opacity .3s ease; }
.arming .agent { z-index: 6; }

.look {
  position: absolute; z-index: 7; margin: 0; left: var(--pad); right: var(--pad); top: 17%;
  font: 900 clamp(64px, 20vw, 160px)/.85 var(--display); text-transform: uppercase; color: var(--paper);
  opacity: 0; transform: scale(.94); pointer-events: none;
}
.arming .look { opacity: 1; transform: none; transition: opacity .4s ease .25s, transform 1.2s cubic-bezier(.2,.7,.2,1) .25s; }

.led {
  position: absolute; left: 2.6%; top: 11.6%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, var(--led) 40%, rgba(255, 74, 61, .35) 62%, rgba(255, 74, 61, 0) 72%);
  opacity: 0; pointer-events: none;
}
.arming .led { animation: charge 1.4s ease-in forwards; }
/* The tip of the pen he aims at you (agent-aim.webp). */
.led.led-aim { left: 37.3%; top: 22.6%; }
body.arming .led-aim { animation: none; }
body.aiming .led:not(.led-aim) { animation: none; opacity: 0; }
body.aiming .led-aim { animation: aim-glow .8s ease-out forwards; }
@keyframes aim-glow { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; transform: scale(4); } 55% { opacity: .75; transform: scale(3); } 100% { opacity: 1; transform: scale(7); } }
@keyframes charge {
  0% { opacity: 0; transform: scale(1); }
  20% { opacity: 1; transform: scale(2.2); }
  38% { opacity: .5; transform: scale(1.4); }
  58% { opacity: 1; transform: scale(3.2); }
  74% { opacity: .6; transform: scale(2); }
  100% { opacity: 1; transform: scale(6); }
}

.stage.overexposed { filter: brightness(1.9) contrast(.4) saturate(0) blur(5px); transition: none; }

.flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; visibility: hidden; }
.flash .bloom {
  position: absolute; left: var(--tx, 70%); top: var(--ty, 45%); width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax;
  border-radius: 50%; background: radial-gradient(circle, #fff 0 36%, rgba(255,255,255,.85) 44%, rgba(255,255,255,0) 58%);
  transform: scale(0); opacity: 0;
}
.flash .sheet { position: absolute; inset: 0; background: #fff; opacity: 0; }
.flash.on { visibility: visible; }
.flash.on .bloom { transform: scale(1); opacity: 1; transition: transform .5s cubic-bezier(.55, 0, .85, .35), opacity .08s; }
.flash.on .sheet { opacity: 1; transition: opacity .5s cubic-bezier(.8, 0, 1, .5); }
.flash.on.clear .bloom, .flash.on.clear .sheet { opacity: 0; transition: opacity 1.8s cubic-bezier(.4, 0, .25, 1); }

/* Calm copy and actions settle in after the white has drained. */
.calm > *, .after > * { transition: opacity .6s ease; }
.calm:not(.shown) > *, .after:not(.shown) > * { opacity: 0; }
.calm .lede { transition-delay: .18s; }
.calm:not(.stamped) .stamp span { opacity: 0; }
.calm.stamped .stamp span { animation: stamp .32s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-9deg) scale(1.9); } 80% { opacity: .92; } to { opacity: .92; transform: rotate(-3.5deg) scale(1); } }
.horror > * { transition: opacity .5s ease; }
.horror.entering > * { opacity: 0; transition: none; }

/* ---------- Briefing card ---------- */
.brief { padding: 40px var(--pad) 48px; background: var(--ink); color: var(--paper); }
.brief:focus { outline: none; }
.card { max-width: 560px; margin: 0 auto; display: grid; }
.js .face { grid-area: 1 / 1; }
html:not(.js) .face-back, html:not(.js) #to-form, html:not(.js) .close { display: none; }
.calm .headline { line-height: 1.08; }
.badge { float: right; margin: 0 0 10px 16px; width: 84px; height: 104px; border: 3px solid var(--paper); border-radius: 3px; overflow: hidden; background: var(--ground-calm); transform: rotate(2deg); }
.badge img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 3%; transform: scale(1.9); transform-origin: 38% 0; }
.file { margin: 0 0 12px; font-size: 15px; color: #c9ccce; display: flex; align-items: center; gap: 10px; }
.file::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--led); flex: none; }
.brief h2 { font: 900 clamp(34px, 9vw, 52px)/.95 var(--display); text-transform: uppercase; margin: 0 0 18px; text-wrap: balance; }
.brief p { margin: 0 0 12px; }
.brief .ask { font: 800 24px/1.1 var(--display); text-transform: uppercase; margin: 18px 0 20px; color: var(--paper); }
.brief .primary { background: var(--paper); color: var(--ink); width: 100%; }
.brief .primary:hover { background: #fff; }
.brief :focus-visible { outline-color: var(--led); }
.card-actions { display: grid; gap: 8px; }
.mail, .card-foot a { color: var(--paper); text-underline-offset: 4px; text-decoration-thickness: 1px; display: inline-flex; align-items: center; min-height: 44px; }
.brief .quiet { color: #c9ccce; }
.brief .quiet:hover { color: var(--paper); }
.card-foot { max-width: 560px; margin: 16px auto 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #3a3e45; padding-top: 8px; }

form { display: grid; gap: 6px; }
label { font-weight: 600; font-size: 16px; margin-top: 8px; }
textarea, input { width: 100%; font: 400 17px/1.4 var(--text); color: var(--ink); background: var(--paper); border: 2px solid var(--paper); border-radius: 3px; padding: 12px; min-height: 48px; }
textarea { resize: vertical; min-height: 120px; }
textarea::placeholder { color: #6a6f74; }
textarea:focus-visible, input:focus-visible { outline: 3px solid var(--led); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--led); }
.err { color: #ffb4ad; font-size: 15px; margin: 0 !important; }
.promise { font-size: 15px; color: #c9ccce; margin: 8px 0 10px !important; }
.done h3 { font: 900 44px/1 var(--display); text-transform: uppercase; margin: 8px 0 10px; }
.done:focus { outline: none; }
.fail { margin: 10px 0 0 !important; padding: 12px 14px; border-left: 4px solid var(--led); background: #262a31; font-size: 16px; }
.fail:focus { outline: none; }
.fail a { color: var(--paper); font-weight: 600; text-underline-offset: 3px; }
.primary[disabled] { opacity: .7; cursor: default; }

/* With JS the briefing is a card over the calm scene, flipped between its two faces. */
.js .brief {
  position: fixed; inset: auto 0 0 0; z-index: 30; max-height: 100svh; overflow-y: auto;
  padding: 28px var(--pad) max(20px, env(safe-area-inset-bottom)); border-radius: 10px 10px 0 0;
  transform: translateY(105%); visibility: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .5s;
  box-shadow: 0 -12px 0 rgba(22,24,29,.12);
}
.js .brief.open { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.js .card { perspective: 1600px; }
.js .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.3,.7,.2,1), visibility 0s .35s; }
.js .face-back { transform: rotateY(180deg); visibility: hidden; }
.js .card.turned .face-front { transform: rotateY(-180deg); visibility: hidden; }
.js .card.turned .face-back { transform: none; visibility: visible; }
.js .scrim { position: fixed; inset: 0; z-index: 25; background: rgba(13,14,17,.45); opacity: 0; transition: opacity .4s; pointer-events: none; }
.js .scrim.on { opacity: 1; pointer-events: auto; }

/* ---------- Desktop: a compact stage, centred in the room ---------- */
@media (min-width: 900px) {
  :root { --pad: 0px; }
  .stage {
    --bar-h: 84px; --actions-h: 112px;
    width: clamp(760px, 56vw, 1160px); min-height: 640px;
  }
  .logo { width: 120px; height: 36px; }
  .agency { font-size: 26px; }
  .copy { max-width: 63%; padding-top: 4px; }
  .headline { font-size: clamp(60px, 5.3vw, 104px); max-width: none; }
  .calm .headline { max-width: 9ch; }
  .sightings { font-size: 19px; max-width: 34ch; margin-top: 20px; }
  .lede { font-size: 23px; max-width: 24ch; }
  .stamp span { font-size: 24px; }
  .heap { max-width: 64%; max-height: 100%; margin-left: 0; }
  .ficus { max-height: 82%; margin-left: 20%; }
  /* The agent is the poster's lead: he stands from under the bar down to the floor. */
  .agent { grid-area: auto; position: absolute; right: 0; bottom: calc(var(--actions-h) - 8px); height: calc(100% - var(--bar-h) - var(--actions-h) + 4px); margin: 0; }
  .actions { padding-top: 24px; }
  .after { max-width: 460px; }
  /* The call to action is the poster's button: big, red, stuck over the agent's legs across the floor line. */
  .neuralizer {
    position: absolute; right: -56px; bottom: 84px; width: auto; min-height: 100px; padding: 10px 32px; gap: 16px;
    font-size: 46px; white-space: nowrap; border-radius: 8px; box-shadow: 0 6px 0 #7d1812;
    animation: beckon 2.2s ease-out infinite;
  }
  .neuralizer img { width: 120px; }
  .neuralizer:active { box-shadow: 0 2px 0 #7d1812; }
  .neuralizer[disabled] { animation: none; }
  @keyframes beckon { 0% { box-shadow: 0 6px 0 #7d1812, 0 0 0 0 rgba(200, 40, 31, .55); } 70%, 100% { box-shadow: 0 6px 0 #7d1812, 0 0 0 22px rgba(200, 40, 31, 0); } }
  .look { left: 0; right: auto; top: 34%; max-width: 58%; font-size: clamp(80px, 6.6vw, 150px); }
  .js .brief { inset: auto; left: 50%; top: 50%; width: min(640px, 92vw); transform: translate(-50%, -46%); opacity: 0; border-radius: 10px; max-height: 92vh; padding: 36px 40px 24px; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s .45s; }
  .js .brief.open { transform: translate(-50%, -50%); opacity: 1; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
}

/* Reduced motion: every beat still happens, but through light and opacity instead of movement.
   No scaling bloom, no zooming stamp, no sliding sheet, and the card crossfades instead of flipping. */
@media (prefers-reduced-motion: reduce) {
  .look, .arming .look { transform: none; }
  .arming .led { animation: charge-still 1.4s linear forwards; transform: scale(3); }
  @keyframes charge-still { 0% { opacity: 0; } 20% { opacity: 1; } 38% { opacity: .35; } 58% { opacity: 1; } 74% { opacity: .45; } 100% { opacity: 1; } }
  .flash .bloom, .flash.on .bloom { transform: scale(1); }
  .flash.on .bloom { transition: opacity .3s ease-in; }
  .flash.on .sheet { transition: opacity .45s ease-in .15s; }
  .calm.stamped .stamp span { animation: stamp-still .45s ease-out both; }
  @keyframes stamp-still { from { opacity: 0; } to { opacity: .92; } }
  .neuralizer:active { transform: none; }
  .neuralizer { animation: none; }
  body.aiming .led-aim { animation: aim-still .8s linear forwards; transform: scale(4); }
  @keyframes aim-still { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: .6; } 100% { opacity: 1; } }
  .js .brief, .js .brief.open { transform: none; transition: opacity .35s ease, visibility 0s .35s; opacity: 0; }
  .js .brief.open { opacity: 1; transition: opacity .35s ease; }
  .js .face, .js .face-back, .js .card.turned .face-front, .js .card.turned .face-back { transform: none; }
  .js .card:not(.turned) .face-back, .js .card.turned .face-front { opacity: 0; transition: opacity .22s ease, visibility 0s .22s; }
  .js .card:not(.turned) .face-front, .js .card.turned .face-back { opacity: 1; transition: opacity .3s ease .2s, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .js .brief, .js .brief.open { transform: translate(-50%, -50%); }
}