{"id":1279,"date":"2026-10-20T14:09:56","date_gmt":"2026-10-20T14:09:56","guid":{"rendered":"https:\/\/itdd.au.dk\/the-house\/?page_id=1279"},"modified":"2026-10-20T19:16:28","modified_gmt":"2026-10-20T19:16:28","slug":"martin-monster","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/the-house\/martin-monster\/","title":{"rendered":"Martin monster"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Special+Elite&display=swap');\n\n\/* ====================================\n   MARTIN'S TRANSFORMATION ROOM\n   ==================================== *\/\n\n#martinTransformationRoom,\n#martinTransformationRoom * {\n  box-sizing: border-box;\n}\n\n#martinTransformationRoom {\n  position: fixed !important;\n  inset: 0 !important;\n  width: 100vw !important;\n  height: 100vh !important;\n  height: 100dvh !important;\n  max-width: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  isolation: isolate;\n  z-index: 9999;\n\n  font-family: 'Special Elite', monospace;\n  color: #f0e5d5;\n\n  background-image:\n    linear-gradient(\n      90deg,\n      rgba(0,0,0,.65),\n      rgba(0,0,0,.15) 65%,\n      rgba(0,0,0,.35)\n    ),\n    url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/abandoned-morgue-psychiatric-hospital-scaled.jpg');\n\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n\/* WORDPRESS ADMIN BAR *\/\nbody.admin-bar #martinTransformationRoom {\n  top: 32px !important;\n  height: calc(100dvh - 32px) !important;\n}\n\n@media (max-width:782px) {\n  body.admin-bar #martinTransformationRoom {\n    top: 46px !important;\n    height: calc(100dvh - 46px) !important;\n  }\n}\n\n\/* ====================================\n   ATMOSPHERIC EFFECTS\n   ==================================== *\/\n\n\/* FLICKERING HOSPITAL LIGHT *\/\n#martinTransformationRoom::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n\n  background: radial-gradient(\n    ellipse at 55% 10%,\n    rgba(215,255,210,.17),\n    transparent 65%\n  );\n\n  animation: martinLight 7s infinite;\n}\n\n@keyframes martinLight {\n  0%,100% { opacity: .6; }\n  39% { opacity: .6; }\n  40% { opacity: .1; }\n  41% { opacity: .8; }\n  43% { opacity: .2; }\n  45% { opacity: .6; }\n}\n\n\/* DARK CORNERS *\/\n#martinTransformationRoom::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n\n  background: radial-gradient(\n    ellipse at center,\n    transparent 35%,\n    rgba(0,0,0,.65)\n  );\n}\n\n\/* FLOATING DUST *\/\n#martinTransformationRoom .mt-dust {\n  position: absolute;\n  inset: -10%;\n  z-index: 3;\n  pointer-events: none;\n  opacity: .22;\n\n  background-image:\n    radial-gradient(circle,#ddd 1px,transparent 2px),\n    radial-gradient(circle,#ddd 1px,transparent 2px);\n\n  background-size: 120px 110px,190px 175px;\n  background-position: 0 0,50px 70px;\n\n  animation: martinDust 30s linear infinite;\n}\n\n@keyframes martinDust {\n  to { transform: translateY(-80px); }\n}\n\n\/* GROUND FOG *\/\n#martinTransformationRoom .mt-fog {\n  position: absolute;\n  left: -20%;\n  bottom: -14%;\n  width: 140%;\n  height: 37%;\n  z-index: 5;\n  pointer-events: none;\n\n  background: radial-gradient(\n    ellipse,\n    rgba(180,190,165,.22),\n    transparent 70%\n  );\n\n  filter: blur(30px);\n  animation: martinFog 15s ease-in-out infinite alternate;\n}\n\n@keyframes martinFog {\n  from { transform: translateX(-6%); }\n  to { transform: translateX(6%); }\n}\n\n\/* ====================================\n   TOP BAR\n   ==================================== *\/\n\n#martinTransformationRoom .mt-back {\n  position: absolute !important;\n  top: 20px !important;\n  left: 24px !important;\n  z-index: 50;\n\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n\n  min-height: 36px;\n  padding: 9px 15px;\n\n  border: 1px solid #bc5050;\n  border-radius: 5px;\n  background: rgba(14,18,16,.9);\n\n  color: #fff !important;\n  font-family: 'Special Elite',monospace;\n  font-size: 13px;\n  text-decoration: none !important;\n\n  box-shadow: 0 0 12px #000;\n  transition: .3s;\n}\n\n#martinTransformationRoom .mt-back:hover {\n  background: #a52222;\n  color: #fff !important;\n  transform: translateX(-4px);\n  box-shadow: 0 0 22px rgba(255,0,0,.6);\n}\n\n#martinTransformationRoom .mt-back:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 4px;\n}\n\n#martinTransformationRoom .mt-room-number {\n  position: absolute;\n  top: 30px;\n  right: 30px;\n  z-index: 20;\n\n  color: #c7b8a8;\n  font-size: 12px;\n  letter-spacing: 3px;\n  text-shadow: 0 2px 8px #000;\n}\n\n\/* ====================================\n   MAIN RESPONSIVE LAYOUT\n   ==================================== *\/\n\n#martinTransformationRoom .mt-layout {\n  position: absolute !important;\n  top: 73px !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  right: 0 !important;\n\n  display: grid !important;\n\n  grid-template-columns:\n    minmax(0, .9fr)\n    minmax(0, 1.1fr);\n\n  align-items: center;\n  gap: clamp(18px,3vw,55px);\n\n  width: 100% !important;\n  max-width: 1550px !important;\n  height: auto !important;\n\n  margin: 0 auto !important;\n  padding:\n    20px\n    clamp(22px,5vw,85px)\n    30px;\n\n  z-index: 10;\n}\n\n\/* ====================================\n   LEFT: TRANSFORMATION JOURNAL\n   ==================================== *\/\n\n#martinTransformationRoom .mt-journal {\n  position: relative !important;\n  top: auto !important;\n  left: auto !important;\n\n  display: block !important;\n  width: 100% !important;\n  max-width: 550px !important;\n  min-width: 0 !important;\n  height: auto !important;\n\n  max-height: calc(100dvh - 165px) !important;\n  overflow-x: hidden !important;\n  overflow-y: auto !important;\n\n  margin: 0 !important;\n  padding: clamp(22px,3vw,38px) !important;\n\n  border: 1px solid rgba(181,155,126,.45);\n  border-left: 4px solid #a92c2c;\n  border-radius: 6px;\n\n  background: rgba(8,14,12,.93);\n\n  box-shadow:\n    0 20px 60px rgba(0,0,0,.85),\n    0 0 25px rgba(0,0,0,.4);\n\n  backdrop-filter: blur(8px);\n\n  scrollbar-width: thin;\n  scrollbar-color: #873535 #1b211c;\n}\n\n\/* JOURNAL LABEL *\/\n#martinTransformationRoom .mt-journal-tag {\n  display: block;\n\n  margin: 0 0 15px !important;\n\n  color: #ec7171;\n  font-size: 11px;\n  line-height: 1.5;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n}\n\n\/* JOURNAL TITLE *\/\n#martinTransformationRoom .mt-title {\n  display: block;\n\n  margin: 0 0 18px !important;\n  padding: 0 !important;\n\n  color: #f2e5d4;\n\n  font-family: 'Special Elite',monospace;\n  font-size: clamp(28px,2.6vw,43px);\n  font-weight: normal;\n  line-height: 1.2;\n  letter-spacing: 0;\n\n  text-shadow: 0 4px 12px #000;\n}\n\n\/* INTRODUCTION *\/\n#martinTransformationRoom .mt-intro {\n  margin: 0 0 23px !important;\n\n  color: #c9c5b9;\n  font-size: 14px;\n  line-height: 1.8;\n}\n\n\/* ====================================\n   THREE INTERACTIVE STAGES\n   ==================================== *\/\n\n#martinTransformationRoom .mt-step {\n  display: block !important;\n\n  width: 100%;\n  margin: 0 0 10px !important;\n\n  border: 1px solid #536154;\n  border-radius: 5px;\n\n  background: rgba(22,31,26,.9);\n  overflow: hidden;\n}\n\n\/* CLICKABLE STAGE HEADER *\/\n#martinTransformationRoom .mt-step summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n\n  min-height: 49px;\n  padding: 14px 17px;\n\n  color: #e7dbc7;\n\n  font-family: 'Special Elite',monospace;\n  font-size: 14px;\n  line-height: 1.4;\n\n  cursor: pointer;\n  list-style: none;\n\n  transition: background .3s;\n}\n\n#martinTransformationRoom .mt-step summary::-webkit-details-marker {\n  display: none;\n}\n\n#martinTransformationRoom .mt-step summary::after {\n  content: \"+\";\n  flex: 0 0 auto;\n\n  color: #eb7777;\n  font-family: Arial,sans-serif;\n  font-size: 20px;\n}\n\n#martinTransformationRoom .mt-step[open] summary::after {\n  content: \"\u2212\";\n}\n\n#martinTransformationRoom .mt-step summary:hover {\n  background: rgba(115,36,32,.45);\n}\n\n#martinTransformationRoom .mt-step summary:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: -4px;\n}\n\n#martinTransformationRoom .mt-step[open] {\n  border-color: #a75555;\n  background: rgba(28,24,22,.96);\n}\n\n#martinTransformationRoom .mt-step[open] summary {\n  color: #ffb1a1;\n  border-bottom: 1px solid rgba(180,90,75,.4);\n}\n\n\/* CONTENT INSIDE STAGES *\/\n#martinTransformationRoom .mt-step-content {\n  padding: 19px 20px 21px;\n}\n\n#martinTransformationRoom .mt-step-content h3 {\n  margin: 0 0 12px !important;\n\n  color: #f0e1d1;\n  font-family: 'Special Elite',monospace;\n  font-size: 19px;\n  font-weight: normal;\n}\n\n#martinTransformationRoom .mt-step-content p {\n  margin: 0 !important;\n\n  color: #e4d8c7;\n  font-size: 14px;\n  line-height: 1.85;\n}\n\n\/* FULL REFLECTION *\/\n#martinTransformationRoom .mt-complete {\n  display: block;\n  margin-top: 22px;\n  padding-top: 18px;\n\n  border-top: 1px solid rgba(200,170,140,.35);\n}\n\n#martinTransformationRoom .mt-complete summary {\n  color: #f28d84;\n  font-size: 13px;\n  line-height: 1.6;\n  cursor: pointer;\n}\n\n#martinTransformationRoom .mt-complete summary:hover {\n  color: #fff;\n}\n\n#martinTransformationRoom .mt-complete summary:focus-visible {\n  outline: 2px solid #fff;\n  outline-offset: 3px;\n}\n\n#martinTransformationRoom .mt-complete p {\n  margin: 15px 0 0 !important;\n\n  color: #ded4c4;\n  font-size: 14px;\n  line-height: 1.85;\n}\n\n\/* ====================================\n   RIGHT: MARTIN'S MONSTER\n   ==================================== *\/\n\n\/* ACCESSIBLE HIDDEN SWITCH *\/\n#martinTransformationRoom .mt-awake {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n\/* MONSTER AREA *\/\n#martinTransformationRoom .mt-stage {\n  position: relative !important;\n  top: auto !important;\n  left: auto !important;\n\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 0;\n  min-height: 0;\n\n  display: block !important;\n  align-self: stretch;\n\n  overflow: visible;\n}\n\n\/* MONSTER BACKLIGHT *\/\n#martinTransformationRoom .mt-stage::before {\n  content: \"\";\n  position: absolute;\n  inset: 10% 0 3%;\n  z-index: 0;\n\n  background: radial-gradient(\n    ellipse at 55% 65%,\n    rgba(160,10,10,.28),\n    transparent 65%\n  );\n\n  filter: blur(35px);\n  pointer-events: none;\n\n  animation: martinAura 6s ease-in-out infinite alternate;\n}\n\n@keyframes martinAura {\n  from { opacity: .35; }\n  to { opacity: .85; }\n}\n\n\/* CLICKABLE MONSTER *\/\n#martinTransformationRoom .mt-figure {\n  position: absolute !important;\n  right: -2% !important;\n  bottom: 0 !important;\n  top: auto !important;\n  left: auto !important;\n\n  display: block !important;\n\n  width: min(100%,790px) !important;\n  max-width: none !important;\n  height: auto !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  cursor: pointer;\n  z-index: 2;\n\n  text-align: center;\n}\n\n\/* ONLY THE MONSTER IMAGE *\/\n#martinTransformationRoom .mt-figure > img {\n  display: block !important;\n  width: 100% !important;\n  max-width: none !important;\n  height: auto !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n  border: none !important;\n  border-radius: 0 !important;\n\n  object-fit: contain;\n\n  filter:\n    drop-shadow(0 22px 25px #000)\n    drop-shadow(0 0 20px rgba(255,0,0,.3));\n\n  animation: martinBreathe 5s ease-in-out infinite;\n\n  transition:\n    transform .4s ease,\n    filter .4s ease;\n}\n\n@keyframes martinBreathe {\n  0%,100% {\n    transform: translateY(0) scale(1);\n  }\n  50% {\n    transform: translateY(-9px) scale(1.025);\n  }\n}\n\n\/* HOVER *\/\n#martinTransformationRoom .mt-figure:hover > img {\n  animation-play-state: paused;\n\n  transform: translateY(-15px) scale(1.055);\n\n  filter:\n    drop-shadow(0 25px 25px #000)\n    drop-shadow(0 0 30px rgba(255,0,0,.7));\n}\n\n\/* AWAKENED MONSTER *\/\n#martinAwake2026:checked ~ .mt-layout\n.mt-figure > img {\n  animation: martinWake .65s ease both;\n\n  filter:\n    drop-shadow(0 0 40px rgba(255,0,0,.8))\n    brightness(1.08);\n}\n\n@keyframes martinWake {\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: translateX(-8px) scale(1.06);\n  }\n  50% {\n    transform: translateX(8px) scale(1.08);\n  }\n  100% {\n    transform: scale(1.06);\n  }\n}\n\n\/* COMPACT WAKE BUTTON *\/\n#martinTransformationRoom .mt-wake-button {\n  position: absolute;\n  left: 50%;\n  bottom: 6%;\n  z-index: 4;\n\n  transform: translateX(-50%);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  min-height: 34px;\n  padding: 8px 14px;\n\n  border: 1px solid #ee7777;\n  border-radius: 30px;\n\n  background: rgba(95,0,0,.94);\n  color: #fff;\n\n  font-family: 'Special Elite',monospace;\n  font-size: 12px;\n  line-height: 1.2;\n  white-space: nowrap;\n\n  box-shadow: 0 0 18px rgba(255,0,0,.5);\n  pointer-events: none;\n}\n\n#martinTransformationRoom .mt-rest-label {\n  display: none;\n}\n\n#martinAwake2026:checked ~ .mt-layout\n.mt-wake-label {\n  display: none;\n}\n\n#martinAwake2026:checked ~ .mt-layout\n.mt-rest-label {\n  display: inline;\n}\n\n#martinAwake2026:focus-visible ~ .mt-layout\n.mt-wake-button {\n  outline: 2px solid white;\n  outline-offset: 4px;\n}\n\n\/* ====================================\n   SECRET MESSAGE\n   ==================================== *\/\n\n#martinTransformationRoom .mt-secret {\n  position: absolute;\n  top: 4%;\n  right: 3%;\n  z-index: 5;\n\n  width: min(88%,360px);\n  padding: 20px;\n\n  background: rgba(12,2,2,.96);\n  border: 1px solid #b34b4b;\n  border-left: 3px solid #fa5555;\n  border-radius: 5px;\n\n  box-shadow:\n    0 0 28px rgba(190,0,0,.3),\n    0 16px 35px #000;\n\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n\n  transform: translateY(15px);\n  transition: .4s ease;\n}\n\n#martinTransformationRoom .mt-secret strong {\n  display: block;\n  margin-bottom: 12px;\n\n  color: #ff7777;\n  font-size: 14px;\n}\n\n#martinTransformationRoom .mt-secret p {\n  margin: 0 !important;\n  color: #eedbd4;\n  font-size: 14px;\n  line-height: 1.75;\n}\n\n\/* REVEAL SECRET WHEN MARTIN WAKES *\/\n#martinAwake2026:checked ~ .mt-layout\n.mt-secret {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n\/* ====================================\n   TABLET\n   ==================================== *\/\n\n@media (max-width: 1050px) and (min-width: 761px) {\n\n  #martinTransformationRoom .mt-layout {\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n    padding: 15px 23px 25px;\n  }\n\n  #martinTransformationRoom .mt-journal {\n    padding: 23px !important;\n  }\n\n  #martinTransformationRoom .mt-title {\n    font-size: 30px;\n  }\n\n  #martinTransformationRoom .mt-figure {\n    width: 108% !important;\n    right: -4% !important;\n  }\n}\n\n\/* ====================================\n   MOBILE\n   ==================================== *\/\n\n@media (max-width: 760px) {\n\n  #martinTransformationRoom {\n    background-position: 57% center;\n  }\n\n  #martinTransformationRoom .mt-back {\n    top: 12px !important;\n    left: 13px !important;\n    min-height: 33px;\n    padding: 8px 12px;\n    font-size: 12px;\n  }\n\n  #martinTransformationRoom .mt-room-number {\n    top: 21px;\n    right: 14px;\n    font-size: 10px;\n    letter-spacing: 1px;\n  }\n\n  #martinTransformationRoom .mt-layout {\n    top: 62px !important;\n    bottom: 0 !important;\n\n    display: flex !important;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: flex-start;\n\n    gap: 12px;\n    padding: 10px 14px 0;\n  }\n\n  #martinTransformationRoom .mt-journal {\n    flex: 0 1 auto;\n\n    width: 100% !important;\n    max-width: none !important;\n    max-height: 48dvh !important;\n\n    padding: 19px !important;\n    background: rgba(6,12,10,.95);\n  }\n\n  #martinTransformationRoom .mt-title {\n    font-size: clamp(25px,6.4vw,35px);\n  }\n\n  #martinTransformationRoom .mt-intro {\n    font-size: 12px;\n    margin-bottom: 16px !important;\n  }\n\n  #martinTransformationRoom .mt-step summary {\n    padding: 12px;\n    min-height: 42px;\n    font-size: 12px;\n  }\n\n  #martinTransformationRoom .mt-step-content {\n    padding: 14px;\n  }\n\n  #martinTransformationRoom .mt-step-content h3 {\n    font-size: 16px;\n  }\n\n  #martinTransformationRoom .mt-step-content p {\n    font-size: 13px;\n  }\n\n  #martinTransformationRoom .mt-stage {\n    flex: 1 1 0;\n\n    width: 100% !important;\n    min-height: 165px;\n    height: auto !important;\n  }\n\n  #martinTransformationRoom .mt-figure {\n    right: 50% !important;\n    bottom: 0 !important;\n\n    width: min(95vw,520px) !important;\n    transform: translateX(50%);\n  }\n\n  #martinTransformationRoom .mt-wake-button {\n    bottom: 9%;\n    padding: 7px 12px;\n    font-size: 11px;\n  }\n\n  #martinTransformationRoom .mt-secret {\n    top: 0;\n    right: 3%;\n\n    width: min(78%,310px);\n    padding: 13px;\n  }\n\n  #martinTransformationRoom .mt-secret strong {\n    font-size: 11px;\n  }\n\n  #martinTransformationRoom .mt-secret p {\n    font-size: 12px;\n    line-height: 1.55;\n  }\n}\n\n\/* SHORT DESKTOP SCREENS *\/\n@media (max-height: 600px) and (min-width: 761px) {\n\n  #martinTransformationRoom .mt-layout {\n    top: 58px !important;\n    padding-top: 8px;\n    padding-bottom: 12px;\n  }\n\n  #martinTransformationRoom .mt-journal {\n    max-height: calc(100dvh - 105px) !important;\n  }\n\n  #martinTransformationRoom .mt-figure {\n    width: min(83%,620px) !important;\n  }\n}\n\n\/* ACCESSIBILITY *\/\n@media (prefers-reduced-motion: reduce) {\n\n  #martinTransformationRoom *,\n  #martinTransformationRoom::before {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n\n<!-- ====================================\n     MARTIN'S ROOM HTML\n     ==================================== -->\n\n<div id=\"martinTransformationRoom\">\n\n  <!-- ATMOSPHERE -->\n  <div class=\"mt-dust\" aria-hidden=\"true\"><\/div>\n  <div class=\"mt-fog\" aria-hidden=\"true\"><\/div>\n\n  <!-- BACK TO BASEMENT -->\n  <a\n    class=\"mt-back\"\n    href=\"https:\/\/itdd.au.dk\/the-house\/the-basement\/\"\n  >\n    &#8592; Back to Basement\n  <\/a>\n\n  <!-- CASE FILE NUMBER -->\n  <span class=\"mt-room-number\">\n    CASE FILE M-01\n  <\/span>\n\n  <!-- INTERACTIVE MONSTER SWITCH -->\n  <input\n    type=\"checkbox\"\n    id=\"martinAwake2026\"\n    class=\"mt-awake\"\n    aria-label=\"Awaken or calm Martin\"\n  >\n\n  <!-- MAIN TWO-COLUMN LAYOUT -->\n  <div class=\"mt-layout\">\n\n    <!-- ============================\n         LEFT: THE JOURNAL\n         ============================ -->\n\n    <div class=\"mt-journal\">\n\n      <span class=\"mt-journal-tag\">\n        THE HOUSE \/ TRANSFORMATION ARCHIVE\n      <\/span>\n\n      <h1 class=\"mt-title\">\n        Martin&#8217;s Transformation\n      <\/h1>\n\n      <p class=\"mt-intro\">\n        Every monster has an origin.\n        Explore the three stages of Martin&#8217;s\n        transformation and discover how\n        an ordinary visual expression became\n        part of The Basement.\n      <\/p>\n\n      <!-- STAGE 1 -->\n      <details class=\"mt-step\" open>\n\n        <summary>\n          01 \u2014 The Origin\n        <\/summary>\n\n        <div class=\"mt-step-content\">\n\n          <h3>From Nature to Inspiration<\/h3>\n\n          <p>\n            The transformation began with\n            a visual expression inspired by\n            ivy growing across a wall.\n\n            Its tangled branches, leaves and\n            organic shapes became the starting\n            point for creating the monster.\n          <\/p>\n\n        <\/div>\n\n      <\/details>\n\n      <!-- STAGE 2 -->\n      <details class=\"mt-step\">\n\n        <summary>\n          02 \u2014 The Transformation\n        <\/summary>\n\n        <div class=\"mt-step-content\">\n\n          <h3>From Image to Creature<\/h3>\n\n          <p>\n            By combining images and interactive\n            elements, I transformed the original\n            visual expression into a creature\n            with a new context and purpose\n            within The House.\n\n            What began as a static image\n            became part of a digital\n            horror experience.\n          <\/p>\n\n        <\/div>\n\n      <\/details>\n\n      <!-- STAGE 3 -->\n      <details class=\"mt-step\">\n\n        <summary>\n          03 \u2014 The Reflection\n        <\/summary>\n\n        <div class=\"mt-step-content\">\n\n          <h3>A New Meaning<\/h3>\n\n          <p>\n            This process made me reflect on\n            how a visual expression can change\n            its meaning when it is developed\n            further and experienced in a\n            new digital space.\n\n            Interaction allows visitors\n            to engage with the monster\n            rather than simply look at it.\n          <\/p>\n\n        <\/div>\n\n      <\/details>\n\n      <!-- FULL ORIGINAL REFLECTION IN ENGLISH -->\n      <details class=\"mt-complete\">\n\n        <summary>\n          Read the complete reflection\n        <\/summary>\n\n        <p>\n          I have worked on transforming a visual\n          expression into part of the digital\n          universe of The Basement.\n\n          By combining images and interactive\n          elements, I have given the monster\n          a new context and function\n          within The House.\n\n          The process has made me reflect on\n          how a visual expression can change\n          its meaning when it is developed\n          further and experienced in a\n          new digital space.\n        <\/p>\n\n      <\/details>\n\n    <\/div>\n\n    <!-- ============================\n         RIGHT: THE MONSTER\n         ============================ -->\n\n    <div class=\"mt-stage\">\n\n      <!-- CLICK MARTIN TO WAKE HIM -->\n      <label\n        class=\"mt-figure\"\n        for=\"martinAwake2026\"\n      >\n\n        <img decoding=\"async\"\n          src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/mart.png\"\n          alt=\"Martin, a monster formed from tangled ivy, roots and autumn leaves\"\n        >\n\n        <span\n          class=\"mt-wake-button\"\n          aria-hidden=\"true\"\n        >\n\n          <span class=\"mt-wake-label\">\n            Wake Martin\n          <\/span>\n\n          <span class=\"mt-rest-label\">\n            Let Martin Rest\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n      <!-- SECRET REVEALED WHEN ACTIVATED -->\n      <div class=\"mt-secret\">\n\n        <strong>\n          The Creature Awakens\n        <\/strong>\n\n        <p>\n          The ivy became claws.\n          The branches became a body.\n\n          An ordinary image has become\n          something visitors can encounter,\n          activate and experience.\n\n          This is the transformation.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8592; Back to Basement CASE FILE M-01 THE HOUSE \/ TRANSFORMATION ARCHIVE Martin&#8217;s Transformation Every monster has an origin. Explore the three stages of Martin&#8217;s transformation and discover how an ordinary visual expression became part of The Basement. 01 \u2014 The Origin From Nature to Inspiration The transformation began with a visual expression inspired by [&hellip;]<\/p>\n","protected":false},"author":226,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/users\/226"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/comments?post=1279"}],"version-history":[{"count":3,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1279\/revisions"}],"predecessor-version":[{"id":1312,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1279\/revisions\/1312"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/media?parent=1279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}