:root{
  --deep:#10395f;
  --mid:#2a6fa8;
}

*{box-sizing:border-box}

[hidden]{display:none!important}

html,body{height:100%}

body{
  margin:0;
  min-height:100vh;
  background:#8ec9f2 url("assets/sky.jpg") center center / cover no-repeat fixed;
  color:var(--deep);
  font-family:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;

  /* a arte nao se seleciona, nao se arrasta e nao se guarda */
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

/* brilho suave do sol por cima do ceu */
.sky{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(60% 40% at 8% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(90% 55% at 50% 42%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 70%);
}

.rainbow{
  position:absolute;
  left:50%;
  top:-62vmax;
  width:126vmax;
  height:126vmax;
  transform:translateX(-50%) rotate(-6deg);
  border-radius:50%;
  background:conic-gradient(from 204deg,
    rgba(255,95,174,0) 0deg,
    rgba(255,95,174,.2) 24deg,
    rgba(255,171,63,.16) 36deg,
    rgba(255,232,138,.16) 46deg,
    rgba(67,214,155,.16) 57deg,
    rgba(108,201,245,.18) 68deg,
    rgba(179,157,255,.2) 80deg,
    rgba(179,157,255,0) 100deg);
  filter:blur(80px);
  opacity:.55;
  animation:spin 110s linear infinite;
}

@keyframes spin{to{transform:translateX(-50%) rotate(354deg)}}

#bubbles,#bubbles-front{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#bubbles{z-index:1}

/* bolhas em primeiro plano: perto da camara, portanto desfocadas */
#bubbles-front{z-index:3;filter:blur(2.5px);opacity:.85}

/* ---------- conteudo ---------- */

.wrap{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px;
  width:100%;
}

.soon{
  width:min(88vw,860px);
  aspect-ratio:1400/457;
  margin:0 auto;
  background:url("assets/coming-soon.png") center center / contain no-repeat;
  filter:drop-shadow(0 18px 26px rgba(16,57,95,.28));
  animation:pulse 4.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes pulse{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.025) translateY(-6px)}
}

/* botao do X, canto superior direito */
.x-link{
  position:fixed;
  top:24px;
  right:24px;
  z-index:5;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  color:#12385c;
  background:linear-gradient(160deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 10px 24px rgba(16,57,95,.24);
  backdrop-filter:blur(6px);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, color .2s ease;
}

.x-link:hover{
  transform:translateY(-3px) scale(1.07);
  color:#000;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),0 16px 32px rgba(16,57,95,.32);
}

.x-link:active{transform:translateY(0) scale(.96)}

.foot{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:4;
  font-size:12.5px;
  letter-spacing:.06em;
  white-space:nowrap;
  color:rgba(16,57,95,.62);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}

@media (max-width:560px){
  body{background-attachment:scroll}
  .foot{bottom:16px}
  .soon{width:86vw}
  .x-link{top:16px;right:16px;width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .soon,.rainbow{animation:none}
}