:root {
  --space: #040611;
  --space-blue: #091531;
  --starlight: #f7fbff;
  --sun: #ffb321;
  --gold: #ffd36a;
  --violet: #9b76ff;
  --cyan: #55d9ff;
  --coral: #ff6f61;
  --cream: #fff9eb;
  --ink: #14284a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: white;
  font-family: "DM Sans", sans-serif;
  background: var(--space);
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.universe-shell,
.universe-scene {
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.universe-shell {
  position: relative;
}

.universe-scene {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 56%, rgba(28, 46, 97, 0.42), transparent 35%),
    radial-gradient(circle at 14% 18%, rgba(53, 29, 108, 0.32), transparent 29%),
    linear-gradient(160deg, #060918 0%, #03050d 55%, #071229 100%);
}

.stars,
.nebula {
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.stars {
  z-index: 0;
}

.stars-small {
  opacity: 0.62;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 0.7px, transparent 1px),
    radial-gradient(circle, rgba(130, 202, 255, 0.78) 0 0.65px, transparent 1px);
  background-position: 0 0, 31px 47px;
  background-size: 73px 73px, 109px 109px;
  animation: stars-drift 90s linear infinite;
}

.stars-medium {
  opacity: 0.72;
  background-image:
    radial-gradient(circle, #fff 0 1.1px, transparent 1.45px),
    radial-gradient(circle, #acdcff 0 1px, transparent 1.4px);
  background-position: 17px 23px, 81px 59px;
  background-size: 157px 157px, 213px 213px;
  animation: stars-drift 62s linear infinite reverse;
}

.stars-bright {
  opacity: 0.88;
  background-image:
    radial-gradient(circle, #fffbd8 0 1.6px, rgba(255, 251, 216, 0.22) 2.4px, transparent 4px),
    radial-gradient(circle, #c9ecff 0 1.35px, rgba(128, 208, 255, 0.18) 2.2px, transparent 3.7px);
  background-position: 24px 92px, 130px 18px;
  background-size: 271px 271px, 347px 347px;
  animation: stars-twinkle 5s ease-in-out infinite alternate;
}

.nebula {
  z-index: 0;
  opacity: 0.7;
  background:
    radial-gradient(ellipse at 18% 35%, rgba(118, 70, 219, 0.25), transparent 28%),
    radial-gradient(ellipse at 82% 62%, rgba(24, 149, 211, 0.2), transparent 31%),
    radial-gradient(ellipse at 50% 92%, rgba(229, 72, 132, 0.11), transparent 25%);
  filter: blur(1.8rem);
  animation: nebula-breathe 18s ease-in-out infinite alternate;
}

#space-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.webgl-ready #space-canvas {
  opacity: 1;
}

.webgl-ready .central-sun,
.webgl-ready .orbit,
.webgl-ready .planet-visual {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.webgl-ready .planet {
  --planet-x: 0px;
  --planet-y: 0px;
  --planet-ui-scale: 1;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  animation: none;
  translate: none;
  transform: translate3d(var(--planet-x), var(--planet-y), 0) translate(-50%, -50%) scale(var(--planet-ui-scale));
  will-change: transform;
}

.webgl-ready .planet:hover,
.webgl-ready .planet:focus-visible {
  --planet-ui-scale: 1.045;
  transform: translate3d(var(--planet-x), var(--planet-y), 0) translate(-50%, -50%) scale(var(--planet-ui-scale));
}

.webgl-ready .planet:active {
  --planet-ui-scale: 0.97;
  transform: translate3d(var(--planet-x), var(--planet-y), 0) translate(-50%, -50%) scale(var(--planet-ui-scale));
}

.webgl-ready .planet-label {
  border-color: rgba(168, 221, 255, 0.42);
  background: linear-gradient(145deg, rgba(7, 14, 36, 0.88), rgba(21, 35, 70, 0.76));
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.42), inset 0 0 1.3rem rgba(76, 159, 255, 0.1);
}

.webgl-ready .planet:focus-visible .planet-label {
  outline: 2px solid #fff;
  outline-offset: 0.22rem;
}

.space-copy {
  position: absolute;
  z-index: 8;
  top: clamp(1.5rem, 4vw, 3.6rem);
  left: clamp(1.3rem, 5vw, 4.6rem);
  width: min(31rem, 42vw);
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.7);
}

.eyebrow {
  margin: 0 0 0.55rem;
  color: #9ee8ff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.space-copy h1 {
  margin: 0;
  font: 600 clamp(2.7rem, 5.5vw, 5.6rem) / 0.88 "Fredoka", sans-serif;
  letter-spacing: -0.055em;
}

.space-copy h1 strong {
  display: block;
  color: #ffd568;
  text-shadow: 0 0 1.7rem rgba(255, 181, 44, 0.38);
}

.space-copy > p:last-child {
  margin: 0.9rem 0 0;
  color: rgba(235, 246, 255, 0.8);
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  font-weight: 600;
}

.surprise-signal {
  position: absolute;
  z-index: 8;
  bottom: 1.55rem;
  left: clamp(1.2rem, 5vw, 4.5rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid rgba(155, 218, 255, 0.32);
  border-radius: 2rem;
  color: #effaff;
  font-size: 0.74rem;
  background: rgba(8, 17, 42, 0.72);
  box-shadow: 0 0.55rem 2rem rgba(0, 0, 0, 0.25), inset 0 0 1.1rem rgba(75, 164, 255, 0.08);
  backdrop-filter: blur(0.7rem);
}

.surprise-signal span {
  font-size: 1rem;
}

.space-instruction {
  position: absolute;
  z-index: 8;
  right: clamp(1.2rem, 4vw, 4rem);
  bottom: 1.7rem;
  margin: 0;
  color: rgba(220, 243, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.orbit {
  position: absolute;
  z-index: 1;
  top: 54%;
  left: 52%;
  border: 1px solid rgba(153, 197, 255, 0.14);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 1.2rem rgba(91, 164, 255, 0.025);
}

.orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.2rem;
  width: 0.34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9efff;
  box-shadow: 0 0 0.7rem #85cfff;
}

.orbit-one {
  width: min(43vw, 39rem);
  height: min(23vw, 20rem);
  transform: translate(-50%, -50%) rotate(-11deg);
}

.orbit-two {
  width: min(61vw, 57rem);
  height: min(37vw, 34rem);
  transform: translate(-50%, -50%) rotate(15deg);
}

.orbit-three {
  width: min(81vw, 78rem);
  height: min(53vw, 48rem);
  transform: translate(-50%, -50%) rotate(-6deg);
}

.central-sun {
  position: absolute;
  z-index: 3;
  top: 54%;
  left: 52%;
  width: clamp(14rem, 27vw, 27rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 240, 165, 0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 36% 31%, rgba(255, 255, 233, 0.98) 0 2%, transparent 15%),
    radial-gradient(circle at 48% 52%, #fff2a0 0 24%, #ffc63c 54%, #f38216 78%, #a92c0a 100%);
  box-shadow:
    0 0 0.65rem rgba(255, 244, 184, 0.95),
    0 0 2.6rem 0.7rem rgba(255, 175, 35, 0.56),
    0 0 7rem 2.1rem rgba(255, 88, 13, 0.27);
  animation: sun-pulse 7s ease-in-out infinite alternate;
}

.central-sun::before {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: -1;
  border-radius: 50%;
  opacity: 0.72;
  background: radial-gradient(circle, rgba(255, 205, 72, 0.42) 0 27%, rgba(255, 105, 22, 0.12) 46%, transparent 69%);
  filter: blur(1.35rem);
  animation: corona 11s ease-in-out infinite alternate;
}

.central-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.58;
  background:
    radial-gradient(circle at 68% 29%, rgba(159, 46, 5, 0.5) 0 2%, transparent 8%),
    radial-gradient(circle at 27% 69%, rgba(217, 84, 7, 0.38) 0 3%, transparent 10%),
    radial-gradient(circle at 62% 76%, rgba(255, 240, 145, 0.42) 0 2%, transparent 9%),
    repeating-radial-gradient(ellipse at 42% 43%, rgba(255, 244, 153, 0.13) 0 3%, rgba(211, 82, 7, 0.1) 4% 6%, transparent 7% 11%);
  mix-blend-mode: multiply;
  animation: solar-surface 24s linear infinite;
}

.solar-core {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, rgba(255, 255, 237, 0.34), transparent 44%);
  filter: blur(0.18rem);
}

.solar-flare {
  position: absolute;
  z-index: -1;
  width: 35%;
  height: 20%;
  border: 0.25rem solid rgba(255, 154, 36, 0.5);
  border-radius: 50%;
  filter: blur(0.16rem);
}

.flare-one {
  top: -7%;
  right: 9%;
  transform: rotate(26deg);
  animation: flare-one 8s ease-in-out infinite alternate;
}

.flare-two {
  right: -13%;
  bottom: 18%;
  transform: rotate(78deg);
  animation: flare-two 10s ease-in-out infinite alternate;
}

.sun-gallery {
  position: absolute;
  z-index: 4;
  top: 54%;
  left: 52%;
  width: clamp(10.5rem, 23vh, 18rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  isolation: isolate;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1.15rem rgba(255, 170, 40, 0.64));
}

.webgl-ready .sun-gallery {
  top: 50%;
  left: 50%;
}

.sun-gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8%;
  border: 1px solid rgba(255, 232, 139, 0.72);
  border-radius: 50%;
  opacity: 0.8;
  background: radial-gradient(circle, transparent 55%, rgba(255, 153, 26, 0.25) 72%, transparent 73%);
  box-shadow: 0 0 1.4rem rgba(255, 117, 12, 0.72), inset 0 0 1.1rem rgba(255, 221, 109, 0.44);
  animation: sun-gallery-halo 3.6s ease-in-out infinite alternate;
}

.sun-photo-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(0.16rem, 0.35vw, 0.28rem) solid rgba(255, 232, 159, 0.92);
  border-radius: 50%;
  background: rgba(255, 117, 9, 0.05);
  box-shadow:
    inset 0 0 1.5rem rgba(72, 18, 4, 0.72),
    inset 0 0 0 0.32rem rgba(255, 151, 28, 0.2),
    0 0 1.1rem rgba(255, 207, 78, 0.5);
}

.sun-photo {
  --photo-scale: 1;
  --photo-x: 0%;
  --photo-y: 0%;
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  object-fit: cover;
  transform: translate(var(--photo-x), var(--photo-y)) scale(var(--photo-scale));
  transform-origin: 50% 50%;
  filter: saturate(0.82) contrast(1.04) brightness(0.8) blur(1.15px);
  transition:
    opacity 1.5s cubic-bezier(0.45, 0, 0.2, 1),
    filter 1.5s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: opacity, filter;
}

.sun-photo.is-active {
  z-index: 2;
  opacity: 0.68;
  filter: saturate(1.03) contrast(1.1) brightness(0.96) blur(0);
}

.sun-photo-one {
  --photo-scale: 1.22;
  --photo-x: 9.8%;
  object-position: center 7%;
}

.sun-photo-two {
  --photo-scale: 1.08;
  --photo-x: 1%;
  --photo-y: 0%;
  object-position: center 21%;
}

.sun-photo-three {
  --photo-scale: 1.08;
  --photo-x: -2%;
  --photo-y: 0%;
  object-position: center top;
}

.sun-photo-four {
  --photo-scale: 1.05;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 11%;
}

.sun-photo-five {
  --photo-scale: 1.04;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 32%;
}

.sun-photo-six {
  --photo-scale: 1.08;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 28%;
}

.sun-photo-seven {
  --photo-scale: 1.14;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 41%;
}

.sun-photo-eight {
  --photo-scale: 1.22;
  --photo-x: -9.8%;
  --photo-y: 0%;
  object-position: center 18%;
}

.sun-photo-nine {
  --photo-scale: 1.22;
  --photo-x: 0%;
  --photo-y: 7.5%;
  object-position: center center;
}

.sun-photo-ten {
  --photo-scale: 1.08;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 23%;
}

.sun-photo-eleven {
  --photo-scale: 1.02;
  --photo-x: 0%;
  --photo-y: -2%;
  object-position: center center;
}

.sun-photo-twelve {
  --photo-scale: 1.02;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: 68% center;
}

.sun-photo-thirteen {
  --photo-scale: 1.06;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 27%;
}

.sun-photo-fourteen {
  --photo-scale: 1.02;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 72%;
}

.sun-photo-fifteen {
  --photo-scale: 1.15;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 43%;
}

.sun-photo-sixteen {
  --photo-scale: 1.08;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 44%;
}

.sun-photo-seventeen {
  --photo-scale: 1.02;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 36%;
}

.sun-photo-eighteen {
  --photo-scale: 1;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: 62% center;
}

.sun-photo-nineteen {
  --photo-scale: 1;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: 57% center;
}

.sun-photo-twenty {
  --photo-scale: 1.15;
  --photo-x: 0%;
  --photo-y: 0%;
  object-fit: contain;
  object-position: center center;
  background: rgba(76, 19, 3, 0.48);
}

.sun-photo-twenty-one {
  --photo-scale: 1.08;
  --photo-x: 0%;
  --photo-y: 0%;
  object-fit: contain;
  object-position: center center;
  background: rgba(76, 19, 3, 0.48);
}

.sun-photo-twenty-two {
  --photo-scale: 1.02;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 50%;
}

.sun-photo-twenty-three {
  --photo-scale: 1.05;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 33%;
}

.sun-photo-twenty-four {
  --photo-scale: 1;
  --photo-x: 0%;
  --photo-y: 0%;
  object-position: center 40%;
}

.sun-photo-twenty-five {
  --photo-scale: 1.08;
  --photo-x: -8%;
  --photo-y: 0%;
  object-position: center 49%;
}

.sun-photo-tint,
.sun-photo-gloss {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
}

.sun-photo-tint {
  background:
    radial-gradient(circle at 42% 35%, transparent 0 48%, rgba(255, 182, 57, 0.12) 68%, rgba(126, 28, 3, 0.5) 100%),
    linear-gradient(145deg, rgba(255, 241, 184, 0.12), transparent 38% 64%, rgba(255, 96, 7, 0.22));
  opacity: 0.72;
  box-shadow: inset 0 0 1.4rem rgba(90, 18, 1, 0.42);
  mix-blend-mode: soft-light;
}

.sun-photo-gloss {
  z-index: 3;
  inset: 3%;
  border: 1px solid rgba(255, 251, 216, 0.32);
  background: radial-gradient(circle at 34% 25%, rgba(255, 255, 244, 0.22), transparent 34%);
  box-shadow: inset -0.5rem -0.6rem 1rem rgba(96, 24, 3, 0.18);
}

/* As fotos recebidas depois do carrossel do Sol vivem em uma camada própria. */
.memory-comet-field {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.memory-comet-field *,
.modal-memory-field * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.cosmic-comet {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--comet-core-size, 0.85rem);
  height: var(--comet-core-size, 0.85rem);
  margin: 0;
  opacity: 0;
  isolation: isolate;
  transform-origin: center;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 0.55rem color-mix(in srgb, var(--comet-accent) 86%, white 14%));
  mix-blend-mode: screen;
}

.memory-photo-shell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: clamp(0.9rem, 2vw, 1.45rem);
  isolation: isolate;
  background: rgba(8, 13, 31, 0.84);
}

.memory-photo-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  opacity: 0.62;
  background-image: var(--memory-image);
  background-position: var(--memory-position, center);
  background-size: cover;
  filter: blur(0.75rem) brightness(0.72) saturate(1.16);
  transform: scale(1.16);
}

