@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

html{
  scrollbar-gutter:stable;
}

body.eo-splash-active:not(.eo-splash-unlocked){
  overflow:hidden;
}

html.eo-splash-skip .launch-splash{display:none!important}
html.eo-splash-skip body.eo-splash-active{overflow:auto}
html.eo-splash-skip body.eo-splash-active > :not(.launch-splash){opacity:1;filter:none}

body.eo-splash-active > :not(.launch-splash){
  opacity:0;
  filter:brightness(.8) blur(5px);
}

body.eo-splash-active.eo-splash-revealed > :not(.launch-splash){
  opacity:1;
  filter:brightness(1) blur(0);
  transition:
    opacity 700ms cubic-bezier(.16,1,.3,1),
    filter 760ms cubic-bezier(.16,1,.3,1);
}

.home-hero .hero-bg{
  animation:none;
  transform:none;
  will-change:auto;
}

.launch-splash{
  --launch-bone:#ece7da;
  --launch-rev:#e23725;
  --launch-mustard:#e0b833;
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#000;
  color:var(--launch-bone);
  isolation:isolate;
  transition:opacity 620ms cubic-bezier(.16,1,.3,1), visibility 0s linear 620ms;
}

.launch-splash::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 56% at 50% 50%, rgba(236,231,218,.035), transparent 62%),
    radial-gradient(ellipse 48% 34% at 50% 54%, rgba(226,55,37,.035), transparent 70%);
}

.launch-splash.is-done{
  opacity:0;
  visibility:hidden;
}

.launch-noise,
.launch-grid,
.launch-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.launch-noise{
  z-index:2;
  opacity:.052;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.65'/></svg>");
}

.launch-grid{
  z-index:1;
  background:
    radial-gradient(circle at 9% 19%, rgba(236,231,218,.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 17% 72%, rgba(236,231,218,.32) 0 1px, transparent 1.8px),
    radial-gradient(circle at 25% 37%, rgba(236,231,218,.28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 34% 82%, rgba(224,184,51,.66) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 16%, rgba(236,231,218,.32) 0 1px, transparent 1.8px),
    radial-gradient(circle at 53% 69%, rgba(236,231,218,.36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 28%, rgba(226,55,37,.8) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 72% 76%, rgba(236,231,218,.3) 0 1px, transparent 1.8px),
    radial-gradient(circle at 83% 42%, rgba(236,231,218,.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 18%, rgba(236,231,218,.24) 0 1px, transparent 1.8px);
  animation:launch-stars 4.8s ease-in-out infinite alternate;
}

.launch-scan{
  z-index:3;
  opacity:.18;
  background:radial-gradient(circle at 50% 50%, rgba(236,231,218,.08), transparent 34%);
}

.launch-chrome{
  position:absolute;
  left:clamp(18px,4vw,56px);
  right:clamp(18px,4vw,56px);
  z-index:6;
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(236,231,218,.64);
  transition:color 520ms ease, opacity 520ms ease;
}

.launch-top{top:clamp(18px,3vw,34px)}
.launch-bottom{
  bottom:clamp(18px,3vw,34px);
  justify-content:space-between;
}

.launch-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(226,55,37,.62), rgba(236,231,218,.18));
}

.launch-mark-wrap{
  position:relative;
  z-index:7;
  display:grid;
  place-items:center;
  min-width:min(92vw, 980px);
  min-height:260px;
  transform:translateY(-2vh);
}

.launch-mark-wrap::before{
  content:"";
  position:absolute;
  left:calc(50% - min(23vw, 180px));
  top:50%;
  z-index:2;
  width:9px;
  height:2px;
  background:var(--launch-bone);
  transform:translate(-50%, 72px);
  box-shadow:
    0 0 8px rgba(236,231,218,.72),
    -10px 0 18px rgba(226,55,37,.28),
    10px 0 18px rgba(224,184,51,.22);
  opacity:.96;
  pointer-events:none;
  animation:launch-line-spark 1.62s cubic-bezier(.77,0,.175,1) forwards;
  transition:background 520ms ease, opacity 520ms ease, box-shadow 520ms ease;
}

.launch-mark-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:1;
  width:min(46vw, 360px);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(236,231,218,.18), transparent);
  transform:translate(-50%, 72px);
  opacity:.76;
  pointer-events:none;
  transition:background 520ms ease, opacity 520ms ease;
}

.launch-wordmark{
  position:relative;
  display:inline-block;
  width:var(--launch-wm-width, auto);
  height:var(--launch-wm-height, 1em);
  overflow:visible;
  font-family:'Michroma',var(--sans);
  font-size:clamp(28px, 6.8vw, 92px);
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  color:var(--launch-bone);
  white-space:nowrap;
  text-shadow:0 0 22px rgba(236,231,218,.18), 0 0 34px rgba(226,55,37,.08);
  will-change:opacity, filter;
}

.launch-wordmark.is-collapsed{
  transform:translate3d(var(--launch-center-shift, 0px), 0, 0);
}

