:root {
  color-scheme: dark;

  --violet-black: #090411;
  --violet-deep: #11071f;
  --violet: #6f3bc2;
  --violet-bright: #a374ff;

  --lavender: #ddc6ff;
  --pink: #f0aeff;
  --blue: #87b7ff;
  --gold: #ffe0a1;

  --ink: #f7efff;
  --muted: #bcaacf;

  --scroll: 0;
}

* {
  box-sizing: border-box;
}

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

html {
  background: var(--violet-black);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% 10%,
      #321256,
      transparent 31%
    ),
    linear-gradient(
      to bottom,
      #170928,
      #0b0513 65%,
      #050208
    );

  color: var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 19px;
  line-height: 1.6;
}

button,
input {
  font: inherit;
}


/* SKY */

#sky {
  position: fixed;
  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.nebula {
  position: fixed;

  z-index: 1;

  border-radius: 50%;

  filter: blur(85px);

  pointer-events: none;
}

.nebula-one {
  width: 55vw;
  height: 42vw;

  left: -15vw;
  top: 15vh;

  background:
    rgba(124, 60, 232, 0.17);
}

.nebula-two {
  width: 48vw;
  height: 44vw;

  right: -12vw;
  top: 55vh;

  background:
    rgba(224, 112, 255, 0.10);
}

.nebula-three {
  width: 40vw;
  height: 35vw;

  left: 28vw;
  top: 180vh;

  background:
    rgba(76, 110, 255, 0.10);
}


/* MOON SECRET */

.moon {
  position: fixed;

  z-index: 20;

  right:
    max(
      23px,
      env(safe-area-inset-right)
    );

  top:
    max(
      21px,
      env(safe-area-inset-top)
    );

  appearance: none;

  border: 0;
  padding: 4px;

  background: transparent;
  color: #e6cfff;

  font-size: 31px;

  opacity: 0.58;

  cursor: pointer;

  text-shadow:
    0 0 12px
    rgba(218, 186, 255, 0.45);

  transition:
    opacity 300ms ease,
    transform 700ms ease;
}

.moon:hover {
  opacity: 1;
}


/* MAIN */

main {
  position: relative;
  z-index: 3;
}


/* THRESHOLD */

.threshold {
  position: relative;

  min-height: 138vh;
  min-height: 138dvh;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding:
    max(70px, env(safe-area-inset-top))
    20px
    90px;

  text-align: center;
}


.title-wrap {
  position: relative;

  margin-top: 4vh;
}

.tiny-star {
  display: block;

  margin-bottom: 6px;

  color: var(--gold);

  font-size: 18px;

  text-shadow:
    0 0 13px
    rgba(255, 224, 161, 0.7);
}

h1 {
  margin: 0;

  font-size:
    clamp(
      90px,
      18vw,
      205px
    );

  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.085em;

  text-shadow:
    0 0 18px
    rgba(230, 194, 255, 0.22),
    0 0 65px
    rgba(139, 75, 255, 0.20);
}

.title-wrap p {
  margin:
    32px
    auto
    0;

  color: #cdb9df;

  font-style: italic;

  font-size:
    clamp(
      18px,
      2vw,
      24px
    );
}


/* RITUAL */