.memory-photo-shell::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 27%),
    linear-gradient(135deg, color-mix(in srgb, var(--memory-accent) 18%, transparent), transparent 46% 70%, rgba(2, 5, 17, 0.34));
  box-shadow: inset 0 0 1rem rgba(255, 255, 255, 0.08);
}

.memory-photo-shell img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cosmic-comet-tail {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 34%;
  width: var(--comet-tail-length, 13rem);
  height: calc(var(--comet-core-size, 0.85rem) * 2.65);
  opacity: 0.98;
  clip-path: polygon(0 46%, 100% 1%, 100% 99%, 0 54%);
  background:
    radial-gradient(circle at 96% 50%, rgba(255, 255, 255, 0.98) 0 2.6%, transparent 8%),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--comet-accent) 4%, transparent) 18%, color-mix(in srgb, var(--comet-accent) 56%, transparent) 68%, rgba(238, 251, 255, 0.95) 100%);
  transform: translateY(-50%);
  transform-origin: right center;
  filter: drop-shadow(0 0 0.55rem color-mix(in srgb, var(--comet-accent) 82%, transparent));
}

.cosmic-comet-tail::before,
.cosmic-comet-tail::after {
  content: "";
  position: absolute;
  right: 1%;
  transform-origin: right center;
}

.cosmic-comet-tail::before {
  top: 34%;
  width: 88%;
  height: 8%;
  border-radius: 999px;
  opacity: 0.92;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--comet-accent) 62%, transparent), white);
  transform: rotate(-2.7deg);
}

