/* ==========================================================================
   Clone.it — Cosmic Background
   Framer-inspired atmosphere with a true intro reveal: dark curtain,
   centered glow columns, stars, radial light, horizon arc, and grain.
   ========================================================================== */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: #06060a;
}

.cosmos__gradient,
.cosmos__ambient,
.cosmos__column,
.cosmos__veil,
.cosmos__stars,
.cosmos__radial,
.cosmos__horizon-glow,
.cosmos__horizon-base,
.cosmos__edge-fade,
.cosmos__grain,
.cosmos__curtain {
  position: absolute;
  pointer-events: none;
}

.cosmos__gradient {
  inset: -10% -14% -8%;
  z-index: 1;
  background:
    radial-gradient(42% 60% at 50% 86%,
      rgba(198, 220, 255, .18) 0%,
      rgba(107, 132, 210, .08) 32%,
      transparent 70%),
    radial-gradient(36% 56% at 31% 73%,
      rgba(92, 64, 176, .30) 0%,
      rgba(52, 35, 112, .13) 42%,
      transparent 76%),
    radial-gradient(34% 54% at 70% 74%,
      rgba(68, 132, 82, .24) 0%,
      rgba(29, 76, 42, .09) 40%,
      transparent 76%);
  filter: blur(24px);
}

.cosmos__ambient {
  inset: -6% -10% -10%;
  z-index: 1;
  background:
    radial-gradient(46% 74% at 27% 72%,
      rgba(74, 48, 148, .2) 0%,
      rgba(32, 24, 76, .11) 40%,
      transparent 76%),
    radial-gradient(42% 70% at 73% 74%,
      rgba(58, 116, 72, .16) 0%,
      rgba(21, 54, 31, .08) 42%,
      transparent 78%),
    radial-gradient(28% 38% at 50% 84%,
      rgba(194, 214, 255, .08) 0%,
      rgba(92, 114, 176, .04) 46%,
      transparent 76%);
  filter: blur(28px);
}

.cosmos__column {
  left: 50%;
  top: 1%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 1;
}

.cosmos__column--outer {
  width: min(104vw, 1460px);
  background:
    radial-gradient(ellipse 26% 70% at 50% 64%,
      rgba(47, 74, 168, .18) 0%,
      rgba(16, 29, 92, .07) 44%,
      transparent 72%);
  filter: blur(22px);
}

.cosmos__column--inner {
  width: min(64vw, 940px);
  background:
    radial-gradient(ellipse 38% 62% at 50% 66%,
      rgba(148, 168, 236, .18) 0%,
      rgba(57, 86, 186, .09) 30%,
      rgba(16, 28, 82, .05) 54%,
      transparent 76%);
  filter: blur(12px);
}

.cosmos__veil {
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom,
      rgba(6, 6, 10, .97) 0%,
      rgba(6, 6, 10, .86) 18%,
      rgba(6, 6, 10, .42) 45%,
      rgba(6, 6, 10, .08) 72%);
}