.ritual {
  position: relative;

  width:
    min(
      780px,
      95vw
    );

  min-height: 760px;

  margin-top: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.halo {
  position: absolute;

  left: 50%;
  top: 45%;

  border:
    1px solid
    rgba(218, 190, 255, 0.18);

  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}

.halo-one {
  width: 440px;
  height: 440px;

  animation:
    rotate-one
    34s linear infinite;
}

.halo-two {
  width: 590px;
  height: 270px;

  transform:
    translate(-50%, -50%)
    rotate(25deg);

  animation:
    rotate-two
    42s linear infinite;
}

.halo-three {
  width: 590px;
  height: 270px;

  transform:
    translate(-50%, -50%)
    rotate(-25deg);

  animation:
    rotate-three
    50s linear infinite reverse;
}

@keyframes rotate-one {
  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes rotate-two {
  to {
    transform:
      translate(-50%, -50%)
      rotate(385deg);
  }
}

@keyframes rotate-three {
  to {
    transform:
      translate(-50%, -50%)
      rotate(335deg);
  }
}


/* SIGILS */

.sigil {
  position: absolute;

  color:
    rgba(233, 211, 255, 0.65);

  text-shadow:
    0 0 12px
    rgba(195, 146, 255, 0.5);

  animation:
    breathe
    4s ease-in-out infinite;
}

.sigil-one {
  left: 13%;
  top: 28%;

  font-size: 22px;
}

.sigil-two {
  right: 11%;
  top: 39%;

  font-size: 30px;

  animation-delay: -1.7s;
}

.sigil-three {
  right: 24%;
  bottom: 22%;

  font-size: 18px;

  animation-delay: -2.4s;
}

.sigil-four {
  left: 20%;
  bottom: 27%;

  font-size: 31px;

  animation-delay: -0.8s;
}

@keyframes breathe {
  50% {
    opacity: 0.35;

    transform:
      translateY(-5px);
  }
}


/* ORB */

.oracle-orb {
  position: relative;

  z-index: 5;

  width: 280px;
  aspect-ratio: 1;

  appearance: none;

  border:
    1px solid
    rgba(235, 211, 255, 0.27);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 27%,
      rgba(255,255,255,0.94),
      transparent 5%
    ),
    radial-gradient(
      circle at 45% 42%,
      #d8b5ff,
      #8554dd 33%,
      #3c196d 64%,
      #160826
    );

  cursor: pointer;

  box-shadow:
    inset 0 0 45px
    rgba(255,255,255,0.15),

    inset -25px -25px 50px
    rgba(17, 6, 31, 0.55),

    0 0 22px
    rgba(184, 121, 255, 0.6),

    0 0 70px
    rgba(144, 75, 255, 0.43),

    0 0 180px
    rgba(121, 54, 216, 0.23);

  animation:
    orb-breathe
    4.8s ease-in-out infinite;
}

@keyframes orb-breathe {
  50% {
    transform:
      scale(1.025);

    box-shadow:
      inset 0 0 45px
      rgba(255,255,255,0.18),

      inset -25px -25px 50px
      rgba(17,6,31,0.55),

      0 0 31px
      rgba(206,150,255,0.72),

      0 0 90px
      rgba(156,92,255,0.53),

      0 0 210px
      rgba(121,54,216,0.28);
  }
}

.orb-light {
  position: absolute;

  inset: 12%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 44% 36%,
      rgba(255,255,255,0.22),
      transparent 20%
    );

  filter: blur(8px);
}

.orb-cloud {
  position: absolute;

  left: 18%;
  right: 12%;
  top: 42%;

  height: 23%;

  border-radius: 50%;

  background:
    rgba(236, 205, 255, 0.19);

  filter: blur(17px);

  transform:
    rotate(-13deg);
}

.orb-star {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  color: #fff2d0;

  font-size: 33px;

  text-shadow:
    0 0 11px white,
    0 0 28px
    rgba(255, 223, 164, 0.7);
}


/* QUESTION */

.question-form {
  position: relative;
  z-index: 7;

  width:
    min(
      470px,
      88vw
    );

  margin-top: 58px;
}

.question-form label {
  display: block;

  margin-bottom: 12px;

  color: #a992c0;

  font-size: 13px;
  font-style: italic;
}

.question-form input {
  width: 100%;

  border: 0;
  border-bottom:
    1px solid
    rgba(226, 198, 255, 0.36);

  padding:
    12px
    4px;

  outline: 0;

  background: transparent;
  color: var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      20px,
      3vw,
      27px
    );

  text-align: center;
}

.question-form input::placeholder {
  color:
    rgba(206, 183, 226, 0.38);
}

.question-form button {
  appearance: none;

  margin-top: 23px;

  border: 0;
  padding: 5px 3px;

  background: transparent;
  color: #ceb3eb;

  font-size: 14px;

  cursor: pointer;

  border-bottom:
    1px solid
    rgba(206, 179, 235, 0.42);
}


.answer {
  position: relative;
  z-index: 8;

  max-width: 570px;

  min-height: 88px;

  margin-top: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #e8d8f8;

  font-size:
    clamp(
      21px,
      3vw,
      31px
    );

  font-style: italic;
  line-height: 1.4;

  text-shadow:
    0 0 20px
    rgba(202, 160, 255, 0.24);

  transition:
    opacity 400ms ease,
    transform 400ms ease;
}

.answer.changing {
  opacity: 0;

  transform:
    translateY(8px);
}