.cosmic-comet-tail::after {
  bottom: 31%;
  width: 71%;
  height: 5%;
  border-radius: 999px;
  opacity: 0.68;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--comet-accent) 48%, transparent), rgba(255, 255, 255, 0.92));
  transform: rotate(3.8deg);
}

.cosmic-comet-core {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff 0 20%, #e9fbff 29%, color-mix(in srgb, var(--comet-accent) 72%, white 28%) 52%, transparent 76%);
  box-shadow:
    0 0 0.45rem #fff,
    0 0 1.2rem color-mix(in srgb, var(--comet-accent) 88%, white 12%),
    0 0 2.4rem color-mix(in srgb, var(--comet-accent) 56%, transparent);
}

.cosmic-comet-core::before,
.cosmic-comet-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.cosmic-comet-core::before {
  inset: -105%;
  opacity: 0.9;
  background: radial-gradient(circle, color-mix(in srgb, var(--comet-accent) 46%, white 54%), transparent 68%);
  filter: blur(0.28rem);
}

.cosmic-comet-core::after {
  inset: -135%;
  border-radius: 0;
  opacity: 0.82;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.86) 49% 51%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(255, 255, 255, 0.72) 49% 51%, transparent 55%);
}

.cosmic-comet.has-photo .cosmic-comet-tail {
  height: calc(var(--comet-core-size, 5rem) * 0.88);
}

.cosmic-comet.has-photo .cosmic-comet-core {
  background: radial-gradient(circle, color-mix(in srgb, var(--comet-accent) 68%, white 32%), transparent 76%);
}

.cosmic-comet-core .memory-photo-shell {
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--comet-accent) 72%, white 28%);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.2rem color-mix(in srgb, var(--comet-accent) 22%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--comet-accent) 84%, transparent),
    inset -0.8rem -0.65rem 1.1rem rgba(0, 0, 0, 0.28);
}

.cosmic-comet-core .memory-photo-shell::after {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 23%, rgba(255, 255, 255, 0.38), transparent 23%),
    linear-gradient(118deg, transparent 42%, rgba(0, 0, 0, 0.34));
}

.cosmic-comet-guaranteed {
  --comet-accent: #66dcff;
  --comet-core-size: clamp(2.7rem, 6vw, 3.7rem);
  --comet-tail-length: clamp(9rem, 28vw, 17rem);
  opacity: 0;
  animation: guaranteed-comet-flight 11s linear 0.18s infinite;
}

@keyframes guaranteed-comet-flight {
  0% {
    opacity: 0;
    transform: translate3d(-18vw, 8vh, 0) rotate(24deg) scale(0.78);
  }
  5% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    transform: translate3d(58vw, 45vh, 0) rotate(24deg) scale(1.08);
  }
  79% {
    opacity: 0.94;
    transform: translate3d(112vw, 72vh, 0) rotate(24deg) scale(0.96);
  }
  84%,
  100% {
    opacity: 0;
    transform: translate3d(124vw, 79vh, 0) rotate(24deg) scale(0.84);
  }
}

.modal-memory-field {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout paint;
  transition: opacity 0.48s ease;
}

.modal.is-open .modal-memory-field {
  opacity: 1;
}

.modal-memory-photo {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1;
  margin: 0;
  opacity: 0;
  isolation: isolate;
  filter: drop-shadow(0 0 1.15rem var(--modal-glow));
  transform-origin: center;
  will-change: transform, opacity;
}

.modal-memory-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10%;
  border: 1px solid color-mix(in srgb, var(--modal-light) 64%, transparent);
  border-radius: 50%;
  opacity: 0.86;
  background: radial-gradient(circle, color-mix(in srgb, var(--modal-glow) 34%, transparent), transparent 68%);
  box-shadow:
    0 0 1.3rem var(--modal-glow),
    inset 0 0 0.75rem color-mix(in srgb, var(--modal-light) 42%, transparent);
}

.modal-memory-photo .memory-photo-shell {
  z-index: 1;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--modal-light) 76%, white 24%);
  border-radius: 50%;
  opacity: 0.98;
  box-shadow:
    0 0 0 0.16rem color-mix(in srgb, var(--modal-glow) 24%, transparent),
    0 0 1.65rem var(--modal-glow),
    0 1rem 2rem rgba(0, 0, 0, 0.46);
}

.modal-memory-photo .memory-photo-shell::after {
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, 0.38), transparent 20%),
    radial-gradient(circle at 67% 71%, rgba(0, 0, 0, 0.2) 0 8%, transparent 15%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.12), transparent 43% 63%, rgba(0, 0, 0, 0.38));
  box-shadow:
    inset -1.1rem -0.85rem 1.45rem rgba(0, 0, 0, 0.42),
    inset 0.38rem 0.32rem 0.8rem rgba(255, 255, 255, 0.14);
}

.modal-memory-photo.is-static {
  top: max(7%, env(safe-area-inset-top));
  bottom: auto;
  left: 50%;
  width: clamp(5.5rem, 22vw, 8rem);
  opacity: 0.48;
  transform: translateX(-50%) rotate(-3deg);
}

