:root {
  color-scheme:dark;
  --acid:#d7f76b;
  --orange:#ff651b;
  --purple:#bc88ef;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:#100719;
  color:#eedeee;
  font-family:'Courier New',monospace;
  background-image:radial-gradient(ellipse at 50% 38%,#43124b77,transparent 58%),repeating-linear-gradient(90deg,transparent 0 79px,#a474c00a 80px),repeating-linear-gradient(0deg,transparent 0 79px,#a474c00a 80px);
}

body:before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  z-index:6;
}

.scanlines {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:7;
  background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 4px);
}

.ticker {
  overflow:hidden;
  background:var(--acid);
  color:#17200c;
  padding:9px 0;
  font-size:11px;
  font-weight:bold;
  letter-spacing:3px;
  white-space:nowrap;
}

.ticker span {
  display:block;
  width:max-content;
  animation:scroll 40s linear infinite;
}

main {
  max-width:1100px;
  margin:auto;
  padding:0 44px;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 0;
  border-bottom:1px solid #a876b238;
}

.wordmark {
  font-family:Arial,sans-serif;
  font-size:30px;
  font-weight:900;
  letter-spacing:-3px;
  color:#e5d4e9;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:17px;
}

.wordmark span {
  font-family:'Courier New',monospace;
  font-size:10px;
  letter-spacing:2px;
  max-width:130px;
  line-height:1.5;
}

.connection {
  text-align:right;
  font-size:10px;
  line-height:1.8;
  letter-spacing:1px;
  color:var(--acid);
}

.connection span {
  color:#88768e;
}

.connection i {
  display:inline-block;
  background:var(--acid);
  width:6px;
  height:6px;
  margin-right:8px;
  box-shadow:0 0 10px var(--acid);
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:600px;
  text-align:center;
  padding-top:40px;
}

.coordinates {
  position:absolute;
  top:40px;
  left:0;
  color:#9b7faa;
  font-size:9px;
  text-align:left;
  line-height:1.8;
}

.eyebrow {
  position:relative;
  z-index:2;
  font-size:10px;
  letter-spacing:4px;
  color:#c7abc9;
}

