@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=Great+Vibes&family=Outfit:wght@300;400;500;600;700&display=swap");
@import "tailwindcss";
@import "primeicons/primeicons.css";

@theme {
  --font-display: "Cormorant Garamond", serif;
  --font-sans: "Outfit", sans-serif;
  --font-wordmark: "Fredoka", sans-serif;
  --font-script: "Great Vibes", cursive;
}

html,
body,
#app {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: #3f3556;
  background-color: #f4eefb;
}

::selection {
  background: rgba(139, 108, 219, 0.18);
  color: #3f3556;
}

.admin-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea) {
  border-color: #e8def8;
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  box-shadow: 0 8px 22px rgba(139, 108, 219, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #1f2337;
  font-family: var(--font-sans);
  font-weight: 650;
}

.admin-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea):focus {
  border-color: #9b7ce4;
  background: #fff;
  box-shadow: 0 12px 30px rgba(139, 108, 219, 0.16), 0 0 0 4px rgba(139, 108, 219, 0.12);
}

.admin-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea)::placeholder {
  color: #9b91aa;
  font-weight: 600;
}

.admin-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea):disabled {
  border-color: #e5e7eb;
  background: #f8fafc;
  box-shadow: none;
  color: #94a3b8;
}

.admin-panel button:is(.border, [class*="border-"]):not(:disabled) {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-panel button:is(.border, [class*="border-"]):not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(139, 108, 219, 0.18);
}

.admin-panel button:is(.border, [class*="border-"]):not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(139, 108, 219, 0.12);
}

.admin-panel button:is(.border, [class*="border-"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(139, 108, 219, 0.16), 0 14px 32px rgba(139, 108, 219, 0.18);
}

a {
  color: inherit;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

.cinematic-loader-enter-active {
  transition: opacity 0.34s ease;
}

.cinematic-loader-enter-from {
  opacity: 0;
}

.cinematic-loader-leave-active {
  pointer-events: none;
  animation: loaderLayerRelease 3.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cinematic-loader-leave-active .loader {
  animation: loaderSoftExit 3.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: 50% 34%;
}

.cinematic-loader-leave-active .loader__scene {
  animation: loaderSceneHoldThenFade 3.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cinematic-loader-leave-active .loader__aurora,
.cinematic-loader-leave-active .loader__hanger,
.cinematic-loader-leave-active .loader__mist {
  animation: loaderMotifStepBack 0.5s ease-out forwards;
}

.cinematic-loader-leave-active .loader__eyebrow,
.cinematic-loader-leave-active .loader__title,
.cinematic-loader-leave-active .loader__text {
  animation: loaderLoadingTextOut 0.34s ease-out forwards;
}

.cinematic-loader-leave-active .loader__outro-text {
  animation: loaderOutroTextInOut 3.08s cubic-bezier(0.22, 1, 0.36, 1) 0.44s forwards;
}

.cinematic-loader-leave-active .loader__starfield--far,
.cinematic-loader-leave-active .loader__starfield--mid,
.cinematic-loader-leave-active .loader__starfield--near {
  animation: loaderStarsDriftAway 3.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--one {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.24s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--two {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--three {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--four {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--five {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--six {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.84s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-line--seven {
  animation: constellationLineDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.96s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--one {
  animation: constellationDotOne 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.16s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--two {
  animation: constellationDotTwo 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.26s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--three {
  animation: constellationDotThree 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--four {
  animation: constellationDotFour 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--five {
  animation: constellationDotFive 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.56s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--six {
  animation: constellationDotSix 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.66s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--seven {
  animation: constellationDotSeven 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.76s forwards;
}

.cinematic-loader-leave-active .loader__dissolve-dot--eight {
  animation: constellationDotEight 3.04s cubic-bezier(0.22, 1, 0.36, 1) 0.86s forwards;
}

@keyframes loaderLayerRelease {
  0% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loaderSoftExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes loaderSceneHoldThenFade {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -0.4rem, 0) scale(0.98);
  }
}

@keyframes loaderMotifStepBack {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.18;
  }
}

@keyframes loaderLoadingTextOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.45rem);
  }
}

@keyframes loaderOutroTextInOut {
  0% {
    opacity: 0;
    transform: translateY(-6.2rem) scale(0.98);
  }
  18% {
    opacity: 1;
    transform: translateY(-6.8rem) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(-6.8rem) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-7.2rem) scale(0.99);
  }
}

@keyframes loaderStarsDriftAway {
  0% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -3rem, 0) scale(1.05);
  }
}

@keyframes constellationLineDraw {
  0% { opacity: 0; stroke-dashoffset: 1; }
  20% { opacity: 0.94; stroke-dashoffset: 0; }
  68% { opacity: 0.86; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes constellationDotOne {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-42px, -46px, 0) scale(0.18); }
}

@keyframes constellationDotTwo {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(2px, -56px, 0) scale(0.18); }
}

@keyframes constellationDotThree {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(52px, -30px, 0) scale(0.18); }
}

@keyframes constellationDotFour {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-48px, 34px, 0) scale(0.18); }
}

@keyframes constellationDotFive {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(14px, 48px, 0) scale(0.18); }
}

@keyframes constellationDotSix {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(58px, 40px, 0) scale(0.18); }
}

@keyframes constellationDotSeven {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.18); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(64px, 66px, 0) scale(0.18); }
}

@keyframes constellationDotEight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
  16% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.18); }
  68% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-62px, 62px, 0) scale(0.18); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
}
@keyframes floaty2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