.planet {
  position: absolute;
  z-index: 5;
  display: grid;
  width: clamp(9rem, 13vw, 12rem);
  height: clamp(10.5rem, 15vw, 13.5rem);
  padding: 0;
  border: 0;
  place-items: start center;
  color: white;
  cursor: pointer;
  background: none;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.planet > * {
  pointer-events: none;
}

.planet:hover,
.planet:focus-visible {
  outline: 0;
  filter: brightness(1.12);
  transform: translateY(-0.4rem) scale(1.045);
}

.planet:focus-visible .planet-visual {
  outline: 3px solid white;
  outline-offset: 0.5rem;
}

.planet:active {
  transform: scale(0.97);
}

.planet-visual {
  position: relative;
  display: block;
  width: clamp(6.5rem, 10vw, 9.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
  box-shadow: inset -1.2rem -1.1rem 1.8rem rgba(0, 0, 0, 0.45), inset 0.8rem 0.7rem 1.5rem rgba(255, 255, 255, 0.17), 0 1.2rem 2rem rgba(0, 0, 0, 0.42);
  animation: planet-float 6s ease-in-out infinite alternate;
}

.planet-visual i {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.planet-label {
  position: absolute;
  bottom: 0;
  display: grid;
  min-width: 7.2rem;
  padding: 0.48rem 0.75rem;
  border: 1px solid rgba(183, 223, 255, 0.32);
  border-radius: 0.85rem;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0.1rem 0.4rem #000;
  background: rgba(5, 12, 31, 0.78);
  box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.27);
  backdrop-filter: blur(0.55rem);
}

.planet-time {
  top: 27%;
  left: 12%;
}

.planet-time .planet-visual {
  background:
    repeating-linear-gradient(8deg, rgba(255, 235, 177, 0.5) 0 7%, rgba(132, 72, 83, 0.32) 8% 13%, transparent 14% 20%),
    radial-gradient(circle at 37% 29%, #ffdea0, #d48a5b 53%, #6f3b55 100%);
}

.planet-time .planet-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 39%;
  right: -35%;
  left: -35%;
  height: 25%;
  border: clamp(0.38rem, 0.75vw, 0.7rem) solid rgba(242, 207, 159, 0.8);
  border-right-color: rgba(99, 67, 92, 0.7);
  border-left-color: rgba(255, 232, 184, 0.9);
  border-radius: 50%;
  transform: rotate(-14deg);
  box-shadow: 0 0 0.65rem rgba(255, 211, 140, 0.24);
}

.planet-time .planet-visual i {
  background: linear-gradient(95deg, transparent 45%, rgba(74, 35, 53, 0.2) 48% 54%, transparent 57%);
}

.planet-place {
  top: 23%;
  right: 10%;
}

.planet-place .planet-visual {
  background:
    radial-gradient(ellipse at 68% 32%, rgba(219, 253, 255, 0.8) 0 7%, transparent 9%),
    radial-gradient(ellipse at 32% 66%, rgba(80, 230, 204, 0.72) 0 12%, transparent 14%),
    linear-gradient(145deg, #6be7ff, #188ac4 54%, #153c88);
}

.planet-place .planet-visual i {
  opacity: 0.68;
  background:
    repeating-radial-gradient(ellipse at 80% 20%, transparent 0 9%, rgba(204, 251, 255, 0.3) 10% 13%, transparent 14% 22%);
  animation: planet-texture 17s linear infinite;
}

.planet-secret {
  bottom: 8%;
  left: 18%;
}

.planet-secret .planet-visual {
  background:
    radial-gradient(circle at 31% 30%, rgba(223, 180, 255, 0.66) 0 5%, rgba(74, 36, 107, 0.45) 6% 10%, transparent 11%),
    radial-gradient(circle at 70% 66%, rgba(38, 17, 68, 0.6) 0 9%, transparent 10%),
    radial-gradient(circle at 49% 48%, #b178e4, #633b9b 58%, #26194e);
}

.planet-secret .planet-visual i {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 35% 62%, rgba(23, 10, 48, 0.28));
}

.planet-rsvp {
  right: 14%;
  bottom: 6%;
}

.planet-rsvp .planet-visual {
  background:
    radial-gradient(ellipse at 32% 33%, #8af3a9 0 9%, transparent 11%),
    radial-gradient(ellipse at 67% 58%, #58d897 0 14%, transparent 16%),
    radial-gradient(ellipse at 29% 75%, #ff9b71 0 7%, transparent 9%),
    linear-gradient(145deg, #63e6d2, #1e9b9e 53%, #125067);
}

.planet-rsvp .planet-visual i {
  opacity: 0.55;
  background: repeating-linear-gradient(16deg, transparent 0 13%, rgba(217, 255, 240, 0.28) 14% 16%, transparent 17% 26%);
  animation: planet-texture 21s linear infinite reverse;
}

.modal {
  --planet-start-x: 0px;
  --planet-start-y: 0px;
  --planet-start-scale: 0.14;
  --modal-light: #d9efff;
  --modal-mid: #4f7fb8;
  --modal-deep: #13254b;
  --modal-text: rgba(255, 255, 255, 0.94);
  --modal-muted: rgba(239, 247, 255, 0.74);
  --modal-glow: rgba(92, 173, 255, 0.42);
  --modal-border: rgba(197, 229, 255, 0.62);
  --modal-planet-surface: radial-gradient(circle at 36% 30%, #a6eaff, #477ec5 56%, #152c63 100%);
  --modal-planet-texture: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 38% 64%, rgba(0, 0, 0, 0.22));
  --modal-card-surface: radial-gradient(circle at 82% 5%, rgba(134, 211, 255, 0.25), transparent 35%), linear-gradient(145deg, rgba(24, 55, 99, 0.86), rgba(10, 24, 58, 0.82));
  --modal-action: linear-gradient(135deg, #54bfe9, #3555b5);
  --modal-action-shadow: #263d83;
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  overflow: hidden;
  padding: 1rem;
  place-items: center;
  isolation: isolate;
}

.modal[hidden] {
  display: none;
}

.modal[data-planet="time"] {
  --modal-light: #ffe4a7;
  --modal-mid: #d48a5b;
  --modal-deep: #5a2947;
  --modal-glow: rgba(255, 174, 94, 0.48);
  --modal-border: rgba(255, 218, 151, 0.68);
  --modal-planet-surface: repeating-linear-gradient(8deg, rgba(255, 235, 177, 0.5) 0 7%, rgba(132, 72, 83, 0.32) 8% 13%, transparent 14% 20%), radial-gradient(circle at 37% 29%, #ffdea0, #d48a5b 53%, #6f3b55 100%);
  --modal-planet-texture: linear-gradient(95deg, transparent 45%, rgba(74, 35, 53, 0.2) 48% 54%, transparent 57%);
  --modal-card-surface: radial-gradient(circle at 84% 6%, rgba(255, 222, 160, 0.28), transparent 34%), linear-gradient(145deg, rgba(112, 50, 69, 0.86), rgba(62, 27, 54, 0.82));
  --modal-action: linear-gradient(135deg, #e5a76d, #87485f);
  --modal-action-shadow: #4c293e;
}

.modal[data-planet="place"] {
  --modal-light: #a9f4ff;
  --modal-mid: #188ac4;
  --modal-deep: #153c88;
  --modal-glow: rgba(76, 211, 255, 0.5);
  --modal-border: rgba(139, 237, 255, 0.7);
  --modal-planet-surface: radial-gradient(ellipse at 68% 32%, rgba(219, 253, 255, 0.8) 0 7%, transparent 9%), radial-gradient(ellipse at 32% 66%, rgba(80, 230, 204, 0.72) 0 12%, transparent 14%), linear-gradient(145deg, #6be7ff, #188ac4 54%, #153c88);
  --modal-planet-texture: repeating-radial-gradient(ellipse at 80% 20%, transparent 0 9%, rgba(204, 251, 255, 0.3) 10% 13%, transparent 14% 22%);
  --modal-card-surface: radial-gradient(circle at 84% 6%, rgba(107, 231, 255, 0.28), transparent 34%), linear-gradient(145deg, rgba(20, 92, 143, 0.85), rgba(12, 37, 91, 0.82));
  --modal-action: linear-gradient(135deg, #4bd6ef, #255cb2);
  --modal-action-shadow: #173d83;
}

.modal[data-planet="secret"] {
  --modal-light: #e1bcff;
  --modal-mid: #7e4db3;
  --modal-deep: #26194e;
  --modal-glow: rgba(175, 110, 255, 0.52);
  --modal-border: rgba(206, 162, 255, 0.68);
  --modal-planet-surface: radial-gradient(circle at 31% 30%, rgba(223, 180, 255, 0.66) 0 5%, rgba(74, 36, 107, 0.45) 6% 10%, transparent 11%), radial-gradient(circle at 70% 66%, rgba(38, 17, 68, 0.6) 0 9%, transparent 10%), radial-gradient(circle at 49% 48%, #b178e4, #633b9b 58%, #26194e);
  --modal-planet-texture: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 35% 62%, rgba(23, 10, 48, 0.28));
  --modal-card-surface: radial-gradient(circle at 84% 6%, rgba(177, 120, 228, 0.3), transparent 34%), linear-gradient(145deg, rgba(74, 42, 117, 0.86), rgba(28, 17, 63, 0.82));
  --modal-action: linear-gradient(135deg, #a66add, #51338f);
  --modal-action-shadow: #342064;
}

.modal[data-planet="rsvp"] {
  --modal-light: #b9ffe9;
  --modal-mid: #1e9b9e;
  --modal-deep: #125067;
  --modal-glow: rgba(84, 232, 190, 0.5);
  --modal-border: rgba(150, 255, 221, 0.68);
  --modal-planet-surface: radial-gradient(ellipse at 32% 33%, #8af3a9 0 9%, transparent 11%), radial-gradient(ellipse at 67% 58%, #58d897 0 14%, transparent 16%), radial-gradient(ellipse at 29% 75%, #ff9b71 0 7%, transparent 9%), linear-gradient(145deg, #63e6d2, #1e9b9e 53%, #125067);
  --modal-planet-texture: repeating-linear-gradient(16deg, transparent 0 13%, rgba(217, 255, 240, 0.28) 14% 16%, transparent 17% 26%);
  --modal-card-surface: radial-gradient(circle at 84% 6%, rgba(99, 230, 210, 0.27), transparent 34%), linear-gradient(145deg, rgba(20, 113, 111, 0.86), rgba(10, 58, 77, 0.82));
  --modal-action: linear-gradient(135deg, #58d9b6, #17858f);
  --modal-action-shadow: #10566a;
}

.modal-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at center, var(--modal-glow), transparent 48%), rgba(1, 3, 12, 0.9);
  backdrop-filter: blur(0.8rem) saturate(1.12);
}

.modal.is-transitioning .modal-backdrop {
  animation: modal-space-arrive 0.5s ease-out both;
}

.modal.is-settled .modal-backdrop {
  opacity: 1;
}

.modal-planet-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.modal-planet-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(29rem, 88vmin, 55rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--modal-light) 62%, transparent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 1.5rem var(--modal-glow), inset 0 0 1.5rem color-mix(in srgb, var(--modal-glow) 60%, transparent);
  transform: translate(-50%, -50%) scale(0.55);
}

.modal.is-settled .modal-planet-stage::after {
  opacity: 0.38;
  transform: translate(-50%, -50%) scale(1);
}

.modal-planet-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(27rem, 82vmin, 52rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.32;
  isolation: isolate;
  background: var(--modal-planet-surface);
  background-size: 175% 175%;
  box-shadow:
    inset -5rem -4rem 7rem rgba(0, 0, 0, 0.62),
    inset 3rem 2rem 5rem rgba(255, 255, 255, 0.16),
    0 0 4rem var(--modal-glow),
    0 0 10rem color-mix(in srgb, var(--modal-glow) 70%, transparent);
  transform: translate(calc(-50% + var(--planet-start-x)), calc(-50% + var(--planet-start-y))) scale(var(--planet-start-scale));
  will-change: transform, opacity, filter;
}

.modal.is-transitioning .modal-planet-visual {
  opacity: 0;
}

.modal.is-settled .modal-planet-visual {
  opacity: 0.86;
  filter: brightness(1) saturate(1.06);
  transform: translate(-50%, -50%) scale(1);
  animation: modal-planet-breathe 8s ease-in-out infinite alternate;
}

.modal-planet-visual i {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.76;
  background: var(--modal-planet-texture);
  background-size: 190% 190%;
  animation: modal-planet-texture 34s linear infinite;
}

.modal-planet-visual::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 2%;
  border-radius: inherit;
  background: radial-gradient(circle at 29% 23%, rgba(255, 255, 255, 0.42), transparent 20%), linear-gradient(112deg, rgba(255, 255, 255, 0.12), transparent 38% 63%, rgba(0, 0, 0, 0.28));
  mix-blend-mode: screen;
}

.modal:not([data-planet="time"]) .modal-planet-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3%;
  border: 0.2rem solid color-mix(in srgb, var(--modal-light) 48%, transparent);
  border-radius: inherit;
  box-shadow: 0 0 3rem var(--modal-glow), inset 0 0 2rem var(--modal-glow);
}

.modal[data-planet="time"] .modal-planet-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 40%;
  right: -24%;
  left: -24%;
  height: 24%;
  border: clamp(1rem, 2.4vmin, 1.6rem) solid rgba(242, 207, 159, 0.72);
  border-right-color: rgba(99, 67, 92, 0.68);
  border-left-color: rgba(255, 232, 184, 0.9);
  border-radius: 50%;
  transform: rotate(-14deg);
  box-shadow: 0 0 2.2rem rgba(255, 211, 140, 0.28);
}

.planet-flight {
  position: fixed;
  z-index: 2;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  isolation: isolate;
  background: var(--modal-planet-surface);
  background-size: 175% 175%;
  box-shadow:
    inset -5rem -4rem 7rem rgba(0, 0, 0, 0.62),
    inset 3rem 2rem 5rem rgba(255, 255, 255, 0.17),
    0 0 4rem var(--modal-glow),
    0 0 10rem color-mix(in srgb, var(--modal-glow) 72%, transparent);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.planet-flight i {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.78;
  background: var(--modal-planet-texture);
  background-size: 190% 190%;
  animation: modal-planet-texture 34s linear infinite;
}

.planet-flight::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 2%;
  border-radius: inherit;
  background: radial-gradient(circle at 29% 23%, rgba(255, 255, 255, 0.46), transparent 20%), linear-gradient(112deg, rgba(255, 255, 255, 0.14), transparent 38% 63%, rgba(0, 0, 0, 0.28));
  mix-blend-mode: screen;
}

.planet-flight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6%;
  border: 0.2rem solid color-mix(in srgb, var(--modal-light) 68%, transparent);
  border-radius: inherit;
  box-shadow: 0 0 2.5rem var(--modal-glow), inset 0 0 1.8rem var(--modal-glow);
  animation: modal-flight-focus 0.8s ease-in-out infinite alternate;
}

.modal[data-planet="time"] .planet-flight::before {
  z-index: 3;
  top: 40%;
  right: -24%;
  bottom: auto;
  left: -24%;
  height: 24%;
  border: clamp(1rem, 2.4vmin, 1.6rem) solid rgba(242, 207, 159, 0.76);
  border-right-color: rgba(99, 67, 92, 0.7);
  border-left-color: rgba(255, 232, 184, 0.94);
  border-radius: 50%;
  box-shadow: 0 0 2.4rem rgba(255, 211, 140, 0.34);
  transform: rotate(-14deg);
}

.modal-card {
  position: relative;
  z-index: 3;
  width: min(100%, 29rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 2.5rem 2rem 2rem;
  border: 1px solid var(--modal-border);
  border-radius: 1.8rem;
  opacity: 0;
  color: var(--modal-text);
  text-align: center;
  background: var(--modal-card-surface);
  box-shadow: 0 1.4rem 5rem rgba(0, 0, 0, 0.58), inset 0 0 3rem rgba(255, 255, 255, 0.06), 0 0 2.4rem color-mix(in srgb, var(--modal-glow) 48%, transparent);
  backdrop-filter: blur(1.25rem) saturate(1.18);
  transform: translateY(1.35rem) scale(0.94);
  scrollbar-color: var(--modal-mid) rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.modal.is-open .modal-card {
  pointer-events: auto;
  animation: modal-info-arrive 0.46s cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.modal-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--modal-light), transparent);
  box-shadow: 0 0 1rem var(--modal-glow);
}

.planet-card-time,
.planet-card-place,
.planet-card-secret,
.planet-card-rsvp {
  border-top-color: var(--modal-light);
}

.close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--modal-light) 54%, transparent);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  font: 1.8rem/1 "DM Sans", sans-serif;
  cursor: pointer;
  background: color-mix(in srgb, var(--modal-deep) 78%, transparent);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--modal-glow) 42%, transparent);
  transition: transform 0.2s ease, background 0.2s ease;
}

.close:hover,
.close:focus-visible {
  outline: 2px solid var(--modal-light);
  outline-offset: 0.15rem;
  background: color-mix(in srgb, var(--modal-mid) 74%, transparent);
  transform: rotate(6deg) scale(1.05);
}

.modal-mark {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.7rem;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  font-size: 1.8rem;
  background: var(--modal-planet-surface);
  background-size: 175% 175%;
  box-shadow: inset -0.7rem -0.6rem 1rem rgba(0, 0, 0, 0.34), 0 0.3rem 1.3rem var(--modal-glow);
}

.modal-kicker {
  margin: 0 0 0.25rem;
  color: var(--modal-light);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.modal-card h2 {
  margin: 0;
  color: var(--modal-light);
  font: 600 2rem/1 "Fredoka", sans-serif;
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--modal-glow) 68%, transparent);
}

.date-block {
  display: grid;
  width: 9.5rem;
  margin: 1.35rem auto 0.65rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--modal-light) 35%, transparent);
  border-radius: 1rem;
  color: var(--modal-text);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 1.2rem rgba(255, 255, 255, 0.05), 0 0 1.3rem color-mix(in srgb, var(--modal-glow) 24%, transparent);
  backdrop-filter: blur(0.7rem);
}

