/* Livihub · livihub.app
   A page with no scroll: the brand, the words of the app and a phone with the app blurred behind "Em breve".
   Light theme in :root, dark (OLED black) under prefers-color-scheme. Font: Instrument Sans 400/500/600. */

:root {
  --bg: #F5F6F8;
  --ink: #101318;
  --muted: #5F6672;
  --line: #E7E9EE;
  --red: #B23E47;
  --sym-core: #14171C;
  --glass: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.95);
  --shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 28px -20px rgba(16,19,24,0.25);
  --shine-base: #101318;
  --shine: #5C6370;
  --shine-red: #CF6E76;
  --ease: cubic-bezier(.2,.8,.2,1);
  --rim: rgba(16,19,24,0.10);
  --veil: rgba(10,12,15,0.68);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --ink: #FFFFFF;
    --muted: #9E9E9E;
    --line: #262626;
    --sym-core: #FFFFFF;
    --glass: rgba(22,22,22,0.9);
    --glass-border: rgba(255,255,255,0.07);
    --shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    --shine-base: rgba(255,255,255,0.84);
    --shine: #FFFFFF;
    --shine-red: #D9787F;
    --rim: rgba(255,255,255,0.14);
    --veil: rgba(0,0,0,0.62);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) clamp(20px, 5vw, 56px) max(24px, env(safe-area-inset-bottom));
}

/* Marca */
.logo {
  display: block; align-self: flex-start; width: auto; color: var(--ink);
  height: clamp(30px, 5.4vh, 46px);
  margin-bottom: clamp(28px, 7vh, 64px);
  opacity: 0;
  animation: rise .7s var(--ease) 0s both;
}

/* Centro */
main { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.words {
  font-weight: 500;
  font-size: clamp(40px, min(8.4vh, 12.5vw), 88px);
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.w {
  display: flex; align-items: center; gap: 0.2em;
  width: fit-content;
  opacity: 0;
  animation: rise .7s var(--ease) both;
}
.w svg {
  width: 0.5em; height: 0.5em; flex: 0 0 auto;
  stroke: var(--red); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transform: scale(0);
  animation: pop .5s var(--ease) forwards;
}
.red { color: var(--red); margin-top: 0.14em; }
.sh {
  background-image: linear-gradient(100deg, var(--b) 0%, var(--b) 34%, var(--h) 50%, var(--b) 66%, var(--b) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sh.ink { --b: var(--shine-base); --h: var(--shine); }
.sh.redc { --b: var(--red); --h: var(--shine-red); }
.w svg { -webkit-text-fill-color: initial; }

.who {
  margin-top: clamp(14px, 2.6vh, 24px);
  font-size: clamp(17px, 2.5vh, 22px); font-weight: 500; letter-spacing: -0.03em;
  color: var(--muted);
  opacity: 0;
  animation: rise .7s var(--ease) 1.75s both;
}

.soon {
  margin-top: clamp(18px, 3.2vh, 28px);
  display: none; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--red);
  opacity: 0;
  animation: rise .7s var(--ease) 1.9s both;
}
/* Celular */
main { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
.copy { display: flex; flex-direction: column; min-width: 0; }
.phone {
  flex: 0 0 auto;
  height: min(66vh, 600px);
  aspect-ratio: 410 / 864;
  padding: 8px;
  border-radius: 46px;
  background: #0B0C0E;
  box-shadow: 0 0 0 1.5px var(--rim), 0 40px 80px -40px rgba(16,19,24,0.45);
  opacity: 0;
  animation: rise .9s var(--ease) .5s both;
}
.screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bg); }
.shot, .shot img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; }
.shot img { inset: 0; width: 100%; height: 100%; }
.island { position: absolute; top: 2.3%; left: 50%; width: 31%; height: 4.1%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--veil);
  color: #FFFFFF;
  gap: 14px;
  font-size: clamp(24px, 4vh, 34px); font-weight: 500; letter-spacing: -0.045em;
}
.veil-in { display: inline-flex; align-items: center; gap: inherit; }
.veil .dot { width: 10px !important; height: 10px !important; }
.veil .dot, .soon .dot { position: relative; width: 9px; height: 9px; border-radius: 999px; background: var(--red); }
.veil .dot::after, .soon .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: inherit;
  animation: pulse 2.4s var(--ease) 1.6s infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .5 } 70%, 100% { transform: scale(2.8); opacity: 0 } }
.soon { display: none; }

@media (max-width: 860px) {
  .page { padding-bottom: 0; grid-template-rows: 1fr; overflow: hidden; }
  main {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: clamp(28px, 5vh, 44px);
    padding-top: clamp(8px, 4vh, 40px);
  }
  .phone {
    align-self: center;
    height: auto;
    width: min(76vw, 310px);
    flex: 0 0 auto;
    box-shadow: 0 0 0 1.5px var(--rim), 0 -10px 40px -24px rgba(16,19,24,0.35);
  }
  .veil { align-items: flex-start; }
  .veil-in { margin-top: var(--vy, 62%); }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(0) } 70% { transform: scale(1.2) } 100% { transform: scale(1) } }
@keyframes shine { 0% { background-position: 100% 0 } 82%, 100% { background-position: 0% 0 } }

/* Rodapé */
footer {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px; letter-spacing: 0.01em; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .w, .logo, .soon, .phone, .who { opacity: 1; }
  .w svg { transform: none; }
}
@media (max-width: 860px) { footer { display: none; } }