:root{
  --moa-design-gold:#efbd5c;
  --moa-design-gold-light:#ffe7a2;
  --moa-design-petrol:#073946;
  --moa-design-night:#021c26;
}

body{
  background:
    radial-gradient(ellipse at 0 12%,#d7942c1f,transparent 22%),
    radial-gradient(ellipse at 100% 72%,#b4772524,transparent 24%),
    var(--moa-design-night);
}

.site-header{
  border-bottom-color:#efbd5c80;
  text-shadow:0 2px 4px #00151d;
}

.hero-image{
  background-image:url('/assets/home-amsterdam-premium-1983.webp');
  background-position:center 43%;
}

.hero-shade{
  background:
    radial-gradient(circle at 50% 35%,transparent 8%,#00162042 56%,#00131aa8 100%),
    linear-gradient(180deg,#00152145 0%,#00152110 31%,#001b235e 72%,#061f27 100%);
  box-shadow:inset 0 0 110px #00141b8f;
}

.hero h1 img{
  filter:drop-shadow(0 4px 5px #00141b9c) drop-shadow(0 0 20px #f0b84c18);
}

.hero h2,.hero-description{
  text-shadow:0 3px 6px #00131ad9;
}

.intro{
  position:relative;
}

.intro:after{
  content:'';
  display:block;
  width:min(420px,72vw);
  height:8px;
  margin:42px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop stop-color='%23b17b2e' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23edb74f'/%3E%3Cstop offset='.5' stop-color='%23ffe3a0'/%3E%3Cstop offset='.65' stop-color='%23edb74f'/%3E%3Cstop offset='1' stop-color='%23b17b2e' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 6h123l17 4-17-1H0zm300 0H177l-17 4 17-1h123zM150 14c-7-3-9-7-8-12l6 5 2-7 2 7 6-5c1 5-1 9-8 12z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.game-visual{
  border-color:#f0c46e;
  background:
    radial-gradient(ellipse at 25% 0,#2d716a42,transparent 58%),
    radial-gradient(ellipse at 50% 45%,#0b4d53 0%,#063640 58%,#021f2a 100%);
  box-shadow:
    inset 0 0 0 1px #ffe6a82e,
    inset 0 0 52px #001620a3,
    0 3px 0 #805526,
    0 14px 30px #00121994;
}

.game-visual:before,.game-visual:after{
  content:'';
  position:absolute;
  z-index:0;
  top:0;
  width:42%;
  height:90px;
  pointer-events:none;
  opacity:.34;
  background:url('/assets/game-foliage-reference-1983.webp') left top/auto 100% no-repeat;
}

.game-visual:before{left:0}
.game-visual:after{right:0;transform:scaleX(-1)}
.game-visual>*{position:relative;z-index:1}

.map-visual{
  background:
    radial-gradient(ellipse at 50% 15%,#83683838,transparent 44%),
    radial-gradient(ellipse at 50% 45%,#174f50 0%,#083841 60%,#021f29 100%);
}

.powers-visual{
  background:
    radial-gradient(ellipse at 50% 43%,#1c615d 0%,#073d46 58%,#021f29 100%);
}

.phone{
  width:210px;
  border:2px solid #efc779;
  border-radius:22px;
  background:#062f39;
  box-shadow:
    inset 0 0 0 2px #9a672d,
    7px 9px 0 #00171fb8,
    0 17px 30px #00131bb5;
}

.map-phone{width:220px;margin-top:7px}

.visual-note{
  border-top-color:#efbd5c80;
  background:linear-gradient(180deg,#062f37f0,#031f28f5);
  color:#f8dfaa;
}

.card-copy .step{
  color:var(--moa-design-gold-light);
  text-shadow:0 2px 3px #00141b;
}

.card-copy h3{
  color:#ffe0a0;
  text-shadow:0 2px 3px #00141b;
}

.golden{
  background:
    linear-gradient(90deg,#031d27ed 0%,#062c34c7 48%,#031d27ed 100%),
    url('/assets/game-lantern-atmosphere-1983.webp') center/cover no-repeat;
}

.download-image{
  background-image:url('/assets/home-amsterdam-premium-1983.webp');
  background-position:center 63%;
}

@media(max-width:760px){
  .site-header{background:linear-gradient(180deg,#001822ba,transparent)}
  .game-visual{height:430px}
}

@media(max-width:599px) and (orientation:portrait){
  .hero-image{
    background-image:url('/assets/home-amsterdam-mobile-1983.webp');
    background-position:center top;
    background-size:cover;
  }
  .hero-shade{
    background:
      linear-gradient(180deg,#0016212b 0%,transparent 34%,#001a224f 70%,#061f27 100%);
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}