.cosmos__stars {
  inset: 0;
  z-index: 3;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 44%,
    rgba(0, 0, 0, .24) 64%,
    transparent 82%);
  mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 44%,
    rgba(0, 0, 0, .24) 64%,
    transparent 82%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><g fill='%23F5F5F0'><circle cx='42' cy='88' r='1.1' opacity='.7'/><circle cx='118' cy='312' r='1' opacity='.45'/><circle cx='181' cy='47' r='1.6' opacity='.85'/><circle cx='240' cy='205' r='1' opacity='.55'/><circle cx='276' cy='398' r='1' opacity='.35'/><circle cx='311' cy='132' r='1.1' opacity='.7'/><circle cx='362' cy='272' r='1.5' opacity='.9'/><circle cx='405' cy='65' r='1' opacity='.5'/><circle cx='448' cy='355' r='1' opacity='.4'/><circle cx='491' cy='180' r='1.2' opacity='.65'/><circle cx='534' cy='28' r='1.3' opacity='.8'/><circle cx='566' cy='230' r='1' opacity='.45'/><circle cx='603' cy='410' r='1' opacity='.35'/><circle cx='648' cy='112' r='1.6' opacity='.95'/><circle cx='690' cy='301' r='1' opacity='.6'/><circle cx='724' cy='73' r='1.1' opacity='.7'/><circle cx='762' cy='248' r='1' opacity='.5'/><circle cx='799' cy='165' r='1.3' opacity='.8'/><circle cx='838' cy='38' r='1' opacity='.65'/><circle cx='872' cy='378' r='1' opacity='.4'/><circle cx='912' cy='220' r='1.5' opacity='.9'/><circle cx='951' cy='96' r='1' opacity='.55'/><circle cx='988' cy='295' r='1' opacity='.45'/><circle cx='1023' cy='55' r='1.4' opacity='.75'/><circle cx='1062' cy='182' r='1' opacity='.65'/><circle cx='1099' cy='412' r='1' opacity='.35'/><circle cx='1135' cy='128' r='1.6' opacity='.85'/><circle cx='1172' cy='262' r='1' opacity='.5'/><circle cx='1208' cy='77' r='1.1' opacity='.7'/><circle cx='1245' cy='345' r='1' opacity='.4'/><circle cx='1282' cy='210' r='1.3' opacity='.6'/><circle cx='1321' cy='48' r='1.6' opacity='.95'/><circle cx='1358' cy='285' r='1' opacity='.55'/><circle cx='1395' cy='142' r='1.1' opacity='.65'/><circle cx='1432' cy='392' r='1' opacity='.4'/><circle cx='1470' cy='68' r='1.4' opacity='.8'/><circle cx='1508' cy='238' r='1' opacity='.5'/><circle cx='1545' cy='115' r='1.1' opacity='.6'/><circle cx='1582' cy='322' r='1' opacity='.4'/><circle cx='62' cy='188' r='1' opacity='.55'/><circle cx='156' cy='425' r='1' opacity='.35'/><circle cx='222' cy='85' r='1.4' opacity='.8'/><circle cx='292' cy='488' r='1' opacity='.4'/><circle cx='340' cy='340' r='1.5' opacity='.85'/><circle cx='388' cy='168' r='1' opacity='.6'/><circle cx='428' cy='445' r='1' opacity='.38'/><circle cx='470' cy='122' r='1.1' opacity='.65'/><circle cx='520' cy='472' r='1' opacity='.32'/><circle cx='582' cy='325' r='1.3' opacity='.7'/><circle cx='630' cy='158' r='1' opacity='.6'/><circle cx='680' cy='455' r='1' opacity='.4'/><circle cx='735' cy='398' r='1' opacity='.45'/><circle cx='785' cy='92' r='1.6' opacity='.9'/><circle cx='828' cy='435' r='1' opacity='.4'/><circle cx='895' cy='168' r='1.1' opacity='.6'/><circle cx='942' cy='462' r='1' opacity='.35'/><circle cx='995' cy='138' r='1.4' opacity='.75'/><circle cx='1045' cy='362' r='1' opacity='.5'/><circle cx='1088' cy='488' r='1' opacity='.32'/><circle cx='1148' cy='205' r='1' opacity='.65'/><circle cx='1195' cy='418' r='1' opacity='.4'/><circle cx='1258' cy='148' r='1.3' opacity='.7'/><circle cx='1298' cy='378' r='1' opacity='.45'/><circle cx='1345' cy='455' r='1' opacity='.35'/><circle cx='1402' cy='212' r='1.1' opacity='.6'/><circle cx='1448' cy='428' r='1' opacity='.4'/><circle cx='1492' cy='172' r='1.5' opacity='.85'/><circle cx='1538' cy='365' r='1' opacity='.5'/><circle cx='1575' cy='88' r='1.1' opacity='.65'/><circle cx='88' cy='472' r='1' opacity='.32'/><circle cx='195' cy='258' r='1' opacity='.55'/><circle cx='258' cy='478' r='1' opacity='.35'/><circle cx='380' cy='495' r='1' opacity='.3'/><circle cx='452' cy='285' r='1.3' opacity='.75'/><circle cx='558' cy='498' r='1' opacity='.32'/><circle cx='662' cy='228' r='1' opacity='.6'/><circle cx='755' cy='488' r='1' opacity='.32'/><circle cx='858' cy='278' r='1.2' opacity='.65'/><circle cx='1018' cy='455' r='1' opacity='.38'/><circle cx='1172' cy='488' r='1' opacity='.32'/></g><g fill='%23DCE3FF'><circle cx='215' cy='118' r='1.3' opacity='.95'/><circle cx='622' cy='195' r='1.6' opacity='.95'/><circle cx='1055' cy='72' r='1.3' opacity='.95'/><circle cx='1388' cy='228' r='1.5' opacity='.95'/><circle cx='805' cy='342' r='1.3' opacity='.9'/></g></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.cosmos__radial {
  left: 50%;
  top: 74%;
  z-index: 4;
  width: min(48vw, 720px);
  height: min(8.5vw, 98px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, .82) 0%,
    rgba(222, 231, 255, .34) 30%,
    rgba(130, 149, 204, .10) 52%,
    rgba(222, 231, 255, 0) 74%);
  filter: blur(68px);
}

