/* =========================================================
   style.css — Oscar Indica (Entrada)
   Base clean + premium + shadow no bloco de idiomas
========================================================= */

:root{
  --accent:#18BFD6;
  --font-display:"Fraunces", serif;
  --font-sans:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text:#ffffff;
  --veil: rgba(255,255,255,.18);

  --glass: rgba(0,0,0,.22);
  --glass-border: rgba(255,255,255,.25);

  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  --shadow-md: 0 10px 25px rgba(0,0,0,.18);
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-sans);
  color:var(--text);
  overflow:hidden;
  position:relative;
}

/* IMAGEM DE FUNDO */
body::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/assets/img/ponta-verde.jpg") center/cover no-repeat;
  z-index:-3;
  transform:scale(1.02);
}

/* OVERLAY: escurece levemente + glow azul */
body::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42)),
    radial-gradient(circle at 20% 10%, rgba(24,191,214,.16), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(24,191,214,.10), transparent 55%);
  z-index:-2;
}

/* VEIL CLARO (para “branquear” o fundo e destacar a logo) */
.veil{
  position:absolute;
  inset:0;
  background:var(--veil); /* aumente para rgba(255,255,255,.22) se quiser mais branco */
  z-index:-1;
}

/* CONTAINER CENTRAL */
.center{
  width:min(860px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:28px;                  /* um pouco mais “tight” */
  transform:translateY(-18px);
  animation:fadeIn 1.1s ease forwards;
}

/* LOGO */
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo img{
  width:360px;
  max-width:86vw;
  height:auto;
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(24,191,214,.22));
}

/* BLOCO DOS IDIOMAS (AGORA COM SOMBRA) */
.languages{
  display:flex;
  gap:16px;
  margin-top:2px;

  padding:18px 26px;
  border-radius:40px;

  background:var(--glass);
  border:1px solid var(--glass-border);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
    var(--shadow-lg),
    0 0 40px rgba(24,191,214,.14);
}

/* BOTÕES */
.lang{
  padding:14px 30px;
  border-radius:28px;

  border:1px solid rgba(255,255,255,.45);
  background:transparent;

  color:#fff;
  font-weight:600;
  text-decoration:none;
  letter-spacing:.2px;

  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.lang:hover{
  transform:translateY(-3px);
  background:rgba(24,191,214,.40);
  border-color:rgba(24,191,214,.75);
}

/* Acessibilidade: foco no teclado */
.lang:focus-visible{
  outline:2px solid rgba(24,191,214,.95);
  outline-offset:3px;
}

/* ANIMAÇÃO */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

/* Preferência do usuário: reduzir animações */
@media (prefers-reduced-motion: reduce){
  .center{animation:none; transform:translateY(-18px)}
  .lang{transition:none}
}

/* RESPONSIVO */
@media(max-width:700px){
  .center{
    gap:20px;
    transform:translateY(-10px);
  }

  .logo img{
    width:280px;
  }

  .languages{
    flex-direction:column;
    gap:12px;
    padding:14px 16px;
    border-radius:26px;
  }

  .lang{
    width:min(320px, 86vw);
    text-align:center;
  }
}