.down {
  margin-top: auto;

  color:
    rgba(211, 185, 237, 0.46);

  font-size: 25px;

  animation:
    downward
    2s ease-in-out infinite;
}

@keyframes downward {
  50% {
    transform:
      translateY(8px);
  }
}


/* BETWEEN */

.between {
  position: relative;

  min-height: 165vh;
  min-height: 165dvh;

  padding:
    120px
    8vw;
}

.floating-line {
  position: absolute;

  max-width: 430px;

  margin: 0;

  color: #cbb9dc;

  font-size:
    clamp(
      24px,
      4vw,
      43px
    );

  line-height: 1.25;

  text-shadow:
    0 0 25px
    rgba(131, 75, 201, 0.26);
}

.line-one {
  left: 12%;
  top: 13%;
}

.line-two {
  right: 9%;
  top: 42%;

  text-align: right;
}

.line-three {
  left: 17%;
  bottom: 15%;
}


.wandering-symbol {
  position: absolute;

  left: 68%;
  top: 22%;

  appearance: none;

  border: 0;
  padding: 10px;

  background: transparent;

  color: #fff4cf;

  font-size: 33px;

  cursor: pointer;

  text-shadow:
    0 0 9px white,
    0 0 27px
    rgba(224, 180, 255, 0.85);

  animation:
    wander
    14s ease-in-out infinite alternate;
}

@keyframes wander {
  0% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  35% {
    transform:
      translate(-50px, 60px)
      rotate(25deg);
  }

  68% {
    transform:
      translate(32px, 130px)
      rotate(-18deg);
  }

  100% {
    transform:
      translate(-18px, 210px)
      rotate(42deg);
  }
}


/* THREE LIGHTS */

.three-lights {
  min-height: 115vh;
  min-height: 115dvh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    80px
    20px;

  text-align: center;
}

.invitation {
  margin:
    0
    0
    65px;

  color: #bba4ce;

  font-size:
    clamp(
      24px,
      4vw,
      39px
    );

  font-style: italic;
}


.lights {
  display: flex;
  align-items: center;
  justify-content: center;

  gap:
    clamp(
      35px,
      9vw,
      120px
    );
}


.light {
  position: relative;

  width:
    clamp(
      110px,
      16vw,
      190px
    );

  aspect-ratio: 1;

  appearance: none;

  border:
    1px solid
    rgba(223, 195, 255, 0.16);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(127, 75, 207, 0.24),
      rgba(36, 15, 61, 0.5) 48%,
      transparent 70%
    );

  color: #e9d7ff;

  cursor: pointer;

  box-shadow:
    0 0 40px
    rgba(118, 60, 200, 0.14);

  transition:
    transform 500ms ease,
    box-shadow 500ms ease;
}

.light span {
  font-size:
    clamp(
      38px,
      6vw,
      65px
    );
}

.light:hover {
  transform:
    translateY(-8px)
    scale(1.04);

  box-shadow:
    0 0 65px
    rgba(177, 111, 255, 0.31);
}

.light.active {
  box-shadow:
    0 0 25px
    rgba(218, 175, 255, 0.54),

    0 0 90px
    rgba(154, 77, 255, 0.39);
}


.light-reading {
  max-width: 650px;

  min-height: 100px;

  margin:
    58px
    0
    0;

  color: #eadcff;

  font-size:
    clamp(
      22px,
      3.2vw,
      35px
    );

  font-style: italic;
}


/* FRAGMENTS */

.fragments {
  min-height: 220vh;
  min-height: 220dvh;

  position: relative;

  padding:
    120px
    8vw;
}


.fragment {
  position: absolute;

  width:
    min(
      430px,
      75vw
    );
}

.fragment span {
  display: block;

  margin-bottom: 17px;

  color: var(--gold);

  font-size: 25px;

  text-shadow:
    0 0 17px
    rgba(255, 224, 161, 0.68);
}

.fragment p {
  margin: 0;

  color: #cbb7dd;

  font-size:
    clamp(
      22px,
      3.3vw,
      35px
    );

  line-height: 1.35;
}


.fragment-left {
  left: 10%;
  top: 10%;
}

.fragment-right {
  right: 9%;
  top: 33%;

  text-align: right;
}

.fragment-center {
  left: 50%;
  top: 57%;

  transform:
    translateX(-50%);

  text-align: center;
}

.fragment-left.lower {
  top: 80%;
  left: 17%;
}


