:root{
  --bg:#0a0e0d;
  --fg:#f4f6f5;
  --muted:#a7b0ac;
  --line:rgba(255,255,255,.14);
  --accent:#e3b45a;
  --accent-soft:rgba(227,180,90,.16);
  --mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

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

html{ background:var(--bg); }
html, body{
  height:100%;
  width:100%;
  overflow:hidden;                /* página não rolável */
  overscroll-behavior:none;
  color:var(--fg);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}

/* ---------------- FUNDO EM VÍDEO (o mesmo do cjc.pics) ---------------- */
/* pointer-events:none também faz o selo enxergar o fundo escuro da página, e não o vídeo */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--bg); pointer-events:none; }
.bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:kenburns 32s ease-in-out infinite alternate;
  filter:saturate(.92) contrast(1.02);
  opacity:0;
  transition:opacity var(--fade, .9s) linear;   /* crossfade do loop */
  will-change:opacity;
}
.bg video.show{ opacity:1; }
@keyframes kenburns{
  from{ transform:scale(1.06) translate(0,0); }
  to{ transform:scale(1.14) translate(-1.5%,-1%); }
}

/* Escurece o vídeo e dá profundidade, mantendo o texto legível */
.grade{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% 50%, rgba(6,9,8,.38), transparent 75%),
    linear-gradient(180deg, rgba(6,9,8,.62) 0%, rgba(6,9,8,.28) 36%, rgba(6,9,8,.42) 70%, rgba(6,9,8,.82) 100%),
    linear-gradient(90deg, rgba(6,9,8,.62) 0%, rgba(6,9,8,.12) 48%, rgba(6,9,8,.0) 100%);
}
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 42%, rgba(4,6,5,.55) 100%);
  mix-blend-mode:multiply;
}
/* Brilho âmbar no canto onde fica o selo */
.glow{
  position:fixed; z-index:2; pointer-events:none;
  width:70vmax; height:70vmax; right:-30vmax; bottom:-34vmax;
  background:radial-gradient(circle, var(--accent-soft), transparent 60%);
  filter:blur(10px);
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.1); } }
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- ESTRUTURA ---------------- */
.shell{
  position:relative;
  z-index:10;
  height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  padding:clamp(20px, 3.5vw, 40px);
  padding-bottom:max(44px, clamp(20px, 3.5vw, 40px));   /* espaço para o selo no canto */
}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:600; letter-spacing:.24em; font-size:13px; text-transform:uppercase;
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.brand small{ color:var(--muted); font-weight:400; letter-spacing:.16em; }
.status{
  font-family:var(--mono);
  font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.status b{ color:var(--accent); font-weight:600; }
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.center{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  max-width:760px;
  margin:0 auto;
  width:100%;
}
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:22px;
  animation:rise .7s ease both;
}
.eyebrow::before,
.eyebrow::after{ content:""; width:34px; height:1px; background:var(--accent); opacity:.8; }

h1{
  font-weight:600;
  font-size:clamp(34px, 6.4vw, 64px);
  line-height:1.04;
  letter-spacing:-.03em;
  max-width:17ch;
  text-wrap:balance;
  animation:rise .8s .05s ease both;
}
h1 em{ font-style:normal; color:var(--accent); }

