/* ==================================================
   IBBORA
   ART · EARTH · RITUAL

   THE PORTAL
   ================================================== */


* {
  box-sizing: border-box;
}

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

body {
  background:
    radial-gradient(circle at 50% 45%,
      #151020 0%,
      #07070c 35%,
      #000000 75%);
  color: #eee5d0;

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

  overflow-x: hidden;
}


/* ------------------------------
   STAR FIELD
   ------------------------------ */

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stars-one {
  background-image:
    radial-gradient(#ffffff 1px, transparent 1px);

  background-size: 70px 70px;
  opacity: .25;

  animation: driftStars 80s linear infinite;
}

.stars-two {
  background-image:
    radial-gradient(#bba4ff 1px, transparent 1px);

  background-size: 113px 113px;
  background-position: 35px 60px;

  opacity: .22;

  animation: driftStars 120s linear infinite reverse;
}

@keyframes driftStars {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-300px);
  }
}


/* ------------------------------
   BRAND
   ------------------------------ */

.portal-header {
  position: relative;
  z-index: 5;

  text-align: center;

  padding-top: 34px;

  letter-spacing: .18em;
}

.ibbora-mark {
  font-size: clamp(25px, 3vw, 38px);

  letter-spacing: .32em;

  margin-left: .32em;
}

.ibbora-subtitle {
  margin-top: 7px;

  font-size: 10px;

  letter-spacing: .42em;

  opacity: .55;
}


/* ------------------------------
   WORLD
   ------------------------------ */

.portal-world {
  position: relative;
  z-index: 2;

  min-height: calc(100vh - 150px);

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

  padding: 60px 20px 100px;

  text-align: center;
}


/* ------------------------------
   PORTAL
   ------------------------------ */

.portal-link {
  text-decoration: none;
  color: inherit;

  display: block;

  border-radius: 50%;
}

.portal {
  width: min(62vw, 520px);
  aspect-ratio: 1;

  position: relative;

  border-radius: 50%;

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

  background:
    radial-gradient(
      circle at 48% 46%,
      #05030b 0%,
      #110a24 27%,
      #25104a 43%,
      #174b52 57%,
      #72518e 68%,
      #c08c62 77%,
      #101019 81%,
      #000 100%
    );

  box-shadow:
    0 0 25px rgba(132, 96, 210, .5),
    0 0 70px rgba(50, 181, 178, .25),
    0 0 140px rgba(128, 75, 180, .22);

  transition:
    transform .7s ease,
    box-shadow .7s ease;

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


/* swirling texture */

.portal::before,
.portal::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.portal::before {
  inset: 5%;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(110, 54, 170, .7),
      transparent,
      rgba(38, 175, 164, .55),
      transparent,
      rgba(216, 134, 88, .4),
      transparent,
      rgba(98, 51, 160, .7),
      transparent
    );

  filter: blur(14px);

  animation: spin 17s linear infinite;
}

.portal::after {
  inset: 14%;

  background:
    conic-gradient(
      from 180deg,
      transparent,
      rgba(208, 167, 240, .4),
      transparent,
      rgba(42, 153, 170, .55),
      transparent,
      rgba(255, 191, 120, .3),
      transparent
    );

  filter: blur(22px);

  animation: spinReverse 11s linear infinite;
}


/* rings */

.portal-ring {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.ring-one {
  inset: 3%;

  border:
    1px solid
    rgba(224, 200, 255, .4);

  animation: spin 23s linear infinite;
}

.ring-two {
  inset: 9%;

  border:
    1px dashed
    rgba(121, 213, 190, .35);

  animation: spinReverse 19s linear infinite;
}

.ring-three {
  inset: 18%;

  border:
    1px solid
    rgba(224, 167, 106, .22);

  animation: spin 12s linear infinite;
}


/* centre */

.portal-centre {
  position: relative;
  z-index: 10;

  width: 52%;
  aspect-ratio: 1;

  border-radius: 50%;

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

  background:
    radial-gradient(
      circle,
      rgba(0, 0, 0, .92),
      rgba(4, 3, 12, .76) 60%,
      transparent 72%
    );

  text-shadow:
    0 0 12px #c3a6ff,
    0 0 35px rgba(91, 192, 182, .7);
}

.portal-small {
  font-size: clamp(9px, 1vw, 12px);

  letter-spacing: .34em;

  opacity: .65;
}

.portal-name {
  font-size: clamp(28px, 5vw, 55px);

  letter-spacing: .16em;

  margin-left: .16em;

  padding: 8px 0;
}


/* portal movement */

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

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

@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}


/* hover */

.portal:hover {
  transform: scale(1.06);

  box-shadow:
    0 0 40px rgba(177, 130, 255, .75),
    0 0 100px rgba(67, 210, 192, .4),
    0 0 190px rgba(153, 84, 208, .3);
}


/* ------------------------------
   TEXT
   ------------------------------ */

.invitation {
  margin: 34px 0 0;

  font-size: 14px;

  font-style: italic;

  letter-spacing: .12em;

  opacity: .68;
}

.secret-hint {
  margin-top: 14px;

  font-size: 9px;

  letter-spacing: .22em;

  text-transform: uppercase;

  opacity: .32;
}


/* ------------------------------
   COSMIC COMPANIONS
   ------------------------------ */

.companion {
  position: fixed;
  z-index: 8;

  border: 0;
  background: transparent;

  color: white;

  cursor: pointer;

  font-size: clamp(25px, 3vw, 40px);

  filter:
    drop-shadow(0 0 8px rgba(170, 130, 255, .8));

  transition:
    transform .4s ease,
    filter .4s ease;

  animation:
    float 5s ease-in-out infinite;
}

.companion:hover {
  transform: scale(1.3) rotate(7deg);

  filter:
    drop-shadow(0 0 15px rgba(110, 235, 213, 1));
}

.mushroom {
  left: 9%;
  top: 28%;

  animation-delay: 0s;
}

.butterfly {
  right: 11%;
  top: 23%;

  animation-delay: -1.5s;
}

.cat {
  left: 14%;
  bottom: 17%;

  animation-delay: -3s;
}

.galaxy {
  right: 15%;
  bottom: 20%;

  animation-delay: -4s;
}

@keyframes float {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -15px;
  }
}


