/* ==========================================================================
   DropMC - landing de contagem regressiva
   Paleta amostrada diretamente de img/dropmc-logo.png
   ========================================================================== */

:root{
  /* ceu */
  --night:       #0A0E33;
  --night-deep:  #05071C;
  --night-lift:  #1B2364;

  /* blocos da logo */
  --face-hi:     #FFF3C6;   /* topo da face  */
  --face:        #F3D68E;   /* meio da face  */
  --face-lo:     #EFB96E;   /* base da face  */
  --rust:        #D8551C;   /* plano lateral */

  /* faixa da logo */
  --peri:        #8F9CF2;
  --peri-soft:   #C3CAFB;
  --blurple:     #5A6BF0;
  --blurple-lo:  #3541A8;

  /* confirmacao, na familia manteiga da logo */
  --ok:          #F5D89A;

  --shell: clamp(1rem, 4vw, 2.5rem);
  --ground-h: clamp(84px, 13vh, 140px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100dvh;
  font-family:'Archivo','Archivo Black','Helvetica Neue',Arial,sans-serif;
  color:var(--peri-soft);
  background-color:var(--night);
  background-image:radial-gradient(128% 86% at 50% 26%,
                     var(--night-lift) 0%,
                     var(--night) 44%,
                     var(--night-deep) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* --- cenario ------------------------------------------------------------ */

/* horizonte de blocos; degraus alinhados a uma grade de 28px */
.ground{
  position:fixed; left:0; right:0; bottom:0;
  height:var(--ground-h);
  background-image:
    repeating-linear-gradient(90deg, rgba(190,205,255,.042) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(190,205,255,.075) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #0E1444 0%, #070A26 100%);
  clip-path:polygon(
      0 28px,        8.333% 28px,
      8.333% 0,      25% 0,
      25% 56px,      41.667% 56px,
      41.667% 28px,  50% 28px,
      50% 0,         66.667% 0,
      66.667% 28px,  83.333% 28px,
      83.333% 56px,  91.667% 56px,
      91.667% 28px,  100% 28px,
      100% 100%,     0 100%);
  pointer-events:none;
  z-index:0;
}

/* --- palco -------------------------------------------------------------- */

.stage{
  position:relative;
  z-index:1;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.1rem,3.4vh,2.1rem);
  text-align:center;
  padding-top:max(var(--shell), env(safe-area-inset-top));
  padding-right:max(var(--shell), env(safe-area-inset-right));
  padding-left:max(var(--shell), env(safe-area-inset-left));
  padding-bottom:calc(var(--ground-h) * .6 + max(var(--shell), env(safe-area-inset-bottom)));
}

.logo{
  width:clamp(240px, 44vw, 500px);
  height:auto;
  filter:drop-shadow(0 14px 26px rgba(3,5,26,.62));
}

/* --- contagem ----------------------------------------------------------- */

.countdown{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(.7rem,2vh,1.1rem);
}

.lede{
  margin:0;
  font-size:clamp(.82rem,2.6vw,1rem);
  font-weight:600;
  letter-spacing:.09em;
  color:var(--peri);
  opacity:.85;
}

/* A escala vive aqui para que o espaco entre unidades acompanhe os digitos. */
.clock{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-size:clamp(2.15rem, min(10.6vw, 16.5vh), 6.9rem);
  font-variation-settings:'wdth' 118,'wght' 900;
  gap:.38em;
}

.unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(.4rem,1.4vh,.75rem);
}

/* A extrusao so cresce para a direita, entao a mancha visual do numero fica
   deslocada em relacao a sua caixa. O padding devolve o eixo, e a legenda
   volta a ficar centrada sob os digitos. */
.digits{
  display:flex;
  line-height:.96;
  padding-right:.10em;
  font-variant-numeric:tabular-nums;
}

/* Tratamento de bloco da logo: corpo extrudado em laranja com a face manteiga
   por cima, a mesma construcao das letras de DROPMC. Vale para os digitos da
   contagem e para o aviso de abertura, que compartilham o mesmo desenho. */
.d,
.shout-line{
  position:relative;
  color:var(--rust);
  /* A extrusao e empilhada camada a camada. Com poucos passos a diagonal
     vira escadinha visivel nos tamanhos grandes, entao sao 32 passos
     de menos de meio pixel cada. */
  text-shadow:
     .0034em .0045em 0 var(--rust), .0067em .009em 0 var(--rust), .0101em .0135em 0 var(--rust), .0135em .018em 0 var(--rust),
     .0169em .0225em 0 var(--rust), .0203em .027em 0 var(--rust), .0236em .0315em 0 var(--rust), .027em .036em 0 var(--rust),
     .0304em .0405em 0 var(--rust), .0338em .045em 0 var(--rust), .0371em .0495em 0 var(--rust), .0405em .054em 0 var(--rust),
     .0439em .0585em 0 var(--rust), .0473em .063em 0 var(--rust), .0506em .0675em 0 var(--rust), .054em .072em 0 var(--rust),
     .0574em .0765em 0 var(--rust), .0607em .081em 0 var(--rust), .0641em .0855em 0 var(--rust), .0675em .09em 0 var(--rust),
     .0709em .0945em 0 var(--rust), .0742em .099em 0 var(--rust), .0776em .1035em 0 var(--rust), .081em .108em 0 var(--rust),
     .0844em .1125em 0 var(--rust), .0877em .117em 0 var(--rust), .0911em .1215em 0 var(--rust), .0945em .126em 0 var(--rust),
     .0979em .1305em 0 var(--rust), .1012em .135em 0 var(--rust), .1046em .1395em 0 var(--rust), .108em .144em 0 var(--rust),
     0 .16em .34em rgba(3,5,26,.6);
}

.d::before,
.shout-line::before{
  content:attr(data-t);
  position:absolute;
  inset:0;
  text-shadow:none;
  color:transparent;
  background-image:linear-gradient(180deg,
      var(--face-hi) 6%, var(--face) 48%, var(--face-lo) 100%);
  -webkit-background-clip:text;
          background-clip:text;
}

/* Sem contorno, a caixa do digito e o proprio avanco do algarismo: o
   espacamento passa a ser o que a fonte desenhou. */
.d{ display:inline-block; text-align:center; }

.unit-label{
  font-size:clamp(.66rem,2.1vw,.86rem);
  font-weight:600;
  letter-spacing:.10em;
  color:var(--peri);
  opacity:.72;
}

.when{
  margin:0;
  font-size:clamp(.8rem,2.5vw,.95rem);
  font-weight:500;
  color:var(--peri);
  opacity:.68;
}

/* --- acoes -------------------------------------------------------------- */

.actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:3.3rem;
  padding:0 clamp(1.1rem,3.6vw,1.7rem);
  border:0;
  border-radius:6px;
  font-family:inherit;
  font-size:clamp(.92rem,2.7vw,1.02rem);
  font-weight:700;
  letter-spacing:.012em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .11s ease, box-shadow .11s ease, background-color .16s ease;
}

.btn-mark{ width:1.3em; height:1.3em; flex:none; }

.btn-discord{
  background:var(--blurple);
  color:#fff;
  box-shadow:0 4px 0 var(--blurple-lo), 0 10px 20px rgba(4,7,34,.5);
}
.btn-discord:hover{ background:#6B79F6; }

.btn-ghost{
  background:rgba(143,156,242,.07);
  color:var(--peri-soft);
  border:2px solid rgba(143,156,242,.32);
  box-shadow:0 4px 0 rgba(27,35,100,.92);
}
.btn-ghost:hover{ background:rgba(143,156,242,.14); border-color:rgba(143,156,242,.5); }

.btn:active{
  transform:translateY(4px);
  box-shadow:0 0 0 rgba(0,0,0,0), 0 3px 9px rgba(4,7,34,.45);
}

/* --- IP ----------------------------------------------------------------- */

.ip-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
}

.ip-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

/* Atalhos dos clients: so existem depois da abertura. */
.client{
  display:none;
  align-items:center;
  gap:.5rem;
  padding:.55rem .95rem;
  border:2px solid rgba(143,156,242,.24);
  border-radius:6px;
  background:rgba(8,11,42,.55);
  color:var(--peri-soft);
  font-family:inherit;
  font-size:clamp(.84rem,2.5vw,.95rem);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.5;
  text-decoration:none;
  transition:border-color .16s ease, background-color .16s ease, transform .11s ease;
}
.client:hover{ border-color:rgba(143,156,242,.46); background:rgba(143,156,242,.09); }
.client:active{ transform:translateY(2px); }
.client-mark{ width:1.3em; height:1.3em; flex:none; object-fit:contain; }

.ip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.6rem .95rem;
  border:2px solid rgba(143,156,242,.24);
  border-radius:6px;
  background:rgba(8,11,42,.55);
  color:var(--peri-soft);
  font-family:inherit;
  font-size:clamp(.84rem,2.5vw,.95rem);
  font-weight:600;
  letter-spacing:.055em;
  /* folga suficiente para o "p" e o "g" de dropmc.gg nao serem cortados pelo
     overflow:hidden que a rolagem do rotulo exige */
  line-height:1.5;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background-color .16s ease;
}
.ip:hover{ border-color:rgba(143,156,242,.46); background:rgba(143,156,242,.09); }
.ip:active{ transform:translateY(2px); }