.launch-wordmark.is-collapsed .launch-keep{
  text-shadow:
    -1.6px 0 0 rgba(226,55,37,.82),
    1.2px 0 0 rgba(80,190,205,.46),
    0 0 18px rgba(226,55,37,.18),
    0 0 24px rgba(236,231,218,.12);
  animation:launch-eto-cyber 720ms steps(2,end) 1;
}

.launch-wordmark.is-ready .launch-letter{
  position:absolute;
  top:50%;
  left:0;
  transform:translate3d(var(--from-x, 0), -50%, 0);
  transform-origin:50% 50%;
  color:var(--launch-bone);
  transition:color 620ms cubic-bezier(.16,1,.3,1), text-shadow 620ms cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity, color;
}

.launch-wordmark .launch-keep{z-index:2}
.launch-wordmark .launch-fold{
  z-index:1;
  color:rgba(236,231,218,.9);
}

.launch-splash.is-fading .launch-wordmark .launch-letter{
  color:#000;
  text-shadow:none;
  animation:none;
}

.launch-splash.is-zooming .launch-wordmark{
  animation:launch-mark-finish 420ms cubic-bezier(.77,0,.175,1) forwards;
}

.launch-node{
  position:absolute;
  top:calc(50% + 92px);
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.22em;
  color:rgba(236,231,218,.48);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 360ms ease, transform 360ms ease, color 520ms ease;
}

.launch-node i{
  width:7px;
  height:7px;
  background:var(--launch-rev);
  box-shadow:0 0 0 0 rgba(226,55,37,.55);
  animation:launch-node-pulse 1.8s ease-in-out infinite;
}

.launch-wordmark.is-collapsed + .launch-node{
  opacity:1;
  transform:translateY(0);
}

.launch-copy{
  position:absolute;
  left:50%;
  top:calc(50% + 122px);
  z-index:7;
  width:min(420px, calc(100vw - 40px));
  transform:translateX(-50%);
  display:grid;
  font-family:var(--mono);
  font-size:10px;
  color:rgba(236,231,218,.64);
  letter-spacing:.22em;
  text-align:center;
  text-transform:uppercase;
  transition:color 520ms ease, opacity 520ms ease;
}

.launch-splash.is-fading .launch-copy,
.launch-splash.is-fading .launch-chrome,
.launch-splash.is-fading .launch-node{
  color:#000;
  opacity:.42;
}

.launch-splash.is-fading .launch-line,
.launch-splash.is-fading .launch-mark-wrap::before,
.launch-splash.is-fading .launch-mark-wrap::after{
  background:#000;
  box-shadow:none;
}

@keyframes launch-stars{
  from{opacity:.58;transform:translate3d(0,0,0)}
  to{opacity:.95;transform:translate3d(0,-6px,0)}
}

@keyframes launch-node-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(226,55,37,.55)}
  50%{box-shadow:0 0 0 7px rgba(226,55,37,0)}
}

@keyframes launch-line-spark{
  0%{left:calc(50% - min(23vw, 180px));opacity:.05}
  10%{opacity:1}
  82%{opacity:1}
  100%{left:calc(50% + min(23vw, 180px));opacity:.08}
}

@keyframes launch-eto-cyber{
  0%{text-shadow:-2px 0 0 rgba(226,55,37,.9),1.4px 0 0 rgba(80,190,205,.5),0 0 18px rgba(226,55,37,.2)}
  18%{text-shadow:1px 0 0 rgba(226,55,37,.74),-1.5px 0 0 rgba(80,190,205,.42),0 0 16px rgba(224,184,51,.12)}
  32%{text-shadow:-1.5px 0 0 rgba(226,55,37,.82),1px 0 0 rgba(80,190,205,.44),0 0 20px rgba(226,55,37,.18)}
  100%{text-shadow:-1.6px 0 0 rgba(226,55,37,.82),1.2px 0 0 rgba(80,190,205,.46),0 0 18px rgba(226,55,37,.18),0 0 24px rgba(236,231,218,.12)}
}

@keyframes launch-mark-finish{
  0%{transform:translate3d(var(--launch-center-shift, 0px),0,0) scale(1);filter:blur(0);opacity:1}
  38%{transform:translate3d(var(--launch-center-shift, 0px),0,0) scale(1.12);filter:blur(0);opacity:1}
  100%{transform:translate3d(var(--launch-center-shift, 0px),0,0) scale(10);filter:blur(.35px);opacity:.16}
}

@media (max-width:720px){
  .launch-chrome{font-size:9px;letter-spacing:.16em}
  .launch-bottom span:nth-child(2){display:none}
  .launch-mark-wrap{min-height:220px}
  .launch-copy{top:calc(50% + 112px)}
  .launch-node{top:calc(50% + 78px);font-size:8px;letter-spacing:.16em}
}

@media (prefers-reduced-motion:reduce){
  .launch-splash,
  .launch-splash::before,
  .launch-splash::after,
  .launch-wordmark,
  .launch-grid,
  .launch-mark-wrap::before,
  body.eo-splash-active > :not(.launch-splash){
    animation:none!important;
    transition:none!important;
  }
}