.date-block strong {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.date-block span {
  color: var(--modal-light);
  font: 3.2rem/0.86 "Fredoka", sans-serif;
  text-shadow: 0 0 1rem var(--modal-glow);
}

.time {
  margin: 0;
  font-size: 1rem;
}

.time b {
  color: var(--modal-light);
  font: 1.5rem "Fredoka", sans-serif;
}

.modal-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.place-name {
  margin: 1.35rem 0 0.15rem;
  color: var(--modal-light);
  font: 600 1.3rem "Fredoka", sans-serif;
}

.address {
  margin: 0;
  font-size: 0.88rem;
}

.maps-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.95rem;
  border-radius: 0.85rem;
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--modal-light) 34%, transparent);
  background: var(--modal-action);
  box-shadow: 0 0.25rem 0 var(--modal-action-shadow), 0 0.6rem 1.5rem color-mix(in srgb, var(--modal-glow) 32%, transparent);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.maps-button:hover,
.maps-button:focus-visible {
  outline: 2px solid var(--modal-light);
  outline-offset: 0.2rem;
  filter: brightness(1.12);
  transform: translateY(-0.1rem);
}

.rules-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.35;
}

.rules-list li {
  display: flex;
  gap: 0.55rem;
}

.rules-list span {
  color: var(--modal-light);
  text-shadow: 0 0 0.65rem var(--modal-glow);
}