.ip.is-copied{
  border-color:var(--ok);
  color:var(--ok);
  background:rgba(245,216,154,.10);
  animation:chip-afunda .42s ease-out;
}

/* O rotulo troca por rolagem: o IP sobe e sai, a confirmacao entra por baixo.
   O grid empilha os dois na mesma celula, entao a largura do chip e sempre a do
   texto mais largo e nada pula no meio da transicao. */
.ip-label{
  display:grid;
  overflow:hidden;
  text-align:center;
}
.ip-label > *{
  grid-area:1/1;
  transition:transform .38s cubic-bezier(.22,1.25,.32,1), opacity .22s ease;
}
/* user-select:all faria um clique simples selecionar o IP inteiro — e o chip
   inteiro e clicavel, entao toda copia deixava o texto realcado no azul padrao
   do navegador. Com "text" so a selecao programatica do fallback realca, e ela
   realca na cor da marca. */
.ip-text{ user-select:text; }
.ip-text::selection{ background:var(--ok); color:var(--night); }
.ip-done{ transform:translateY(125%); opacity:0; }
.ip.is-copied .ip-text{ transform:translateY(-125%); opacity:0; }
.ip.is-copied .ip-done{ transform:translateY(0); opacity:1; }

/* O icone de copiar gira para fora enquanto o visto gira para dentro. */
.ip-icons{ display:grid; width:.95em; height:.95em; flex:none; }
.ip-icons > svg{
  grid-area:1/1;
  width:100%; height:100%;
  transition:transform .36s cubic-bezier(.22,1.5,.32,1), opacity .2s ease;
}
.ip-copy{ opacity:.6; }
.ip:hover .ip-copy{ opacity:.9; }
.ip-check{ transform:scale(.2) rotate(-30deg); opacity:0; }
.ip.is-copied .ip-copy{ transform:scale(.2) rotate(25deg); opacity:0; }
.ip.is-copied .ip-check{ transform:none; opacity:1; }