.cosmos__horizon-glow {
  left: 50%;
  top: 79%;
  z-index: 4;
  width: 214vw;
  height: 54vw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center bottom,
    rgba(255, 255, 255, .24) 0%,
    rgba(210, 223, 255, .1) 34%,
    rgba(210, 223, 255, 0) 67%);
  filter: blur(26px);
}

.cosmos__horizon-base {
  left: 50%;
  top: 84%;
  z-index: 5;
  width: 244vw;
  height: 112vw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #06060a;
  box-shadow:
    inset 0 2px 18px rgba(255, 255, 255, .88),
    inset 0 -18px 72px rgba(255, 255, 255, .12),
    0 -12px 44px rgba(255, 255, 255, .12),
    0 -30px 92px rgba(255, 255, 255, .04);
}

.cosmos__edge-fade {
  top: 48%;
  bottom: 0;
  z-index: 6;
  width: 22vw;
}

.cosmos__edge-fade--left {
  left: 0;
  background: linear-gradient(to right,
    rgba(6, 6, 10, .92) 0%,
    rgba(6, 6, 10, .44) 34%,
    rgba(6, 6, 10, 0) 100%);
}

.cosmos__edge-fade--right {
  right: 0;
  background: linear-gradient(to left,
    rgba(6, 6, 10, .92) 0%,
    rgba(6, 6, 10, .44) 34%,
    rgba(6, 6, 10, 0) 100%);
}