.form-intro {
  margin: 0.75rem 0 1.2rem;
  font-size: 0.82rem;
  line-height: 1.35;
}

.planet-card-rsvp form {
  display: grid;
  gap: 0.5rem;
  text-align: left;
}

.planet-card-rsvp label {
  color: var(--modal-text);
  font-size: 0.74rem;
  font-weight: 700;
}

.planet-card-rsvp input,
.planet-card-rsvp select,
.planet-card-rsvp textarea {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.76rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--modal-light) 40%, transparent);
  border-radius: 0.7rem;
  color: #17364c;
  font: 400 0.88rem "DM Sans", sans-serif;
  outline-color: var(--modal-light);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: inset 0 0.1rem 0.35rem rgba(10, 35, 54, 0.08);
}

.planet-card-rsvp input:focus,
.planet-card-rsvp select:focus,
.planet-card-rsvp textarea:focus {
  border-color: var(--modal-light);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--modal-glow) 55%, transparent);
}

.planet-card-rsvp textarea {
  resize: vertical;
}

.planet-card-rsvp small {
  color: var(--modal-muted);
  font-size: 0.64rem;
  font-weight: 500;
}

.guest-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.submit-rsvp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
  padding: 0.92rem;
  border: 0;
  border-radius: 0.82rem;
  color: white;
  font: 700 0.9rem "DM Sans", sans-serif;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--modal-light) 34%, transparent);
  background: var(--modal-action);
  box-shadow: 0 0.22rem 0 var(--modal-action-shadow), 0 0.6rem 1.5rem color-mix(in srgb, var(--modal-glow) 32%, transparent);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.submit-rsvp:hover,
.submit-rsvp:focus-visible {
  outline: 2px solid var(--modal-light);
  outline-offset: 0.2rem;
  filter: brightness(1.12);
  transform: translateY(-0.1rem);
}

.submit-rsvp:disabled {
  cursor: wait;
  opacity: 0.7;
}

.rsvp-status {
  margin: 0.55rem 0 0;
  padding: 0.62rem;
  border-radius: 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.32;
  text-align: center;
}

.rsvp-status.success {
  color: #087151;
  background: #d7f5e4;
}

.rsvp-status.error {
  color: #a8453d;
  background: #ffe1d8;
}

.rsvp-status.notice {
  color: #73591f;
  background: #fff0bb;
}

.privacy-note {
  margin: 0.15rem 0 0;
  color: var(--modal-muted);
  font-size: 0.64rem;
  line-height: 1.3;
  text-align: center;
}

body.modal-open {
  overflow: hidden;
}

/* Camadas extras de profundidade e movimento do sistema solar */
.central-sun {
  isolation: isolate;
  will-change: filter;
}

.central-sun::after {
  z-index: 1;
  background:
    radial-gradient(circle at 68% 29%, rgba(128, 24, 2, 0.62) 0 1.5%, transparent 7%),
    radial-gradient(circle at 27% 69%, rgba(194, 53, 3, 0.48) 0 2.5%, transparent 9%),
    radial-gradient(circle at 62% 76%, rgba(255, 246, 167, 0.54) 0 1.5%, transparent 8%),
    radial-gradient(circle at 37% 47%, rgba(255, 107, 6, 0.32) 0 6%, transparent 15%),
    repeating-radial-gradient(ellipse at 42% 43%, rgba(255, 248, 172, 0.18) 0 2%, rgba(211, 82, 7, 0.13) 3% 5%, transparent 6% 9%);
  mix-blend-mode: soft-light;
  filter: contrast(1.16) saturate(1.18);
}