.ip-block{ width:1.2em; height:1.2em; flex:none; }
.ip.is-copied .ip-block{ animation:bloco-pula .52s cubic-bezier(.25,1.4,.4,1); }

@keyframes chip-afunda{
  0%  { transform:translateY(0);   }
  20% { transform:translateY(3px); }
  100%{ transform:translateY(0);   }
}

@keyframes bloco-pula{
  0%  { transform:translateY(0)    scale(1)    rotate(0);      }
  32% { transform:translateY(-6px) scale(1.25) rotate(-12deg); }
  100%{ transform:translateY(0)    scale(1)    rotate(0);      }
}

.version{
  font-size:clamp(.74rem,2.2vw,.84rem);
  font-weight:500;
  letter-spacing:.03em;
  color:var(--peri);
  opacity:.6;
}

/* --- servidor aberto ---------------------------------------------------- */

/* O aviso de abertura usa o mesmo desenho de bloco dos digitos, entao ocupa o
   lugar do cronometro sem trocar a linguagem da pagina. */
.shout{
  display:none;
  margin:0;
  font-size:clamp(1.75rem, min(11vw, 14.5vh), 5.6rem);
  font-variation-settings:'wdth' 118,'wght' 900;
  line-height:.98;
  padding-right:.09em;   /* compensa a extrusao, igual aos digitos */
}
.shout-line{ display:block; }

body.is-open .lede,
body.is-open .clock,
body.is-open .when{ display:none; }

body.is-open .shout{ display:block; }
body.is-open .client{ display:inline-flex; }

body.is-open .ip{ border-color:var(--ok); color:var(--ok); }

/* --- foco --------------------------------------------------------------- */

.btn:focus-visible,
.client:focus-visible,
.ip:focus-visible{
  outline:3px solid var(--ok);
  outline-offset:3px;
}

/* --- o drop: uma unica sequencia de entrada ----------------------------- */

@keyframes drop{
  from{ transform:translateY(-42px); opacity:0; }
  to  { transform:translateY(0);     opacity:1; }
}

.logo,.countdown,.actions,.ip-row{
  animation:drop .52s cubic-bezier(.2,1.42,.36,1) backwards;
}
.logo     { animation-delay:0s;   }
.countdown{ animation-delay:.09s; }
.actions  { animation-delay:.17s; }
.ip-row   { animation-delay:.24s; }

/* --- telas estreitas e paisagem ----------------------------------------- */

@media (max-width:430px){
  .actions{ flex-direction:column; align-self:stretch; }

  /* Com o IP ocupando a linha inteira, os dois clients caem juntos na linha de
     baixo, em vez de um deles sobrar sozinho. */
  .ip-group{ align-self:stretch; gap:.45rem; }
  body.is-open .ip{ flex-basis:100%; }
  body.is-open .client{ flex:1 1 0; justify-content:center; }
}

@media (max-height:560px) and (orientation:landscape){
  .stage{ gap:.6rem; padding-bottom:var(--shell); }
  .logo{ width:clamp(150px,20vw,250px); }
  .ground{ display:none; }
  .countdown{ gap:.45rem; }
  .unit{ gap:.42rem; }
  .clock{ font-size:clamp(1.7rem,min(7.2vw,19vh),3.6rem); }
  .shout{ font-size:clamp(1.5rem,min(7vw,17vh),3.2rem); }
  .btn{ min-height:2.85rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}