.cosmos__grain {
  inset: 0;
  z-index: 7;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(rgba(255, 255, 255, .75) .8px, transparent .8px),
    radial-gradient(rgba(255, 255, 255, .32) .8px, transparent .8px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}

.cosmos__curtain {
  inset: 0;
  z-index: 8;
  background:
    linear-gradient(to bottom,
      rgba(6, 6, 10, 1) 0%,
      rgba(6, 6, 10, 1) 42%,
      rgba(6, 6, 10, .98) 62%,
      rgba(6, 6, 10, .92) 74%,
      rgba(6, 6, 10, .84) 82%,
      rgba(6, 6, 10, .72) 88%,
      rgba(6, 6, 10, .5) 94%,
      rgba(6, 6, 10, 0) 100%);
}

@keyframes cosmosTwinkle {
  0%, 100% { opacity: .72; }
  50% { opacity: .58; }
}

html.js[data-page="home"] .cosmos__curtain {
  opacity: 1;
  transition: opacity 1120ms cubic-bezier(.18, .86, .2, 1) 70ms;
}

html.js.is-loaded[data-page="home"] .cosmos__curtain {
  opacity: 0;
}

html.js[data-page="home"] .cosmos__gradient {
  opacity: .001;
  transform: translate3d(0, 52px, 0) scale(1.06);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition:
    opacity 1380ms cubic-bezier(.18, .86, .2, 1) 40ms,
    transform 1960ms cubic-bezier(.18, .86, .2, 1) 40ms;
}

html.js[data-page="home"] .cosmos__ambient {
  opacity: .001;
  transform: translate3d(0, 36px, 0) scale(1.02);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition:
    opacity 1500ms cubic-bezier(.18, .86, .2, 1) 80ms,
    transform 1900ms cubic-bezier(.18, .86, .2, 1) 80ms;
}

html.js.is-scene-ready[data-page="home"] .cosmos__gradient,
html.js.is-scene-ready[data-page="home"] .cosmos__ambient {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

html.js[data-page="home"] .cosmos__column--outer,
html.js[data-page="home"] .cosmos__column--inner {
  opacity: .001;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

html.js[data-page="home"] .cosmos__column--outer {
  transform: translateX(-50%) translateY(34px) scale(1.03);
  transition:
    opacity 1360ms cubic-bezier(.18, .86, .2, 1) 110ms,
    transform 1820ms cubic-bezier(.18, .86, .2, 1) 110ms;
}

html.js[data-page="home"] .cosmos__column--inner {
  transform: translateX(-50%) translateY(28px) scale(1.02);
  transition:
    opacity 1320ms cubic-bezier(.18, .86, .2, 1) 150ms,
    transform 1740ms cubic-bezier(.18, .86, .2, 1) 150ms;
}

html.js.is-scene-ready[data-page="home"] .cosmos__column--outer {
  opacity: .72;
  transform: translateX(-50%) translateY(0) scale(1);
}

html.js.is-scene-ready[data-page="home"] .cosmos__column--inner {
  opacity: .62;
  transform: translateX(-50%) translateY(0) scale(1);
}

html.js[data-page="home"] .cosmos__stars {
  opacity: .001;
  transform: translate3d(0, 18px, 0) scale(1.015);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition:
    opacity 1560ms cubic-bezier(.18, .86, .2, 1) 190ms,
    transform 1820ms cubic-bezier(.18, .86, .2, 1) 190ms;
}

html.js.is-scene-ready[data-page="home"] .cosmos__stars {
  opacity: .72;
  transform: translate3d(0, 0, 0) scale(1);
}

html.js.is-loaded[data-page="home"] .cosmos__stars {
  animation: cosmosTwinkle 7s ease-in-out 2200ms infinite;
}

html.js[data-page="home"] .cosmos__radial {
  opacity: .001;
  transform: translateX(-50%) translateY(72px) scale(.82);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition:
    opacity 1480ms cubic-bezier(.18, .86, .2, 1) 50ms,
    transform 2020ms cubic-bezier(.18, .86, .2, 1) 50ms;
}

html.js.is-scene-ready[data-page="home"] .cosmos__radial {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

html.js[data-page="home"] .cosmos__horizon-glow,
html.js[data-page="home"] .cosmos__horizon-base {
  opacity: .001;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

html.js[data-page="home"] .cosmos__horizon-glow {
  transform: translateX(-50%) translateY(104px) scale(.94);
  transition:
    opacity 1540ms cubic-bezier(.18, .86, .2, 1) 100ms,
    transform 2140ms cubic-bezier(.18, .86, .2, 1) 100ms;
}

html.js[data-page="home"] .cosmos__horizon-base {
  transform: translateX(-50%) translateY(116px) scale(.982);
  transition:
    opacity 1620ms cubic-bezier(.18, .86, .2, 1) 100ms,
    transform 2220ms cubic-bezier(.18, .86, .2, 1) 100ms;
}

html.js.is-scene-ready[data-page="home"] .cosmos__horizon-glow,
html.js.is-scene-ready[data-page="home"] .cosmos__horizon-base {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

html.js[data-page="home"] .cosmos__grain {
  opacity: .001;
  transition: opacity 1100ms cubic-bezier(.18, .86, .2, 1) 220ms;
}

html.js.is-scene-ready[data-page="home"] .cosmos__grain {
  opacity: .035;
}

@media (prefers-reduced-motion: reduce) {
  html.js.is-loaded[data-page="home"] .cosmos__stars {
    animation: none;
  }

  html.js[data-page="home"] .cosmos__curtain,
  html.js[data-page="home"] .cosmos__gradient,
  html.js[data-page="home"] .cosmos__ambient,
  html.js[data-page="home"] .cosmos__column--outer,
  html.js[data-page="home"] .cosmos__column--inner,
  html.js[data-page="home"] .cosmos__stars,
  html.js[data-page="home"] .cosmos__radial,
  html.js[data-page="home"] .cosmos__horizon-glow,
  html.js[data-page="home"] .cosmos__horizon-base,
  html.js[data-page="home"] .cosmos__grain {
    transition: none;
  }
}

@media (max-width: 480px) {
  .cosmos__gradient {
    inset: -6% -18% -10%;
  }

  .cosmos__column--outer {
    width: 148vw;
  }

  .cosmos__column--inner {
    width: 102vw;
  }

  .cosmos__radial {
    width: 82vw;
    top: 76%;
  }

  .cosmos__horizon-glow {
    width: 248vw;
    height: 72vw;
    top: 81%;
  }

  .cosmos__horizon-base {
    width: 300vw;
    height: 152vw;
    top: 87%;
  }

  .cosmos__edge-fade {
    width: 22vw;
  }
}