.solar-radiation {
  position: absolute;
  z-index: -3;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.radiation-one {
  inset: -78%;
  opacity: 0.34;
  background: repeating-conic-gradient(from 7deg, transparent 0 8deg, rgba(255, 206, 76, 0.32) 9deg 9.8deg, transparent 11deg 18deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 27%, #000 37%, rgba(0, 0, 0, 0.52) 55%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 27%, #000 37%, rgba(0, 0, 0, 0.52) 55%, transparent 72%);
  filter: blur(0.2rem);
  animation: radiation-spin 42s linear infinite, radiation-breathe 7s ease-in-out infinite alternate;
}

.radiation-two {
  inset: -118%;
  opacity: 0.2;
  background: repeating-conic-gradient(from 3deg, transparent 0 17deg, rgba(255, 119, 28, 0.34) 18deg 19deg, transparent 20deg 34deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 19%, #000 29%, rgba(0, 0, 0, 0.55) 49%, transparent 69%);
  mask-image: radial-gradient(circle, transparent 0 19%, #000 29%, rgba(0, 0, 0, 0.55) 49%, transparent 69%);
  filter: blur(0.42rem);
  animation: radiation-spin-reverse 67s linear infinite, radiation-breathe 10s ease-in-out infinite alternate-reverse;
}

.radiation-three {
  inset: -48%;
  opacity: 0.28;
  background: repeating-conic-gradient(from 14deg, transparent 0 4deg, rgba(255, 240, 155, 0.4) 5deg 5.5deg, transparent 6.5deg 13deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 40%, #000 49%, rgba(0, 0, 0, 0.28) 66%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 0 40%, #000 49%, rgba(0, 0, 0, 0.28) 66%, transparent 78%);
  filter: blur(0.1rem);
  animation: radiation-spin 28s linear infinite;
}

.solar-granules {
  position: absolute;
  z-index: 2;
  inset: 2.5%;
  overflow: hidden;
  border-radius: 50%;
  opacity: 0.46;
  background:
    radial-gradient(circle at 22% 31%, rgba(255, 255, 214, 0.62) 0 1.2%, transparent 3.5%),
    radial-gradient(circle at 72% 38%, rgba(139, 26, 1, 0.58) 0 1.4%, transparent 4.2%),
    radial-gradient(circle at 57% 67%, rgba(255, 247, 176, 0.48) 0 1.1%, transparent 3.8%),
    radial-gradient(circle at 38% 78%, rgba(177, 43, 0, 0.46) 0 1.8%, transparent 5%),
    repeating-conic-gradient(from 16deg, rgba(255, 248, 172, 0.12) 0 2deg, rgba(155, 38, 0, 0.12) 3deg 5deg, transparent 6deg 9deg);
  mix-blend-mode: overlay;
  filter: contrast(1.3);
  animation: granules-drift 19s linear infinite;
}

.solar-core {
  z-index: 3;
  inset: 6%;
  background:
    radial-gradient(circle at 38% 31%, rgba(255, 255, 240, 0.48), transparent 35%),
    radial-gradient(circle at 62% 69%, rgba(255, 125, 13, 0.18), transparent 36%);
}

.flare-three {
  bottom: -9%;
  left: 4%;
  transform: rotate(-24deg);
  animation: flare-three 11s ease-in-out infinite alternate;
}

.flare-four {
  top: 15%;
  left: -15%;
  transform: rotate(102deg);
  animation: flare-four 9s ease-in-out infinite alternate-reverse;
}

.orbit {
  animation: orbit-shimmer 6s ease-in-out infinite alternate;
}

.orbit::before {
  content: "";
  position: absolute;
  top: 13%;
  right: 10%;
  width: 0.22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(190, 226, 255, 0.88);
  box-shadow: 0 0 0.55rem rgba(94, 187, 255, 0.9), -3rem 1.1rem 0 -0.03rem rgba(255, 255, 255, 0.48), 4rem 2rem 0 -0.05rem rgba(155, 207, 255, 0.44);
  animation: orbit-particle 8s ease-in-out infinite alternate;
}

.planet {
  will-change: translate, transform;
}

.planet-time {
  animation: orbital-drift-one 14s ease-in-out infinite;
}

.planet-place {
  animation: orbital-drift-two 17s ease-in-out infinite;
}

.planet-secret {
  animation: orbital-drift-three 19s ease-in-out infinite;
}

.planet-rsvp {
  animation: orbital-drift-four 16s ease-in-out infinite;
}

.planet-visual {
  --planet-glow: rgba(137, 199, 255, 0.26);
  background-size: 175% 175%;
  box-shadow:
    inset -1.2rem -1.1rem 1.8rem rgba(0, 0, 0, 0.48),
    inset 0.8rem 0.7rem 1.5rem rgba(255, 255, 255, 0.2),
    0 0 1.5rem var(--planet-glow),
    0 1.2rem 2rem rgba(0, 0, 0, 0.42);
  animation: planet-float 6s ease-in-out infinite alternate, planet-axis 24s linear infinite;
}

.planet-visual::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 3%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 28% 23%, rgba(255, 255, 255, 0.42), transparent 20%), linear-gradient(112deg, rgba(255, 255, 255, 0.12), transparent 38% 63%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: screen;
}

.planet-time .planet-visual {
  --planet-glow: rgba(255, 191, 102, 0.3);
  animation-duration: 6.5s, 34s;
}

.planet-place .planet-visual {
  --planet-glow: rgba(76, 211, 255, 0.34);
  animation-duration: 5.5s, 21s;
}

.planet-secret .planet-visual {
  --planet-glow: rgba(175, 110, 255, 0.34);
  animation-duration: 7s, 29s;
}

.planet-rsvp .planet-visual {
  --planet-glow: rgba(84, 232, 190, 0.32);
  animation-duration: 6s, 25s;
}

.planet-time .planet-visual i {
  background-size: 190% 100%;
  animation: bands-scroll 16s linear infinite;
}

.planet-secret .planet-visual i {
  animation: crater-light 12s ease-in-out infinite alternate;
}

.planet-place .planet-visual i::after,
.planet-rsvp .planet-visual i::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  opacity: 0.5;
  background: repeating-linear-gradient(12deg, transparent 0 11%, rgba(230, 253, 255, 0.36) 12% 14%, transparent 15% 24%);
  animation: cloud-bands 13s linear infinite;
}

.planet-secret::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 27%;
  left: 11%;
  width: 0.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d7c6ec;
  box-shadow: inset -0.16rem -0.13rem 0.2rem rgba(38, 17, 68, 0.45), 0 0 0.55rem rgba(195, 166, 255, 0.46);
  animation: moon-loop 8s ease-in-out infinite;
}

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

@keyframes radiation-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes radiation-breathe {
  to { opacity: 0.5; filter: blur(0.5rem) brightness(1.2); }
}

@keyframes granules-drift {
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes flare-three {
  to { transform: rotate(-14deg) scale(1.28); opacity: 0.42; }
}

@keyframes flare-four {
  to { transform: rotate(113deg) scale(1.18); opacity: 0.36; }
}

@keyframes orbit-shimmer {
  to { border-color: rgba(153, 197, 255, 0.24); box-shadow: inset 0 0 1.5rem rgba(91, 164, 255, 0.06), 0 0 1rem rgba(79, 151, 255, 0.04); }
}

@keyframes orbit-particle {
  to { transform: translate3d(-2.5rem, 1.2rem, 0); filter: brightness(1.6); }
}

@keyframes orbital-drift-one {
  0%, 100% { translate: 0 0; }
  25% { translate: 0.65rem -0.35rem; }
  50% { translate: 0.95rem 0.2rem; }
  75% { translate: 0.25rem 0.55rem; }
}

@keyframes orbital-drift-two {
  0%, 100% { translate: 0 0; }
  25% { translate: -0.55rem 0.35rem; }
  50% { translate: -0.85rem -0.15rem; }
  75% { translate: -0.2rem -0.55rem; }
}

@keyframes orbital-drift-three {
  0%, 100% { translate: 0 0; }
  30% { translate: 0.75rem 0.3rem; }
  60% { translate: 0.2rem -0.6rem; }
}

@keyframes orbital-drift-four {
  0%, 100% { translate: 0 0; }
  30% { translate: -0.7rem -0.25rem; }
  60% { translate: -0.15rem 0.6rem; }
}

@keyframes planet-axis {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 48%; }
  100% { background-position: 0% 50%; }
}

@keyframes bands-scroll {
  to { background-position: 190% 0; }
}

@keyframes crater-light {
  to { filter: brightness(1.18) contrast(1.08); transform: rotate(8deg) scale(1.03); }
}

@keyframes cloud-bands {
  to { transform: translate3d(22%, -4%, 0) rotate(8deg); }
}

@keyframes moon-loop {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.75); opacity: 0.5; }
  50% { transform: translate3d(6.1rem, 1.8rem, 0) scale(1); opacity: 1; }
}

