:root{
  --ink: #f2f4f8;
  --ink-dim: #b7c0cf;
  --line: rgba(242,244,248,0.18);
  --vh: 1vh;
}

*{
  box-sizing: border-box;
}

html, body{
  margin:0;
  padding:0;
  background:#05070d;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body{
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);

  background-image: url('../images/logooriginal01.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  position:relative;

  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Overlay para garantir contraste do texto sobre a imagem
   em qualquer proporção de tela */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(5,7,13,0) 0%,
    rgba(5,7,13,0) 40%,
    rgba(5,7,13,0.55) 66%,
    rgba(5,7,13,0.92) 87%,
    rgba(5,7,13,1) 100%
  );
  pointer-events:none;
  z-index:1;
}

.panel{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 6vh clamp(1.25rem, 6vw, 4rem) clamp(2rem, 6vh, 3.5rem);
  animation: rise 1.8s ease-out both;
}

@keyframes rise{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

.relato{
  font-family:'EB Garamond', serif;
  font-style: italic;
  font-weight:400;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 0 0 clamp(1.5rem, 3vh, 2.2rem) 0;
}

.divider{
  width: 40px;
  height: 1px;
  background: var(--line);
  margin: 0 0 clamp(1.2rem, 2.5vh, 1.8rem) 0;
}

.status{
  display:flex;
  align-items:center;
  gap: 0.6rem;
  font-size: clamp(0.62rem, 1.6vw, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.dot{
  width:5px; height:5px;
  border-radius:50%;
  background: #7fa0c9;
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink:0;
}

@keyframes pulse{
  0%,100%{ opacity:0.35; }
  50%{ opacity:1; }
}

footer{
  position:relative;
  z-index:2;
  padding-bottom: max(3vh, env(safe-area-inset-bottom));
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(183,192,207,0.5);
  text-align:center;
}

@media (max-width: 640px){
  body{ background-position: center 22%; }
}

@media (prefers-reduced-motion: reduce){
  .panel{ animation:none; }
  .dot{ animation:none; }
}