.portal {
  position:absolute;
  top:62px;
  left:50%;
  transform:translateX(-50%) rotate(-12deg);
  width:490px;
  height:460px;
  overflow:hidden;
  border-radius:50%;
  background:radial-gradient(ellipse,#050307 24%,#561455 35%,#ff8234 36%,#c54424 38%,#3e154d 42%,#d26bb4 43%,#23102c 44%,#a655a3 46%,#1b0729 48%,#7b318a 49%,transparent 66%);
  filter:contrast(1.8);
  box-shadow:0 0 80px #91265130;
  animation:breathe 9s ease-in-out infinite;
}

.rings {
  position:absolute;
  inset:25px;
  border:2px dashed #fc935774;
  border-radius:50%;
  box-shadow:0 0 20px #fd3c73,inset 0 0 50px #ee603c;
  animation:rotate 70s linear infinite;
}

.eye {
  position:absolute;
  top:115px;
  left:185px;
  width:120px;
  height:62px;
  background:#f3e4ad;
  transform:rotate(12deg);
  border-radius:90% 0 90% 0;
  box-shadow:0 0 20px #f34032;
  overflow:hidden;
}

.eye div {
  width:48px;
  height:65px;
  background:radial-gradient(ellipse,#000 0 25%,#db6225 27% 48%,#502814 50% 64%,#efb949 65%);
  border-radius:50%;
  margin:auto;
  transform:rotate(-12deg);
}

.title-block {
  position:relative;
  padding-top:192px;
  z-index:2;
}

.overline {
  font-size:10px;
  letter-spacing:4px;
  color:var(--acid);
  text-shadow:2px 2px #000;
}

h1 {
  position:relative;
  margin:-3px 0 0;
  font-family:Impact,'Arial Black',sans-serif;
  font-size:clamp(100px,18vw,210px);
  font-weight:1000;
  line-height:.96;
  letter-spacing:-.06em;
  transform:scaleX(1.08) rotate(-3deg);
  color:#ff772c;
  text-shadow:3px 3px #851529,-3px -2px #ffdf77,7px 5px #4c053d,10px 8px #ba205b,0 0 35px #ff462777;
}

h1 span {
  position:absolute;
  inset:0;
  color:#f9ba43;
  clip-path:polygon(0 36%,100% 36%,100% 41%,0 41%);
  transform:translateX(-8px);
  animation:chop 6s steps(1) infinite;
}

.subtitle {
  font-family:Arial,sans-serif;
  font-weight:900;
  letter-spacing:10px;
  font-size:19px;
  margin:22px 0 12px;
  color:#f1dfd3;
}

.byline {
  font-family:Georgia,serif;
  font-size:16px;
  font-style:italic;
  color:#ac87b6;
}

.byline strong {
  font-weight:normal;
  color:#dfc9e5;
}

.seal {
  position:absolute;
  right:8px;
  top:192px;
  transform:rotate(13deg);
  background:var(--acid);
  color:#222917;
  width:102px;
  height:102px;
  clip-path:polygon(50% 0,61% 9%,75% 7%,80% 20%,94% 25%,91% 40%,100% 50%,91% 61%,94% 75%,80% 80%,75% 94%,61% 91%,50% 100%,40% 91%,25% 94%,20% 80%,7% 75%,9% 61%,0 50%,9% 40%,7% 25%,20% 20%,25% 7%,40% 9%);
  font-size:8px;
  padding-top:17px;
}

.seal b {
  font-family:Arial,sans-serif;
  font-size:19px;
  line-height:.95;
}

.annotation {
  position:absolute;
  left:8px;
  top:250px;
  font-size:10px;
  line-height:1.5;
  color:#c199c8;
  transform:rotate(-9deg);
  text-align:left;
}

.entry {
  text-align:center;
  padding-bottom:44px;
}

.warning-strip {
  display:inline-block;
  background:repeating-linear-gradient(135deg,#111 0 10px,#30230f 10px 20px);
  border:1px solid #b9923d;
  color:#f1c768;
  padding:8px 24px;
  font-size:10px;
  letter-spacing:2px;
  transform:rotate(-1deg);
}

.intro {
  font-family:Georgia,serif;
  font-size:25px;
  font-style:italic;
  margin:29px 0 12px;
}

.description {
  font-size:12px;
  line-height:1.9;
  color:#b79cc0;
}

button {
  cursor:pointer;
  font:inherit;
}

#enter {
  display:inline-block;
  text-decoration:none;
  margin:28px auto 20px;
  background:var(--orange);
  border:2px outset #ffa05f;
  box-shadow:5px 5px 0 #561c4a;
  color:#190a16;
  padding:17px 23px;
  font-size:12px;
  font-weight:bold;
  letter-spacing:2px;
  transition:transform .15s,background .15s;
}

#enter span {
  padding-left:25px;
  font-size:18px;
}

#enter:hover {
  background:var(--acid);
  transform:rotate(-2deg);
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--acid);
  outline-offset:6px;
}

.status {
  color:var(--acid);
  font-size:10px;
  letter-spacing:3px;
  min-height:28px;
  line-height:1.6;
}

.status span {
  animation:blink 1.5s steps(2,end) infinite;
}

footer {
  border-top:1px solid #a876b238;
  padding:27px 0 24px;
  text-align:center;
}

.badges {
  display:flex;
  justify-content:center;
  gap:8px;
}

.badge {
  font-family:Arial,sans-serif;
  display:inline-block;
  border:3px ridge #938b93;
  background:#22252b;
  font-size:8px;
  padding:3px 7px;
  color:#ddd;
  line-height:1.2;
  transform:rotate(-2deg);
}

.badge b {
  font-size:10px;
}

.skull {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--acid);
  background:#230332;
  transform:rotate(2deg);
  font-size:24px;
}

.web {
  background:#42295c;
  color:#fcb770;
  transform:rotate(-1deg);
}

.visitors {
  font-size:9px;
  color:#a38da9;
  letter-spacing:1px;
  margin:24px 0;
}

.visitors span {
  display:inline-block;
  background:#030303;
  color:var(--acid);
  border:2px inset #6b526d;
  padding:5px 8px;
  font-size:13px;
}

.visitors small {
  display:block;
  font-size:8px;
  margin-top:7px;
  color:#80658b;
}

.footer-line {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:8px;
  letter-spacing:1px;
  color:#9d82a7;
  align-items:center;
}

