@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --space: #09061d;
  --deep-purple: #26125e;
  --purple: #6d39d5;
  --violet: #b17bff;
  --yellow: #ffd52e;
  --cream: #fff5c9;
  --pink: #ff6da9;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--white);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  background: var(--space);
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 20;
}

.skip:focus {
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  color: var(--space);
  background: var(--white);
}

.cosmic-home {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, #6e3ac580 0 2%, transparent 22%),
    radial-gradient(circle at 77% 71%, #ff4e9d46 0 3%, transparent 26%),
    linear-gradient(145deg, #10062d 0%, #281064 47%, #0a163d 100%);
}

.cosmic-home::before,
.cosmic-home::after {
  position: absolute;
  z-index: -1;
  content: "";
  border-radius: 50%;
  filter: blur(1px);
}

.cosmic-home::before {
  width: 34rem;
  height: 34rem;
  top: -18rem;
  left: -12rem;
  background: #cf7dff45;
}

.cosmic-home::after {
  width: 29rem;
  height: 29rem;
  right: -15rem;
  bottom: -11rem;
  background: #ffb52f4a;
}

.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(.6rem, 2.4vh, 1.4rem) 0;
}

.brand {
  color: var(--cream);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem 1.1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav a:not(.brand) {
  color: #eee5ff;
  font-weight: 800;
  text-decoration: none;
}

.nav a:not(.brand):hover,
.nav a:not(.brand):focus-visible { color: var(--yellow); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr);
  align-items: center;
  gap: clamp(1rem, 4vh, 2.5rem) clamp(1.5rem, 5vw, 5rem);
  flex: 1 0 auto;
  width: min(1180px, calc(100% - 2.5rem));
  min-height: 0;
  margin: 0 auto;
  padding: clamp(.25rem, 2vh, 3rem) 0 clamp(.5rem, 3vh, 3rem);
}

.copy {
  position: relative;
  z-index: 3;
  max-width: 500px;
  margin-left: clamp(7rem, 12vw, 10rem);
}

.kicker {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .5rem .9rem;
  border: 1px solid #ffe8978c;
  border-radius: 999px;
  color: var(--yellow);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  background: #130a3580;
}

h1 {
  max-width: 8ch;
  margin: 0;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: clamp(3.2rem, 7.7vw, 6rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.07em;
  text-wrap: balance;
  color: var(--yellow);
  -webkit-text-stroke: 2px #fff3a5;
  text-shadow: 0 .08em 0 #2679df, 0 .14em 0 #123c9d, 0 .2em .45em #090318a8;
}

.title-name,
.title-age { display: block; }

.eye-o {
  --pupil-x: 0px;
  --pupil-y: 0px;
  position: relative;
  display: inline-grid;
  width: .76em;
  height: .86em;
  margin-left: -.03em;
  padding: 0;
  border: .08em solid #183578;
  border-radius: 48%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  place-items: center;
  vertical-align: .14em;
  background: #cadcf1;
  box-shadow: inset 0 -.09em #7b96b7, 0 .07em 0 #164494;
}

.eye-o:focus-visible { outline: 3px solid #ffd52e; outline-offset: .12em; }

.eye-cue {
  position: absolute;
  top: -.22em;
  right: -.3em;
  z-index: 2;
  display: grid;
  width: .46em;
  height: .46em;
  border: .03em solid #fff8c4;
  border-radius: 50%;
  color: #2a1658;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff7b8, var(--yellow) 58%, #f0b51a);
  box-shadow: 0 .04em 0 #c98910, 0 0 .18em #ffd52ecc;
  animation: eye-cue-pulse .9s ease-in-out infinite;
}

.eye-cue::after {
  position: absolute;
  inset: -.12em;
  border: .03em solid #ffd52e;
  border-radius: 50%;
  content: "";
  animation: eye-cue-ring 1.15s ease-out infinite;
}

.eye-cue svg {
  width: 58%;
  height: 58%;
  fill: currentColor;
}

.eye-o.has-heard .eye-cue { display: none; }

@keyframes eye-cue-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

@keyframes eye-cue-ring {
  0% { transform: scale(.75); opacity: .85; }
  100% { transform: scale(1.85); opacity: 0; }
}

.eye-white {
  position: relative;
  display: grid;
  width: 74%;
  height: 74%;
  overflow: hidden;
  border-radius: 50%;
  place-items: center;
  background: #fff;
  box-shadow: inset 0 -.06em .08em #b6d4e8;
}

.eye-pupil {
  width: 48%;
  height: 48%;
  border: .035em solid #1e3163;
  border-radius: 50%;
  background: #5b301b;
  box-shadow: inset .06em -.05em #140d18;
  transform: translate(var(--pupil-x), var(--pupil-y));
  transition: transform .07s linear;
}

.eye-o.is-wandering .eye-pupil { transition: transform .55s ease-in-out; }

.eye-shine {
  position: absolute;
  top: 25%;
  left: 27%;
  width: 17%;
  height: 17%;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.welcome {
  max-width: 25ch;
  margin: 1.2rem 0 0;
  color: var(--cream);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 3px 0 #441c87;
}

.intro {
  max-width: 54ch;
  margin: 1rem 0 0;
  color: #eee9ff;
  font-size: 1.06rem;
  line-height: 1.6;
}

.party-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
  background: #09061dd9;
}

.party-overlay[hidden] { display: none; }
.party-overlay:not([hidden]) { animation: overlay-in .2s ease-out; }

@keyframes overlay-in { from { opacity: 0; } }

html.has-overlay { overflow: hidden; }

.party-info {
  width: min(100%, 30rem);
  margin: 0;
  padding: 1.1rem clamp(1rem, 3vw, 1.5rem) 1.3rem;
  border: 1px solid #ffe8978c;
  border-radius: 1rem;
  text-align: left;
  background: #170b3a;
}

.party-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.party-info h2 {
  margin: 0;
  color: var(--yellow);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .03em;
}

.party-info dl {
  display: grid;
  gap: .4rem;
  margin: 0;
}

.party-info dl > div {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: .6rem;
}

.party-info dt {
  padding-top: .15rem;
  color: var(--pink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.party-info dd {
  margin: 0;
  color: #eee9ff;
  font-size: .95rem;
  line-height: 1.35;
}

.party-info dl > div:nth-child(-n+2) dd {
  color: var(--cream);
  font-size: 1.1rem;
  font-weight: 700;
}

.map-link,
.party-close {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 2.2rem;
  margin-top: .35rem;
  padding: 0 .9rem;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  color: var(--yellow);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

.party-close { margin-top: 0; }

.rsvp-card { width: min(100%, 28rem); }

.rsvp-kicker {
  margin: 0 0 .2rem;
  color: var(--pink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rsvp-lead {
  margin: 0 0 1rem;
  color: #eee9ff;
  font-size: .95rem;
  line-height: 1.45;
}

.rsvp-form {
  display: grid;
  gap: .45rem;
}

.rsvp-form label {
  color: var(--yellow);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rsvp-form input {
  width: 100%;
  min-height: 2.6rem;
  padding: .55rem .75rem;
  border: 1px solid #ffe89766;
  border-radius: .7rem;
  color: #211047;
  font: inherit;
  background: #fff8dc;
}

.rsvp-form input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

.plus-one-toggle {
  justify-self: start;
  min-height: 2.4rem;
  margin: .35rem 0 .15rem;
  padding: 0 1rem;
  border: 2px dashed #ffe89788;
  border-radius: 999px;
  color: var(--yellow);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  background: transparent;
  cursor: pointer;
}

.plus-one-toggle[aria-expanded="true"],
.plus-one-toggle:hover { color: #211047; border-style: solid; background: var(--yellow); }

.plus-one-field { display: grid; gap: .45rem; }
.plus-one-field[hidden] { display: none; }

.rsvp-submit {
  min-height: 2.8rem;
  margin-top: .6rem;
  border: 0;
  border-radius: 999px;
  color: #211047;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .03em;
  background: var(--yellow);
  cursor: pointer;
}

.rsvp-submit:hover { filter: brightness(1.08); }
.rsvp-submit:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.rsvp-status {
  margin: .4rem 0 0;
  font-size: .92rem;
  font-weight: 700;
}

.rsvp-status.is-ok { color: #9cf0b8; }
.rsvp-status.is-error { color: #ff9ab8; }

.map-link:hover,
.map-link:focus-visible,
.party-close:hover,
.party-close:focus-visible { color: #211047; background: var(--yellow); }
.map-link:focus-visible,
.party-close:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

@media (pointer: coarse) {
  .map-link,
  .party-close { min-height: 2.75rem; }
}

@media (min-width: 761px) {
  .party-info { width: min(100%, 40rem); }
  .party-info dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
  .party-info dl > div { grid-template-columns: 1fr; gap: .15rem; align-content: start; }
}

.nav a:focus-visible,
.bottom-nav a:focus-visible,
.bottom-nav button:focus-visible,
.taste:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

.gustos-dossier {
  position: relative;
  width: min(100%, 46rem);
  max-height: min(88dvh, 54rem);
  overflow: auto;
  margin: 0;
  padding: 1.35rem clamp(1rem, 3vw, 1.6rem) 1.2rem;
  border: 1px solid #ffe8978c;
  border-radius: 1.2rem;
  text-align: left;
  background:
    radial-gradient(circle at 92% 8%, #ffd52e55 0 3%, transparent 22%),
    radial-gradient(circle at 8% 88%, #ff6da93d 0 4%, transparent 26%),
    #170b3a;
}

.gustos-stamp {
  position: absolute;
  top: .85rem;
  right: 6.4rem;
  padding: .22rem .55rem;
  border: 2px solid #ff6da9;
  border-radius: .3rem;
  color: #ff6da9;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  transform: rotate(8deg);
  pointer-events: none;
}

.gustos-kicker {
  margin: 0 0 .25rem;
  color: var(--yellow);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gustos-dossier h2 {
  margin: 0;
  max-width: 16ch;
  color: var(--yellow);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}

.gustos-lead,
.gustos-note {
  margin: .7rem 0 0;
  color: #eee9ff;
  font-size: .95rem;
  line-height: 1.45;
}

.gustos-note {
  color: #cfc4ff;
  font-size: .86rem;
}

.gustos-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}

.taste {
  position: relative;
  min-height: 8.4rem;
  padding: .8rem .75rem .75rem;
  border-radius: .95rem;
  color: #20124a;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 10px 18px #05011755;
  animation: taste-in .45s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay: var(--delay, 0s);
}

.taste h3 {
  margin: .35rem 0 .3rem;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.05;
}

.taste p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.35;
}

.taste-tag {
  display: inline-block;
  padding: .12rem .42rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #20124a14;
}

.taste.is-ticket {
  color: #fff8d8;
  background:
    radial-gradient(circle at 0 1.15rem, #170b3a 0 .38rem, transparent .4rem),
    radial-gradient(circle at 100% 1.15rem, #170b3a 0 .38rem, transparent .4rem),
    linear-gradient(180deg, #5b2fd4, #3b1a8f);
}

.taste.is-paint {
  background:
    radial-gradient(circle at 88% 18%, #ff6da9 0 12%, transparent 13%),
    radial-gradient(circle at 16% 86%, #ffd52e 0 10%, transparent 11%),
    #fff3bf;
}

.taste.is-board {
  background: repeating-linear-gradient(90deg, #ffe7a8 0 12px, #fff4c8 12px 24px);
}

.taste.is-popper {
  color: #3a1840;
  background:
    radial-gradient(circle at 80% 20%, #fff 0 4%, transparent 5%),
    radial-gradient(circle at 20% 70%, #ffd52e 0 6%, transparent 7%),
    linear-gradient(145deg, #ff8ec0, #ffd36a);
}

.taste.is-lab {
  color: #e8fff4;
  background:
    linear-gradient(135deg, #1d6b7a, #134e72);
  box-shadow: inset 0 0 0 2px #7cf0c766, 0 10px 18px #05011755;
}

.taste.is-camera {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column: 1 / -1;
  column-gap: .85rem;
  align-content: start;
  min-height: 0;
  color: #2a1848;
  background: #fff7eb;
  box-shadow: 0 10px 18px #05011755, inset 0 0 0 8px #fffdf6;
}

.taste.is-camera::before {
  content: "";
  grid-row: 1 / span 3;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: .4rem;
  background:
    radial-gradient(circle at 62% 36%, #fff8 0 8%, transparent 9%),
    radial-gradient(circle at 50% 52%, #1a1238 0 22%, #6d39d5 24% 36%, #0d0a18 38% 54%, #ffd52e 56% 62%, #2a1848 64%);
  box-shadow: inset 0 0 0 3px #20124a1f;
}

.taste.is-camera .taste-tag,
.taste.is-camera h3,
.taste.is-camera p { grid-column: 2; }

.taste.is-popping { animation: taste-burst .42s ease-out; }

@keyframes taste-in {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(.72) translateY(.6rem); }
  to { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1); }
}

@keyframes taste-burst {
  0% { transform: rotate(var(--tilt, 0deg)) scale(1); filter: brightness(1); }
  40% { transform: rotate(calc(var(--tilt, 0deg) + 6deg)) scale(1.08); filter: brightness(1.25); }
  100% { transform: rotate(var(--tilt, 0deg)) scale(1); filter: brightness(1); }
}

@media (min-width: 761px) {
  .gustos-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gustos-stamp { right: 7rem; }
}

@media (max-width: 760px) {
  .gustos-stamp { display: none; }
  .gustos-dossier {
    max-height: min(92dvh, 54rem);
    padding: 1rem .85rem .85rem;
  }
  .gustos-dossier h2 { max-width: none; }
  .gustos-lead { margin-top: .45rem; font-size: .88rem; }
  .gustos-board { gap: .55rem; margin-top: .75rem; }
  .taste { min-height: 0; padding: .65rem .6rem .6rem; }
  .taste h3 { font-size: .98rem; }
  .taste p { font-size: .74rem; }
  .taste.is-camera { padding: .7rem .75rem .7rem; }
  .taste.is-camera::before { width: 3rem; height: 3rem; }
  .gustos-note { margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .taste,
  .taste.is-popping { animation: none; }
}

.art { display: contents; }

.poster {
  display: none;
}

.octopus {
  --lid-close: 90ms;
  --lid-open: 170ms;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: min(49vw, 640px);
  pointer-events: none;
}

.octopus > img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(-22px 20px 20px #050117a6);
}

.octopus-socket {
  position: absolute;
  left: 61.7%;
  top: 39.3%;
  width: 28.4%;
  height: 14.1%;
  overflow: hidden;
  border-radius: 50%;
  transform: rotate(6deg);
}

.octopus-socket::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 52%;
  height: 22%;
  border: 0;
  border-top: 2px solid #4a1010d4;
  border-radius: 50%;
  opacity: 0;
  transform: scaleX(.4);
  box-shadow: 0 1px 2px #2a080859;
  transition: opacity var(--lid-close), transform var(--lid-close);
}

.octopus.is-closing .octopus-socket::after {
  opacity: .88;
  transform: scaleX(1);
  transition-duration: var(--lid-close);
}

.octopus-lid {
  position: absolute;
  left: -8%;
  right: -8%;
  display: block;
  transform: scaleY(0);
  transition: transform var(--lid-open) cubic-bezier(.14, .62, .22, 1);
}

.octopus-lid-top {
  top: 0;
  height: 82%;
  transform-origin: top center;
  border-radius: 0 0 50% 50%;
  background:
    radial-gradient(ellipse 32% 40% at 28% 28%, #ffc2a84d, #0000 70%),
    linear-gradient(180deg, #0000 0%, #0000 38%, #7a201855 80%, #4a1010b8 100%),
    linear-gradient(112deg, #e24e3a 0%, #c8362a 42%, #a82420 76%, #861818 100%);
}

.octopus-lid-bottom {
  bottom: 0;
  height: 48%;
  transform-origin: bottom center;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(0deg, #6a1818 0%, #b43028 68%, #c83830 100%);
}

.octopus.is-closing .octopus-lid {
  transform: scaleY(1);
  transition-duration: var(--lid-close);
  transition-timing-function: cubic-bezier(.55, .04, .88, .32);
}

.minion-ship {
  position: absolute;
  z-index: 4;
  top: 65%;
  left: -15rem;
  width: 9rem;
  height: 5rem;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: crosshair;
  background: transparent;
  animation: ship-flyby 15s linear infinite;
}

.minion-ship:focus-visible { outline: 3px solid #ffd52e; outline-offset: .5rem; }

.ship-whoosh {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid #9ce7ff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
}

.minion-ship.is-crossing .ship-whoosh {
  animation: ship-whoosh .7s ease-out;
}

.minion-ship.is-near .ship-body {
  filter: brightness(1.15);
  box-shadow: inset 0 -.55rem #151a5c, 0 .35rem .8rem #0501178c, 0 0 1.6rem #8ae7ff;
}

.ship-body {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 8.6rem;
  height: 3.2rem;
  border: .2rem solid #bdeeff;
  border-radius: 55% 50% 60% 45%;
  background: linear-gradient(165deg, #e8fbff 0 22%, #578ed6 23% 49%, #202c78 50% 100%);
  box-shadow: inset 0 -.55rem #151a5c, 0 .35rem .8rem #0501178c, 0 0 1rem #66c8ff;
  transform: perspective(240px) rotateX(12deg) rotateZ(-5deg);
}

.ship-body::before,
.ship-body::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  content: "";
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.ship-body::before {
  width: 1rem;
  height: 1rem;
  background: radial-gradient(circle, #fff 0 10%, #fff3a5 18%, #ffbd25 42%, #ff671e 65%, #f22970 78%, transparent 80%);
  box-shadow: 0 0 1rem .45rem #ff9c1f, 0 0 2.5rem .9rem #ff397b;
  transform: translate(-50%, -50%) scale(.1);
}

.ship-body::after {
  width: .8rem;
  height: .8rem;
  border: .22rem solid #fff3a5;
  box-shadow: 0 0 1rem #ff9c1f, inset 0 0 .6rem #ff397b;
  transform: translate(-50%, -50%) scale(.1);
}

.ship-dome {
  position: absolute;
  bottom: 1.55rem;
  left: 2.35rem;
  width: 3.3rem;
  height: 2.75rem;
  overflow: hidden;
  border: .15rem solid #d9fbff;
  border-radius: 50% 50% 34% 34%;
  background: linear-gradient(135deg, #f9ffffcc, #4db7f866 55%, #123e9a99);
  box-shadow: inset .3rem -.3rem .5rem #1c539099, 0 0 .8rem #70e9ff;
}

.ship-dome img {
  position: absolute;
  bottom: -.1rem;
  left: 50%;
  width: 2.7rem;
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 .1rem .08rem #102e6c);
}

.ship-light {
  position: absolute;
  right: 1rem;
  bottom: .35rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #ffd52e;
  box-shadow: 0 0 .4rem .2rem #ffd52e, 0 0 1rem .35rem #ff6da9;
  animation: ship-beacon .65s ease-in-out infinite alternate;
}

.explosion-particle {
  --travel-x: 0rem;
  --travel-y: 0rem;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  opacity: 0;
  background: #fff3a5;
  box-shadow: 0 0 .55rem .18rem #ffd52e, 0 0 1rem .4rem #ff6da9;
}

.particle-one { --travel-x: -4rem; --travel-y: -3.5rem; }
.particle-two { --travel-x: .8rem; --travel-y: -4.3rem; }
.particle-three { --travel-x: 4.4rem; --travel-y: -2.6rem; }
.particle-four { --travel-x: 5rem; --travel-y: 2.8rem; }
.particle-five { --travel-x: -1.8rem; --travel-y: 4rem; }
.particle-six { --travel-x: -4.6rem; --travel-y: 2.2rem; }

.ship-fragment {
  --fragment-x: 0rem;
  --fragment-y: 0rem;
  --fragment-rotation: 0deg;
  position: absolute;
  z-index: 7;
  top: 3rem;
  left: 4.3rem;
  width: .8rem;
  height: .45rem;
  border: .08rem solid #c6f4ff;
  border-radius: .18rem;
  opacity: 0;
  background: linear-gradient(135deg, #dffaff, #4c78cb 50%, #172262);
  box-shadow: 0 0 .45rem #6acaff;
}

.fragment-one { --fragment-x: -6rem; --fragment-y: -4rem; --fragment-rotation: -160deg; }
.fragment-two { --fragment-x: -1.5rem; --fragment-y: -5.5rem; --fragment-rotation: 210deg; }
.fragment-three { --fragment-x: 4.8rem; --fragment-y: -4.2rem; --fragment-rotation: 150deg; }
.fragment-four { --fragment-x: 7rem; --fragment-y: -.8rem; --fragment-rotation: 285deg; }
.fragment-five { --fragment-x: 5.2rem; --fragment-y: 4.4rem; --fragment-rotation: -230deg; }
.fragment-six { --fragment-x: -.4rem; --fragment-y: 5rem; --fragment-rotation: 190deg; }
.fragment-seven { --fragment-x: -5.5rem; --fragment-y: 3.6rem; --fragment-rotation: -270deg; }
.fragment-eight { --fragment-x: -7rem; --fragment-y: -.5rem; --fragment-rotation: 330deg; }

.ship-laser {
  position: absolute;
  z-index: -1;
  right: -6.8rem;
  width: 7.3rem;
  height: .18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #eaffff, #56f4ff 35%, #ff71b5 72%, transparent);
  box-shadow: 0 0 .35rem #69efff, 0 0 .75rem #ff6da9;
  transform: rotate(-8deg);
  transform-origin: left;
  animation: laser-flash .8s ease-in-out infinite alternate;
}

.laser-top { top: 1.55rem; }
.laser-bottom { top: 2.35rem; transform: rotate(8deg); animation-delay: .25s; }

.is-exploding .ship-body { animation: ship-burst .9s ease-out both; }
.is-exploding .ship-body::before { animation: fireball .8s ease-out both; }
.is-exploding .ship-body::after { animation: shockwave .75s ease-out both; }
.is-exploding .ship-laser,
.is-exploding .ship-light { animation: none; opacity: 0; }
.is-exploding .explosion-particle { animation: ship-debris .75s ease-out both; }
.is-exploding .ship-fragment { animation: ship-shrapnel .85s cubic-bezier(.14,.73,.31,1) both; }

.minion-buddy {
  position: absolute;
  z-index: 5;
  right: auto;
  bottom: 1.6rem;
  left: clamp(.25rem, 1.5vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(15vw, 195px);
}

.minion {
  display: block;
  width: 100%;
  transform: rotate(-4deg);
  filter: drop-shadow(0 18px 18px #06011d99);
}

.minion-buddy.is-playing .minion {
  animation: minion-jiggle .45s ease-in-out;
}

.minion-sound {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -.15rem;
  padding: 0;
  border: 2px solid #ffe897;
  border-radius: 50%;
  color: #2a1658;
  cursor: pointer;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff7b8, var(--yellow) 58%, #f0b51a);
  box-shadow: 0 4px 0 #c98910, 0 8px 16px #06011d88;
}

.minion-sound svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.minion-sound:hover { transform: translateY(-2px); }
.minion-sound:active { transform: translateY(2px); box-shadow: 0 2px 0 #c98910, 0 4px 10px #06011d66; }
.minion-sound:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.minion-sound.is-playing .wave-one,
.minion-sound.is-playing .wave-two {
  animation: speaker-wave .42s ease-in-out infinite;
}

.minion-sound.is-playing .wave-two { animation-delay: .12s; }

.minion-audio,
.eye-audio,
.ship-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes speaker-wave {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@keyframes minion-jiggle {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  30% { transform: rotate(-8deg) translateY(-6px); }
  60% { transform: rotate(1deg) translateY(-2px); }
}

.sparkle { position: absolute; z-index: 1; color: var(--yellow); font-size: clamp(1.7rem, 3vw, 2.7rem); text-shadow: 0 0 18px #ffd42d; }
.sparkle.one { top: 14%; right: 39%; }
.sparkle.two { bottom: 18%; left: 25%; font-size: 1.4rem; }
.sparkle.three { top: 32%; right: 8%; color: var(--pink); }

.bottom-nav {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  width: min(1180px, calc(100% - 2.5rem));
  flex: none;
  margin: 0 auto;
  padding: clamp(.4rem, 1.5vh, 1rem) 0 clamp(.8rem, 3.5vh, 2.4rem);
}

.bottom-nav a,
.bottom-nav button {
  min-width: 10rem;
  min-height: 44px;
  padding: .8rem 1.1rem;
  border: 2px solid #ffe89788;
  border-radius: 999px;
  color: var(--cream);
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  background: #170b3a9e;
  box-shadow: 0 8px 20px #05011755;
  cursor: pointer;
}

.bottom-nav a:hover,
.bottom-nav button:hover,
.bottom-nav button[aria-expanded="true"] { color: #211047; background: var(--yellow); border-color: var(--yellow); }

@keyframes ship-whoosh {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

@keyframes ship-flyby {
  0%, 14% { transform: translate(-12rem, 1.5rem) rotate(-5deg); opacity: 0; }
  18% { opacity: 1; }
  38% { transform: translate(46vw, -2rem) rotate(3deg); }
  62% { transform: translate(83vw, 1rem) rotate(-2deg); }
  78% { transform: translate(125vw, -3rem) rotate(5deg); opacity: 1; }
  80%, 100% { transform: translate(132vw, -3rem); opacity: 0; }
}

@keyframes ship-beacon { to { transform: scale(.65); opacity: .55; } }
@keyframes laser-flash { to { opacity: .25; transform: scaleX(.55) rotate(-8deg); } }
@keyframes ship-burst {
  0% { opacity: 1; transform: perspective(240px) rotateX(12deg) rotateZ(-5deg) scale(1); filter: brightness(1); }
  25% { opacity: 1; transform: perspective(240px) rotateX(12deg) rotateZ(-5deg) scale(1.45); filter: brightness(2.4) saturate(2); }
  100% { opacity: 0; transform: perspective(240px) rotateX(12deg) rotateZ(-5deg) scale(.1); filter: brightness(3) blur(.2rem); }
}
@keyframes ship-debris {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--travel-x), var(--travel-y)) scale(.15); }
}
@keyframes fireball {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(4.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6.3); }
}
@keyframes shockwave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}
@keyframes ship-shrapnel {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.5); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fragment-x), var(--fragment-y)) rotate(var(--fragment-rotation)) scale(.4); }
}

@media (max-width: 760px) {
  .nav { width: min(100% - 2rem, 580px); align-items: flex-start; }
  .nav ul { gap: .3rem .7rem; font-size: .9rem; }
  .hero { grid-template-columns: 1fr; width: min(100% - 2rem, 580px); padding-top: clamp(.5rem, 3vh, 2.5rem); padding-bottom: clamp(4.5rem, 15vh, 8rem); }
  .copy { text-align: center; margin-inline: auto; }
  h1 { margin-inline: auto; font-size: clamp(3.7rem, 19vw, 5.5rem); }
  .welcome, .intro { margin-inline: auto; }
  .octopus { top: 0; right: 0; width: min(48vw, 230px); }
  .minion-ship { top: 71%; transform: scale(.72); transform-origin: left center; animation-name: ship-flyby-mobile; }
  .minion-buddy { top: auto; bottom: 3.4rem; left: -.4rem; width: 105px; }
  .sparkle.one { top: 27%; right: 12%; }
  .sparkle.two { display: none; }
  .sparkle.three { top: 58%; right: 8%; }
  .bottom-nav { width: min(100% - 2rem, 580px); gap: .5rem; }
  .bottom-nav a,
  .bottom-nav button { min-width: 0; flex: 1 1 auto; padding-inline: .7rem; font-size: .95rem; }
}

@media (max-width: 390px) {
  .brand { max-width: 11ch; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .kicker { margin-bottom: .6rem; }
  .welcome { margin-top: .8rem; }
  .intro { margin-top: .6rem; font-size: .95rem; line-height: 1.45; }
  .hero { padding-bottom: 4rem; }
}

@keyframes ship-flyby-mobile {
  0%, 16% { transform: translate(-12rem, 0) scale(.72); opacity: 0; }
  21% { opacity: 1; }
  72% { transform: translate(120vw, -1rem) scale(.72); opacity: 1; }
  75%, 100% { transform: translate(128vw, -1rem) scale(.72); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .minion-ship,
  .ship-light,
  .ship-laser { animation: none; }
  .minion-ship { display: none; }
  .eye-pupil { transition: none; }
  .eye-cue,
  .eye-cue::after { animation: none; }
  .minion-buddy.is-playing .minion,
  .minion-sound.is-playing .wave-one,
  .minion-sound.is-playing .wave-two { animation: none; }
  .octopus-lid,
  .octopus-socket::after { transition: none; }
  .octopus.is-closing .octopus-lid { transform: none; }
  .party-overlay:not([hidden]) { animation: none; }
}

.slime-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

.slime {
  --size: 120px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: calc(var(--size) * 0.9);
  will-change: transform;
  filter: drop-shadow(0 6px 5px rgba(140, 45, 0, 0.35));
}

.slime-body {
  position: absolute;
  inset: 0;
  filter: url(#slime-goo);
}

.slime-body b {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc266 0, #ff9100 42%, #e25400 100%);
}

.slime-gloss {
  position: absolute;
  left: 18%;
  top: 8%;
  width: 34%;
  height: 16%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(3px);
  transform: rotate(-24deg);
}

.slime-eye {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff 0 40%, #f3ebe6 65%, #d9b8ad 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 40, 10, 0.35), inset 0 -3px 5px rgba(150, 70, 50, 0.35), 0 1px 3px rgba(100, 30, 0, 0.55);
  overflow: hidden;
  display: grid;
  place-items: center;
  animation: slime-blink var(--blink-time, 4s) ease-in-out var(--blink-delay, 0s) infinite;
}

.slime-eye::before,
.slime-eye::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
}

.slime-eye::before {
  inset: 18% auto auto 24%;
  width: 17%;
  height: 17%;
  background: #fff;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0.7em 0.9em 0 -0.1em rgba(255, 255, 255, 0.55);
}

.slime-eye::after {
  background: linear-gradient(180deg, rgba(120, 40, 0, 0.55) 0, rgba(120, 40, 0, 0) 38%);
}

.slime-eye i {
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 30%, var(--iris, #3f9142) 34%, var(--iris, #3f9142) 62%, #0b0f08 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(var(--look-x, 0), var(--look-y, 0));
}

@keyframes slime-blink {
  0%, 93%, 100% { scale: 1 1; }
  96% { scale: 1 0.08; }
}

.slime.is-follower {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slime.is-follower.is-visible { opacity: 1; }

.slime.is-splat {
  transition: transform 3s ease-in, opacity 1.2s ease 2s;
}

.slime-defs { position: absolute; }

.slime.is-miranda {
  translate: -50% -50%;
  animation: slime-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  transition: opacity 0.6s ease;
}

.slime.is-miranda.is-leaving { opacity: 0; }

.slime.is-miranda .slime-eye i { transition: transform 0.3s ease-in-out; }

@keyframes slime-pop {
  from { scale: 0; }
  to { scale: 1; }
}