.lead{
  margin:22px auto 0;
  font-size:clamp(15px, 1.9vw, 18.5px);
  line-height:1.6;
  color:#dfe4e1;
  max-width:54ch;
  text-wrap:pretty;
  animation:rise .8s .12s ease both;
}
.lead strong{ color:#fff; font-weight:600; }
.lead code{ font-family:var(--mono); color:var(--accent); font-size:.92em; }

/* Endereço do script */
.addr{
  margin-top:30px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  animation:rise .8s .18s ease both;
}
.addr .box{
  font-family:var(--mono);
  font-size:clamp(14px, 2.2vw, 18px);
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  letter-spacing:.02em;
  white-space:nowrap;
}
.addr .proto{ color:var(--muted); }
.addr .host{ color:#fff; }
.addr .file{ color:var(--accent); border-bottom:1.5px dashed var(--accent); padding-bottom:1px; }
.addr .hint{ font-size:13px; color:var(--muted); max-width:46ch; line-height:1.5; text-wrap:balance; }
.addr .hint b{ color:var(--fg); font-weight:600; }

.actions{
  margin-top:34px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  animation:rise .8s .24s ease both;
}
.btn{
  font:inherit;
  font-size:15px; font-weight:500;
  padding:15px 26px;
  border-radius:10px;
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn svg{ width:16px; height:16px; }
.btn-primary{
  border:0;
  background:var(--accent); color:#1a1305; font-weight:600;
  box-shadow:0 14px 34px -14px rgba(227,180,90,.7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(227,180,90,.85); }
.btn-ghost{
  color:var(--fg); border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.07); }
.btn[hidden]{ display:none; }
.btn:focus-visible, .foot a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Rodapé: créditos à esquerda, anotação apontando o selo à direita */
.foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); letter-spacing:.02em;
}
.foot a{ color:var(--fg); text-decoration:none; }
.foot a:hover{ color:var(--accent); }
.foot .sep{ opacity:.4; }
/* Link para a página de projetos: presente, mas sem chamar atenção */
.foot a.discreto{ color:var(--muted); opacity:.6; }
.foot a.discreto:hover{ color:var(--accent); opacity:1; }
.pointer{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.06em;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
  margin-right:clamp(20px, 5vw, 64px);
  white-space:nowrap;
}
.pointer svg{ width:26px; height:26px; margin-bottom:-18px; animation:nudge 2.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(3px,3px); } }

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

/* ---------------- Responsivo ---------------- */
@media (max-width:640px){
  .shell{ padding:22px 20px calc(46px + env(safe-area-inset-bottom)); }

  .brand{ font-size:12px; letter-spacing:.18em; gap:9px; }
  .brand small{ display:none; }
  .status{ font-size:10.5px; letter-spacing:.04em; }
  .status .txt{ display:none; }

  .eyebrow{ margin-bottom:16px; font-size:11px; letter-spacing:.22em; }
  .eyebrow::before, .eyebrow::after{ width:22px; }
  h1{ font-size:clamp(30px, 8.6vw, 40px); line-height:1.05; max-width:13ch; }
  .lead{ margin-top:16px; font-size:15px; line-height:1.55; }

  .addr{ margin-top:22px; align-items:stretch; gap:10px; }
  .addr .box{ width:100%; white-space:normal; font-size:14px; text-align:center; padding:12px 14px; }
  .addr .box > span{ white-space:nowrap; }
  .addr .hint{ max-width:none; font-size:12.5px; }

  .actions{ margin-top:22px; width:100%; gap:10px; flex-wrap:nowrap; }
  .btn{ flex:1 1 0; justify-content:center; padding:14px 12px; font-size:14px; }
  .btn .long{ display:none; }

  .foot{ align-items:flex-end; font-size:11.5px; padding-top:14px; }
  .foot .credits{ display:flex; flex-direction:column; gap:4px; }
  .foot .credits .sep{ display:none; }
  .pointer{ font-size:11px; margin-right:18px; }
  .pointer svg{ margin-bottom:0; }
  .pointer .label{ display:none; }
}

@media (max-width:360px){
  h1{ font-size:27px; }
  .lead{ font-size:14px; }
}

/* Telas baixas (telefone deitado, notebook pequeno): compacta para não cortar nada */
@media (max-height:720px){
  .eyebrow{ margin-bottom:14px; }
  .lead{ margin-top:14px; }
  .addr{ margin-top:18px; }
  .actions{ margin-top:20px; }
}
@media (max-height:560px){
  .center{ justify-content:flex-start; padding-top:8px; }
  .eyebrow, .addr .hint{ display:none; }
  h1{ font-size:clamp(24px, 5.6vw, 36px); max-width:none; }
  .lead{ font-size:14px; line-height:1.5; }
  .btn{ padding:11px 18px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .bg video{ transform:scale(1.08); }
}