/* ------------------------------
   ORACLE MESSAGE
   ------------------------------ */

.oracle {
  position: fixed;

  z-index: 20;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -45%)
    scale(.9);

  width: min(86vw, 430px);

  padding: 40px 42px;

  background:
    rgba(7, 6, 12, .96);

  border:
    1px solid
    rgba(196, 168, 230, .4);

  box-shadow:
    0 0 60px
    rgba(90, 60, 150, .35);

  text-align: center;

  opacity: 0;
  visibility: hidden;

  transition: all .35s ease;
}

.oracle.visible {
  opacity: 1;
  visibility: visible;

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

.oracle-star {
  font-size: 18px;

  margin-bottom: 18px;

  color: #cab4ff;
}

#oracle-message {
  margin: 0;

  font-size: 18px;

  line-height: 1.65;

  font-style: italic;

  color: #eee5d0;
}

.oracle-close {
  position: absolute;

  right: 12px;
  top: 7px;

  border: 0;
  background: none;

  color: #eee5d0;

  font-size: 25px;

  cursor: pointer;

  opacity: .55;
}


/* ------------------------------
   FOOTER
   ------------------------------ */

.portal-footer {
  position: relative;
  z-index: 5;

  padding: 20px 30px 28px;

  display: flex;
  justify-content: center;
  gap: 25px;

  font-size: 8px;

  letter-spacing: .24em;

  opacity: .32;
}

.footer-symbol {
  color: #baa1e4;
}


/* ------------------------------
   MOBILE
   ------------------------------ */

@media (max-width: 600px) {

  .portal {
    width: 82vw;
  }

  .portal-world {
    padding-top: 40px;
  }

  .mushroom {
    left: 5%;
    top: 25%;
  }

  .butterfly {
    right: 5%;
    top: 22%;
  }

  .cat {
    left: 7%;
    bottom: 13%;
  }

  .galaxy {
    right: 7%;
    bottom: 15%;
  }

  .companion {
    font-size: 27px;
  }

  .portal-footer {
    gap: 12px;
  }

}


/* Respect visitors who prefer reduced animation */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}