/* MESS / space & magic. Original local vectors; decorative, bounded and silent. */
.magic-star{
  display:inline-block;
  width:64px;
  height:64px;
  flex:0 0 auto;
  vertical-align:middle;
  background:url('assets/space/star-four.svg') center/contain no-repeat;
  pointer-events:none;
  user-select:none;
  font-size:0;
  line-height:0;
  color:transparent;
  text-shadow:none;
}
.magic-star--small{width:26px;height:26px}
.magic-star--orbit{width:88px;height:70px;background-image:url('assets/space/star-orbit.svg')}
.magic-star--six{background-image:url('assets/space/star-six.svg')}

/* Replace the old glyph treatment without changing the portal's layout or layer. */
.portal-spark.magic-star{display:block;position:absolute;font-size:0;line-height:0;color:transparent;text-shadow:none}
.portal-spark.spark-a{width:clamp(100px,12vw,150px);height:clamp(100px,12vw,150px);background-image:url('assets/space/star-four.svg');transform-origin:51% 53%;animation:mess-star-sway 19s ease-in-out infinite alternate}
.portal-spark.spark-b{width:82px;height:82px;background-image:url('assets/space/star-six.svg');transform:rotate(-11deg)}
.manifesto-strip .magic-star{width:39px;height:39px;flex:0 0 39px}
.manifesto-strip .magic-star:nth-of-type(4n){background-image:url('assets/space/star-six.svg')}

/* Hand-drawn orbital lines use the original ellipse bounds. */
.portal .orbit{border:0;background:url('assets/space/orbit-ink.svg') center/100% 100% no-repeat}
.portal .orbit-2{opacity:.62}
.portal::after{
  content:"";
  position:absolute;
  left:22%;
  bottom:8%;
  width:122px;
  height:30px;
  background:url('assets/space/constellation-ink.svg') center/contain no-repeat;
  pointer-events:none;
  z-index:1;
}

/* A small drawing in the existing blank area beneath the header links. */
.header{
  background-image:url('assets/space/comet-ink.svg');
  background-position:50% calc(100% - 4px);
  background-size:100px 23px;
  background-repeat:no-repeat;
}
.hero .eyebrow::after{
  content:"";
  display:block;
  width:28px;
  height:23px;
  flex:0 0 28px;
  background:url('assets/space/star-orbit.svg') center/contain no-repeat;
  pointer-events:none;
}

/* Reserve a separate line below section labels; no drawing behind the words. */
.agenda .section-kicker,
.collective .section-kicker,
.contact .section-kicker{
  padding-bottom:40px;
  background-repeat:no-repeat;
  background-position:50% calc(100% - 6px);
  background-size:112px 22px;
}
.agenda .section-kicker{background-image:url('assets/space/constellation-light.svg')}
.collective .section-kicker{background-image:url('assets/space/comet-ink.svg')}
.contact .section-kicker{background-image:url('assets/space/constellation-ink.svg')}

/* Motifs live inside existing bottom padding, clear of flyer, copy and tickets. */
.agenda,.collective{position:relative;isolation:isolate}
.agenda::after{
  content:"";
  position:absolute;
  right:var(--pad);
  bottom:18px;
  width:102px;
  height:55px;
  background:url('assets/space/vinyl-planet.svg') center/contain no-repeat;
  pointer-events:none;
  animation:mess-planet-drift 17s ease-in-out infinite alternate;
}
.collective::after{
  content:"";
  position:absolute;
  right:var(--pad);
  bottom:24px;
  width:112px;
  height:35px;
  background:url('assets/space/comet-ink.svg') center/contain no-repeat;
  pointer-events:none;
}
footer{
  padding-bottom:47px;
  background-image:url('assets/space/constellation-light.svg');
  background-position:50% calc(100% - 7px);
  background-size:105px 24px;
  background-repeat:no-repeat;
}

@keyframes mess-star-sway{
  from{transform:rotate(-5deg)}
  to{transform:rotate(12deg)}
}
@keyframes mess-planet-drift{
  from{transform:translateX(-5px) rotate(-4deg)}
  to{transform:translateX(0) rotate(4deg)}
}
html[data-motion='paused'] .portal-spark.spark-a,
html[data-motion='paused'] .agenda::after{animation-play-state:paused!important}

@media(max-width:1100px){
  .portal-spark.spark-a{width:108px;height:108px}
  .portal-spark.spark-b{width:64px;height:64px}
}
@media(max-width:760px){
  .portal-spark.spark-a{width:82px;height:82px}
  .portal-spark.spark-b{width:49px;height:49px}
  .agenda .section-kicker,.collective .section-kicker,.contact .section-kicker{padding-bottom:35px;background-size:99px 19px}
  .agenda::after{width:76px;height:34px;bottom:9px}
  .collective::after{width:85px;height:26px;bottom:9px}
  .manifesto-strip .magic-star{width:29px;height:29px;flex-basis:29px}
}
@media(max-width:600px){
  .header{background-size:79px 18px;background-position:50% calc(100% - 2px)}
  .hero .eyebrow::after{width:23px;height:19px;flex-basis:23px}
  .portal-spark.spark-a{width:70px;height:70px;right:2%;top:4%}
  .portal-spark.spark-b{width:45px;height:45px;left:1%;top:14%}
  .portal::after{left:31%;bottom:16%;width:99px;height:22px}
  .magic-star--small{width:22px;height:22px}
  .magic-star--orbit{width:66px;height:52px}
  footer{padding-bottom:43px;background-size:88px 20px}
}
@media(prefers-reduced-motion:reduce){
  .portal-spark.spark-a,.agenda::after{animation:none!important}
}