@keyframes stars-drift {
  to { transform: translate3d(4%, 7%, 0); }
}

@keyframes stars-twinkle {
  to { opacity: 0.5; filter: brightness(1.35); }
}

@keyframes nebula-breathe {
  to { transform: translate3d(3%, -2%, 0) scale(1.08); opacity: 0.9; }
}

@keyframes sun-pulse {
  to {
    filter: brightness(1.07);
    box-shadow:
      0 0 0.8rem rgba(255, 244, 184, 1),
      0 0 3.2rem 0.95rem rgba(255, 175, 35, 0.62),
      0 0 8rem 2.5rem rgba(255, 88, 13, 0.32);
  }
}

@keyframes corona {
  to { transform: scale(1.09) rotate(4deg); opacity: 0.9; }
}

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

@keyframes flare-one {
  to { transform: rotate(34deg) scale(1.22); opacity: 0.45; }
}

@keyframes flare-two {
  to { transform: rotate(70deg) scale(1.18); opacity: 0.4; }
}

@keyframes planet-float {
  to { transform: translateY(-0.48rem) rotate(1.5deg); }
}

@keyframes planet-texture {
  to { transform: rotate(360deg) scale(1.06); }
}

@keyframes modal-space-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-planet-approach {
  0% {
    opacity: 0.96;
    filter: brightness(1.42) saturate(1.22) blur(0.08rem);
    transform: translate(calc(-50% + var(--planet-start-x)), calc(-50% + var(--planet-start-y))) scale(var(--planet-start-scale));
  }
  58% {
    opacity: 0.98;
    filter: brightness(1.16) saturate(1.16) blur(0);
    transform: translate(-50%, -50%) scale(0.78);
  }
  82% {
    opacity: 0.94;
    filter: brightness(1.08) saturate(1.12) blur(0);
    transform: translate(-50%, -50%) scale(1.06);
  }
  100% {
    opacity: 0.86;
    filter: brightness(1) saturate(1.06) blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes modal-focus-lock {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  58% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes modal-flight-focus {
  from { opacity: 0.48; filter: brightness(0.92); }
  to { opacity: 1; filter: brightness(1.2); }
}

@keyframes modal-planet-breathe {
  from { opacity: 0.86; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0.94; transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes modal-planet-texture {
  to { background-position: 190% 50%; transform: rotate(360deg) scale(1.025); }
}

@keyframes modal-info-arrive {
  0%, 24% {
    opacity: 0;
    transform: translateY(1.35rem) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(0.8rem) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sun-gallery-halo {
  to {
    opacity: 1;
    filter: brightness(1.14);
    box-shadow: 0 0 2rem rgba(255, 117, 12, 0.82), inset 0 0 1.5rem rgba(255, 230, 137, 0.55);
  }
}

@media (max-width: 700px) {
  .cosmic-comet-tail {
    opacity: 1;
  }

  .modal-memory-photo .memory-photo-shell {
    border-radius: 50%;
    opacity: 0.98;
  }

  .space-copy {
    top: 1rem;
    left: 50%;
    width: 92vw;
    text-align: center;
    transform: translateX(-50%);
  }

  .eyebrow {
    margin-bottom: 0.38rem;
    font-size: 0.58rem;
  }

  .space-copy h1 {
    font-size: clamp(2.15rem, 10.2vw, 3.2rem);
  }

  .space-copy > p:last-child {
    margin-top: 0.55rem;
    font-size: 0.69rem;
  }

  .surprise-signal {
    top: 20%;
    bottom: auto;
    left: 50%;
    padding: 0.48rem 0.7rem;
    font-size: 0.65rem;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .central-sun {
    top: 53%;
    left: 50%;
    width: clamp(9rem, 44vw, 11.5rem);
  }

  .sun-gallery {
    top: 53%;
    left: 50%;
    width: clamp(6.8rem, 35vw, 8.4rem);
  }

  .webgl-ready .sun-gallery {
    top: 50%;
  }

  .orbit {
    top: 53%;
    left: 50%;
  }

  .orbit-one {
    width: 68vw;
    height: 39vw;
  }

  .orbit-two {
    width: 91vw;
    height: 67vw;
  }

  .orbit-three {
    width: 118vw;
    height: 94vw;
  }

  .planet {
    width: 7.5rem;
    height: 8.8rem;
  }

  .planet-visual {
    width: 5rem;
  }

  .planet-label {
    min-width: 6.6rem;
    padding: 0.42rem 0.55rem;
    font-size: 0.875rem;
  }

  .planet-time {
    top: 28%;
    left: 1%;
  }

  .planet-place {
    top: 30%;
    right: 0;
  }

  .planet-secret {
    bottom: 7%;
    left: 2%;
  }

  .planet-rsvp {
    right: 1%;
    bottom: 9%;
  }

  .space-instruction {
    right: auto;
    bottom: 0.75rem;
    left: 50%;
    width: max-content;
    font-size: 0.63rem;
    transform: translateX(-50%);
  }

  .modal {
    padding:
      max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    place-items: center;
  }

  .modal-planet-visual {
    width: min(126vw, 34rem);
  }

  .modal-card {
    width: 100%;
    max-height: min(68dvh, calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    padding: 2.3rem 1.35rem 1.55rem;
    border-radius: 1.45rem;
  }
}

@media (max-height: 680px) and (max-width: 700px) {
  .modal {
    place-items: center;
  }

  .modal-card {
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .space-copy h1 {
    font-size: 2rem;
  }

  .space-copy > p:last-child {
    display: none;
  }

  .surprise-signal {
    top: 17%;
  }

  .central-sun {
    width: 8.5rem;
  }

  .sun-gallery {
    width: 6.35rem;
  }

  .planet {
    width: 6.8rem;
    height: 7.8rem;
  }

  .planet-visual {
    width: 4.35rem;
  }

  .planet-time,
  .planet-place {
    top: 24%;
  }

  .planet-secret,
  .planet-rsvp {
    bottom: 7%;
  }

  .planet-label {
    min-width: 6rem;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sun-photo {
    animation: none !important;
    transition:
      opacity 1.5s cubic-bezier(0.45, 0, 0.2, 1),
      filter 1.5s cubic-bezier(0.45, 0, 0.2, 1) !important;
  }

  .memory-comet-field {
    display: block;
  }

  .modal-memory-photo:not(.is-static) {
    display: block;
  }

  .modal-memory-photo.is-static {
    opacity: 0.3 !important;
  }

  .cosmic-comet-guaranteed {
    animation-duration: 11s !important;
    animation-delay: 0.18s !important;
    animation-iteration-count: infinite !important;
  }

  .modal.is-transitioning .modal-backdrop,
  .modal.is-settled .modal-planet-visual,
  .modal.is-settled .modal-planet-stage::after,
  .modal.is-open .modal-card {
    animation: none !important;
  }

  .modal.is-transitioning .modal-backdrop,
  .modal.is-settled .modal-backdrop {
    opacity: 1;
  }

  .modal.is-settled .modal-planet-visual {
    opacity: 0.86;
    filter: none;
    transform: translate(-50%, -50%) scale(1);
  }

  .modal.is-settled .modal-planet-stage::after {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1);
  }

  .modal.is-open .modal-card {
    opacity: 1;
    transform: none;
  }
}