/* [project]/src/components/PortaleeeHero/portaleee-hero.css [app-client] (css) */
.portaleee-hero {
  color: #f4f4f8;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(#05060a 0%, #0b0d16 100%);
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI, Helvetica Neue, Arial, sans-serif;
  display: flex;
  position: relative;
  overflow: hidden;
}

.portaleee-bg-scene {
  z-index: 0;
  will-change: transform;
  position: absolute;
  inset: -12%;
}

.portaleee-stars {
  position: absolute;
  inset: 0;
}

.portaleee-stars span {
  opacity: .15;
  animation: portaleee-twinkle var(--tw, 3s) var(--td, 0s) ease-in-out infinite;
  background: #fff;
  border-radius: 50%;
  position: absolute;
}

@keyframes portaleee-twinkle {
  0%, 100% {
    opacity: .15;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.portaleee-nebula {
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
  border-radius: 50%;
  position: absolute;
}

.portaleee-nebula-1 {
  background: radial-gradient(circle at 30% 30%, #8b5cf652, #0000 62%);
  width: 62vmax;
  height: 62vmax;
  animation: 46s ease-in-out infinite alternate portaleee-drift-1;
  top: -14vmax;
  left: -18vmax;
}

.portaleee-nebula-2 {
  background: radial-gradient(circle at 60% 40%, #22d3ee33, #0000 60%);
  width: 54vmax;
  height: 54vmax;
  animation: 38s ease-in-out infinite alternate portaleee-drift-2;
  bottom: -12vmax;
  right: -16vmax;
}

.portaleee-nebula-3 {
  background: radial-gradient(circle, #3b82f624, #0000 60%);
  width: 44vmax;
  height: 44vmax;
  animation: 52s ease-in-out infinite alternate portaleee-drift-3;
  top: 18%;
  left: 32%;
}

@keyframes portaleee-drift-1 {
  to {
    transform: translate3d(9vmax, 7vmax, 0)scale(1.12);
  }
}

@keyframes portaleee-drift-2 {
  to {
    transform: translate3d(-7vmax, -6vmax, 0)scale(1.15);
  }
}

@keyframes portaleee-drift-3 {
  to {
    transform: translate3d(6vmax, -8vmax, 0)scale(1.08);
  }
}

.portaleee-grid-overlay {
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(#ffffff06 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
  background-size: 72px 72px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(65% 55%, #000 0%, #0000 72%);
  mask-image: radial-gradient(65% 55%, #000 0%, #0000 72%);
}

.portaleee-vignette {
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(90% 80%, #0000 55%, #0000008c 100%);
  position: absolute;
  inset: 0;
}

.portaleee-shooting-star {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #fff0, #fff);
  border-radius: 2px;
  width: 130px;
  height: 1.5px;
  animation: 11s linear infinite portaleee-shoot;
  position: absolute;
  top: 12%;
  left: 0;
  transform: rotate(24deg);
}

.portaleee-shooting-star-2 {
  animation-duration: 13s;
  animation-delay: 5.5s;
  top: 28%;
}

@keyframes portaleee-shoot {
  0% {
    opacity: 0;
    transform: translate3d(-10vw, 0, 0)rotate(24deg);
  }

  3% {
    opacity: .9;
  }

  6% {
    opacity: 0;
  }

  8% {
    transform: translate3d(110vw, 44vh, 0)rotate(24deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(110vw, 44vh, 0)rotate(24deg);
  }
}

.portaleee-main {
  z-index: 2;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vh, 2.5rem);
  padding: 2rem;
  display: flex;
  position: relative;
}

.portaleee-title {
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(105deg, #0000 42%, #ffffffe6 50%, #0000 58%) 0 0 / 260% 100%, linear-gradient(#fff 0%, #ffffff94 100%) 0 0 / 100% 100%;
  -webkit-text-fill-color: transparent;
  color: #0000;
  filter: drop-shadow(0 0 46px #ffffff12);
  -webkit-background-clip: text;
  background-clip: text;
  justify-content: center;
  align-items: center;
  gap: .12em;
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 12rem);
  font-weight: 800;
  line-height: 1;
  animation: 7s linear infinite portaleee-sheen;
  display: flex;
}

@keyframes portaleee-sheen {
  from {
    background-position: 200% 0, 0 0;
  }

  to {
    background-position: -80% 0, 0 0;
  }
}

.portaleee-letter {
  opacity: 0;
  animation: .9s cubic-bezier(.16, 1, .3, 1) forwards portaleee-letter-in;
  animation-delay: var(--d, 0s);
  display: inline-block;
}

@keyframes portaleee-letter-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(.45em)scale(.9);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0)scale(1);
  }
}

.portaleee-portal-wrap {
  opacity: 0;
  flex-shrink: 0;
  animation: 1.5s cubic-bezier(.16, 1, .3, 1) 80ms forwards portaleee-portal-enter;
  display: inline-flex;
}

@keyframes portaleee-portal-enter {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(.55)rotate(-14deg);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: scale(1)rotate(0);
  }
}

.portaleee-o-portal {
  will-change: transform;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  display: inline-flex;
  position: relative;
}

.portaleee-portal-halo {
  filter: blur(6px);
  opacity: .85;
  will-change: transform;
  background: conic-gradient(#0000 0deg, #8b5cf661 55deg, #22d3ee57 95deg, #0000 150deg 210deg, #8b5cf64d 265deg, #0000 320deg);
  border-radius: 50%;
  animation: 9s linear infinite portaleee-spin;
  position: absolute;
  inset: -14%;
  -webkit-mask: radial-gradient(circle, #0000 52%, #000 54% 76%, #0000 78%);
  mask: radial-gradient(circle, #0000 52%, #000 54% 76%, #0000 78%);
}

.portaleee-o-portal svg {
  filter: drop-shadow(0 0 16px #8b5cf659) drop-shadow(0 0 40px #22d3ee2e);
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: visible;
}

.portaleee-spin-cw {
  transform-origin: 50px 50px;
  animation: 14s linear infinite portaleee-spin;
}

.portaleee-spin-ccw {
  transform-origin: 50px 50px;
  animation: 24s linear infinite portaleee-spin-rev;
}

.portaleee-ring-outer {
  transform-origin: 50px 50px;
  animation: 42s linear infinite portaleee-spin;
}

.portaleee-ring-inner {
  transform-origin: 50px 50px;
  animation: 28s linear infinite portaleee-spin-rev;
}

.portaleee-speck {
  animation: portaleee-spin var(--dur, 8s) linear infinite;
  transform-origin: 50px 50px;
}

.portaleee-speck-2 {
  animation-duration: 12s;
}

.portaleee-speck-3 {
  animation-duration: 17s;
}

@keyframes portaleee-spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes portaleee-spin-rev {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

.portaleee-core-glow {
  transform-origin: 50px 50px;
  animation: 4.5s ease-in-out infinite portaleee-core-pulse;
}

@keyframes portaleee-core-pulse {
  0%, 100% {
    opacity: .72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
  }
}

.portaleee-tagline {
  opacity: 0;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  animation: 1s cubic-bezier(.16, 1, .3, 1) .95s forwards portaleee-letter-in;
  display: flex;
}

.portaleee-tagline .portaleee-spark {
  color: #8b5cf6;
  font-size: .85rem;
  animation: 3s ease-in-out infinite portaleee-spark-pulse;
}

@keyframes portaleee-spark-pulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.portaleee-tagline p {
  letter-spacing: .06em;
  color: #f4f4f86b;
  text-wrap: balance;
  max-width: 34ch;
  margin: 0;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  font-weight: 300;
}

@media (max-width: 640px) {
  .portaleee-title {
    gap: .05em;
    font-size: clamp(1.9rem, 10vw, 4rem);
  }

  .portaleee-main {
    gap: clamp(1rem, 3vh, 1.75rem);
    padding: 1.25rem;
  }

  .portaleee-portal-halo {
    inset: -10%;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .portaleee-main {
    gap: .6rem;
    padding: 1rem;
  }

  .portaleee-title {
    font-size: clamp(1.4rem, 6.5vh, 3.4rem);
  }

  .portaleee-tagline p {
    font-size: .85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portaleee-stars span {
    opacity: .5;
    animation: none;
  }

  .portaleee-nebula, .portaleee-portal-halo, .portaleee-spin-cw, .portaleee-spin-ccw, .portaleee-ring-outer, .portaleee-ring-inner, .portaleee-speck, .portaleee-core-glow, .portaleee-shooting-star, .portaleee-tagline .portaleee-spark, .portaleee-title {
    animation: none;
  }

  .portaleee-letter, .portaleee-portal-wrap, .portaleee-tagline {
    opacity: 1;
    animation: none;
  }
}

/*# sourceMappingURL=src_components_PortaleeeHero_portaleee-hero_adc1ed3a.css.map*/