#motion {
  background:transparent;
  border:1px solid #705779;
  color:#bfa4c8;
  font-size:8px;
  padding:7px;
}

.haunted .portal {
  filter:contrast(2.8) hue-rotate(60deg);
}

.haunted h1 {
  color:#d7f76b;
  text-shadow:6px 4px #e52862,-5px -3px #7540ff;
}

.paused *, .paused *:before,.paused *:after {
  animation-play-state:paused!important;
  transition:none!important;
}

@keyframes scroll {
  to {
    transform:translateX(-40%);
  }
}

@keyframes breathe {
  50% {
    transform:translateX(-50%) rotate(-6deg) scale(1.04);
  }
}

@keyframes rotate {
  to {
    transform:rotate(360deg);
  }
}

@keyframes chop {
  0%,92%,100% {
    transform:translateX(-8px);
  }
  94% {
    transform:translateX(12px);
  }
  96% {
    transform:translateX(-17px);
  }
}

@keyframes blink {
  to {
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

@media(max-width:650px) {
  main {
    padding:0 22px;
  }
  header {
    padding:22px 0;
  }
  .wordmark {
    font-size:25px;
  }
  .wordmark span {
    font-size:8px;
    max-width:90px;
  }
  .connection {
    font-size:8px;
    letter-spacing:0;
  }
  .hero {
    min-height:505px;
    padding-top:27px;
  }
  .coordinates {
    top:65px;
    font-size:8px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:2px;
  }
  .portal {
    top:70px;
    width:320px;
    height:340px;
  }
  .eye {
    top:91px;
    left:118px;
    width:88px;
    height:47px;
  }
  .eye div {
    height:50px;
    width:39px;
  }
  .title-block {
    padding-top:192px;
  }
  h1 {
    font-size:clamp(88px,23vw,145px);
  }
  .overline {
    font-size:8px;
    letter-spacing:2px;
  }
  .subtitle {
    font-size:12px;
    letter-spacing:5px;
    margin-top:20px;
  }
  .byline {
    font-size:14px;
  }
  .seal {
    right:0;
    top:117px;
    width:75px;
    height:75px;
    font-size:6px;
    padding-top:12px;
  }
  .seal b {
    font-size:14px;
  }
  .annotation {
    top:162px;
    font-size:8px;
    left:0;
  }
  .warning-strip {
    font-size:8px;
    padding:8px 10px;
    letter-spacing:1px;
  }
  .intro {
    font-size:21px;
  }
  .description {
    font-size:11px;
  }
  #enter {
    font-size:10px;
    padding:15px;
    letter-spacing:1px;
  }
  .footer-line {
    flex-wrap:wrap;
    justify-content:center;
  }
  .status {
    letter-spacing:1px;
  }
}

.complaints {
  border-top:1px solid #a876b238;
  padding:28px 0 36px;
  text-align:center;
}

.complaints h2 {
  font-size:12px;
  letter-spacing:3px;
  color:var(--orange);
  margin:0 0 12px;
}

#complaint {
  max-width:460px;
  margin:20px auto 0;
  text-align:left;
}

#complaint label {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:#a38da9;
  margin-bottom:14px;
}

#complaint input,#complaint textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  padding:9px 10px;
  font:inherit;
  font-size:12px;
  color:var(--acid);
  background:#030303;
  border:2px inset #6b526d;
  resize:vertical;
}

#complaint input::placeholder,#complaint textarea::placeholder {
  color:#5e4a63;
}

#complaint input:focus,#complaint textarea:focus {
  outline:2px solid var(--acid);
  outline-offset:1px;
}

/* The honeypot: out of sight, out of the tab order, still in the form. */
#complaint .trap {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}

#complaint button {
  display:block;
  margin:6px auto 16px;
  background:#42295c;
  border:2px outset var(--purple);
  box-shadow:4px 4px 0 #1a0826;
  color:#f6e7ff;
  padding:12px 20px;
  font-size:11px;
  font-weight:bold;
  letter-spacing:2px;
  transition:transform .15s,background .15s;
}

#complaint button:hover:not(:disabled) {
  background:var(--orange);
  color:#190a16;
  transform:rotate(1deg);
}

#complaint button:disabled {
  opacity:.6;
  cursor:wait;
}

#complaint .status {
  text-align:center;
}