/* DEEP ORACLE */

.deep-oracle {
  min-height: 120vh;
  min-height: 120dvh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    100px
    20px;

  text-align: center;
}


.deep-ring {
  width: 170px;
  aspect-ratio: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(222, 193, 255, 0.26);

  border-radius: 50%;

  box-shadow:
    0 0 45px
    rgba(122, 70, 209, 0.22),

    inset 0 0 30px
    rgba(166, 110, 255, 0.08);
}

.deep-symbol {
  color: #fff1c7;

  font-size: 39px;

  text-shadow:
    0 0 13px white,
    0 0 35px
    rgba(255, 210, 148, 0.65);
}

.deep-question {
  max-width: 700px;

  margin:
    65px
    0
    40px;

  color: #ddc9ec;

  font-size:
    clamp(
      30px,
      5vw,
      57px
    );

  line-height: 1.15;
}


.last-omen {
  appearance: none;

  border: 0;
  border-bottom:
    1px solid
    rgba(213, 186, 239, 0.44);

  padding:
    5px
    3px;

  background: transparent;
  color: #cdb4e3;

  cursor: pointer;
}

.last-omen-text {
  max-width: 590px;

  min-height: 80px;

  margin-top: 35px;

  color: #e7d8f4;

  font-size: 23px;
  font-style: italic;
}


/* OFFERING */

.offering {
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    100px
    20px
    max(
      80px,
      env(safe-area-inset-bottom)
    );

  text-align: center;
}


.offering-intro {
  margin:
    0
    0
    55px;

  color: #a994bb;

  font-style: italic;
}


.offering-star {
  position: relative;

  width: 190px;
  aspect-ratio: 1;

  appearance: none;

  border: 0;
  padding: 0;

  background: transparent;

  cursor: pointer;
}


.offering-glow {
  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(225, 185, 255, 0.35),
      rgba(139, 72, 233, 0.13) 45%,
      transparent 70%
    );

  filter: blur(5px);

  animation:
    offering-pulse
    3.8s ease-in-out infinite;
}

@keyframes offering-pulse {
  50% {
    transform:
      scale(1.18);

    opacity: 0.66;
  }
}


.offering-glyph {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  color: #fff0bd;

  font-size: 48px;

  text-shadow:
    0 0 10px white,
    0 0 30px
    rgba(236, 194, 255, 0.9),
    0 0 75px
    rgba(153, 79, 255, 0.55);
}


.offering-label {
  margin-top: 25px;

  color: #bea8cd;

  font-size: 14px;
}


/* WHISPER */

.whisper {
  position: fixed;

  z-index: 50;

  left: 50%;
  bottom:
    max(
      28px,
      env(safe-area-inset-bottom)
    );

  max-width:
    calc(100% - 40px);

  transform:
    translateX(-50%)
    translateY(8px);

  opacity: 0;

  padding:
    8px
    12px;

  color: #e9d6fa;

  font-size: 13px;
  font-style: italic;

  text-align: center;

  text-shadow:
    0 0 16px
    rgba(173, 113, 255, 0.75);

  pointer-events: none;

  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

.whisper.visible {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}


/* PHONE */

@media (max-width: 700px) {
  body {
    font-size: 17px;
  }

  .threshold {
    min-height: 145dvh;
  }

  .ritual {
    min-height: 680px;

    margin-top: 45px;
  }

  .oracle-orb {
    width: 215px;
  }

  .halo-one {
    width: 320px;
    height: 320px;
  }

  .halo-two,
  .halo-three {
    width: 360px;
    height: 190px;
  }

  .sigil-one {
    left: 7%;
  }

  .sigil-two {
    right: 5%;
  }

  .lights {
    gap: 15px;
  }

  .light {
    width:
      clamp(
        90px,
        28vw,
        125px
      );
  }

  .between {
    min-height: 170dvh;

    padding-left: 22px;
    padding-right: 22px;
  }

  .line-one {
    left: 25px;
  }

  .line-two {
    right: 25px;
  }

  .line-three {
    left: 25px;
  }

  .fragments {
    min-height: 210dvh;

    padding-left: 22px;
    padding-right: 22px;
  }

  .fragment-left,
  .fragment-left.lower {
    left: 24px;
  }

  .fragment-right {
    right: 24px;
  }

  .fragment-center {
    width:
      calc(100% - 48px);
  }
}