:root {
  --ouro: #d8b56f;
  --ouro-claro: #f7dda1;
  --texto: #f4e8ca;
  --fundo: #050706;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--fundo); color: var(--texto); font-family: Georgia, "Times New Roman", serif; }
button { font: inherit; }

.tela-inicial { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 500px; overflow: hidden; isolation: isolate; background: var(--fundo); }
.cenario { --camera-x: 0px; --camera-y: 0px; position: absolute; inset: -6%; z-index: 0; background: url("bemvindo.png") center/cover no-repeat; transform: translate3d(var(--camera-x), var(--camera-y), 0) scale(1.05); transform-origin: center; will-change: transform, filter, opacity; animation: entrada-cenario 2.2s ease-out forwards, respirar-cenario 20s ease-in-out 2.2s infinite alternate; }
.vinheta { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.05) 35%, rgba(0,0,0,.3) 68%, rgba(0,0,0,.84)), radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,.55) 115%); }
.particulas { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.particula { position: absolute; border-radius: 50%; background: #ffdc91; box-shadow: 0 0 6px #ffd986, 0 0 14px rgba(255,217,134,.8); opacity: 0; animation: subir-particula linear infinite; }

.conteudo { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 900px); height: 100%; margin: auto; padding: max(24px, env(safe-area-inset-top)) 24px max(135px, calc(env(safe-area-inset-bottom) + 110px)); text-align: center; opacity: 0; animation: entrada-interface 1.5s ease-out .35s forwards; }
.marca { width: 100%; }
.titulo { margin: 0; color: #f3e3bd; font-size: clamp(4.2rem, 12vw, 9.5rem); font-weight: 500; line-height: .9; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 2px #74552d, 0 4px 6px #000, 0 12px 35px #000; }
.ornamento, .linha-rodape { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ornamento { width: min(82%, 580px); margin: 24px auto; }
.ornamento span, .linha-rodape span { height: 2px; background: linear-gradient(to right, transparent, rgba(243,213,144,.95), transparent); box-shadow: 0 0 8px rgba(243,213,144,.35); }
.ornamento span { flex: 1; }
.ornamento i, .linha-rodape i { color: #ffe7a8; font-style: normal; text-shadow: 0 0 6px #ffdf91, 0 0 16px rgba(255,221,145,.9); }
.subtitulo { margin: 0; color: #f2dfb8; font-size: clamp(1rem, 3vw, 1.7rem); line-height: 1.5; letter-spacing: .025em; text-shadow: 0 2px 4px #000, 0 5px 14px #000; }

.botao-jornada { appearance: none; position: relative; display: flex; align-items: center; justify-content: center; width: min(90%, 540px); min-height: 78px; margin-top: clamp(55px, 9vh, 105px); padding: 17px 58px; border: 2px solid var(--ouro); border-radius: 3px; color: var(--ouro-claro); background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.01)), rgba(10,9,7,.94); box-shadow: 0 0 0 3px #070605, 0 0 0 4px rgba(216,181,111,.85), 0 12px 32px rgba(0,0,0,.85), inset 0 0 28px rgba(216,181,111,.1); cursor: pointer; touch-action: manipulation; transition: transform 160ms ease, filter 160ms ease; animation: respirar-botao 3.6s ease-in-out infinite; }
.botao-jornada::before, .botao-jornada::after { content: "◇"; position: absolute; top: 50%; color: #ffe7a8; font-size: 1.25rem; transform: translateY(-50%); text-shadow: 0 0 5px #ffdf91; }
.botao-jornada::before { left: 18px; } .botao-jornada::after { right: 18px; }
.botao-jornada span { font-size: clamp(1.15rem, 3vw, 1.75rem); font-weight: 500; letter-spacing: .055em; text-transform: uppercase; text-shadow: 0 2px 3px #000; }
.botao-jornada:hover { animation-play-state: paused; filter: brightness(1.18); transform: translateY(-2px); }
.botao-jornada:active { animation-play-state: paused; transform: translateY(1px) scale(.975); }
.botao-jornada:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
.botao-jornada:disabled { animation: none; cursor: wait; opacity: .8; }
.status { min-height: 1.4em; margin: 18px 0 0; color: #ffb4aa; font: 600 .85rem/1.4 system-ui, sans-serif; text-shadow: 0 2px 4px #000; }

.rodape { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 4; width: min(calc(100% - 40px), 620px); text-align: center; transform: translateX(-50%); opacity: 0; animation: entrada-rodape 1.4s ease-out .75s forwards; }
.linha-rodape { gap: 12px; margin-bottom: 16px; }
.linha-rodape span { width: min(35%, 190px); }
.assinatura { display: flex; align-items: center; justify-content: center; gap: 12px; color: #e4c888; letter-spacing: .17em; text-shadow: 0 2px 4px #000; }
.assinatura strong { font-size: clamp(.9rem, 2.3vw, 1.25rem); font-weight: 500; } .assinatura small { font-size: clamp(.75rem, 1.8vw, .95rem); letter-spacing: .04em; }

.jornada { position: absolute; inset: 0; z-index: 10; overflow-y: auto; padding: max(34px, env(safe-area-inset-top)) 22px max(34px, env(safe-area-inset-bottom)); color: #f0e5cc; background: radial-gradient(circle at top, #171812, #030403 64%); }
.jornada[hidden] { display: none; }
.cena { width: min(100%, 720px); margin: auto; opacity: 0; animation: aparecer-prologo 1.2s ease forwards; }
.cena-contexto { margin: 0 0 10px; color: var(--ouro); font: 600 .75rem/1.4 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.cena h2 { margin: 0 0 24px; color: #f3e3bd; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 500; }
.cena-texto { white-space: pre-line; font-size: clamp(1.08rem, 3.4vw, 1.35rem); line-height: 1.7; text-shadow: 0 2px 4px #000; }
.cena-prompt { margin: 26px 0 0; color: var(--ouro-claro); font-size: 1.1rem; font-weight: 700; }
.cena-transicoes { display: grid; gap: 14px; margin-top: 34px; }
.cena-transicoes form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.cena-transicoes input { min-width: 0; padding: 14px; border: 1px solid #81704e; border-radius: 3px; color: #fff; background: #0a0907; font: inherit; }
.erro-cena { margin: 0; color: #ffb4aa; font: 600 .9rem/1.4 system-ui, sans-serif; }
.cena-transicoes button { width: 100%; padding: 15px 18px; border: 1px solid var(--ouro); border-radius: 3px; color: var(--ouro-claro); background: rgba(10,9,7,.9); text-align: left; cursor: pointer; }
.cena-transicoes button:disabled { border-color: #5d5544; color: #8c8370; cursor: not-allowed; }
.saindo .conteudo { pointer-events: none; animation: sair-interface 1.1s ease forwards; }
.saindo .rodape { pointer-events: none; animation: sair-rodape 1.1s ease forwards; }
.saindo .particulas { animation: desaparecer 900ms ease forwards; }
.saindo .cenario { animation: aproximar-cenario 1.4s ease forwards; }
.saindo .vinheta { animation: escurecer 1.3s ease forwards; }
.saindo .nevoa { animation: desaparecer 1s ease forwards; }

.nevoa { position: absolute; inset: -20%; z-index: 1; pointer-events: none; opacity: .16; background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.25), transparent 42%), radial-gradient(ellipse at 70% 65%, rgba(255,255,255,.18), transparent 45%); filter: blur(28px); will-change: transform; }
.nevoa-1 { animation: mover-nevoa-1 34s linear infinite alternate; }
.nevoa-2 { opacity: .1; animation: mover-nevoa-2 46s linear infinite alternate; }

@keyframes entrada-cenario { from { opacity: 0; transform: translate3d(var(--camera-x),var(--camera-y),0) scale(1.12); filter: blur(6px) brightness(.72); } to { opacity: 1; transform: translate3d(var(--camera-x),var(--camera-y),0) scale(1.05); filter: blur(0) brightness(1); } }
@keyframes respirar-cenario { to { transform: translate3d(var(--camera-x),var(--camera-y),0) scale(1.075); filter: brightness(1.02) saturate(1.02); } }
@keyframes entrada-interface { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes entrada-rodape { from { opacity: 0; transform: translate(-50%,12px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes respirar-botao { 50% { filter: brightness(1.1); box-shadow: 0 0 0 3px #070605, 0 0 0 4px rgba(245,209,137,.95), 0 12px 34px rgba(0,0,0,.88), 0 0 32px rgba(216,181,111,.28), inset 0 0 32px rgba(216,181,111,.16); } }
@keyframes subir-particula { 0% { opacity: 0; transform: translateY(30px) scale(.5); } 15%,80% { opacity: var(--opacidade); } 100% { opacity: 0; transform: translate(35px,-120px) scale(1.2); } }
@keyframes sair-interface { to { opacity: 0; filter: blur(7px); transform: scale(1.025); } }
@keyframes sair-rodape { to { opacity: 0; filter: blur(7px); transform: translateX(-50%) scale(1.025); } }
@keyframes desaparecer { to { opacity: 0; } }
@keyframes aproximar-cenario { to { transform: translate3d(var(--camera-x),var(--camera-y),0) scale(1.18); filter: blur(5px) brightness(.3); } }
@keyframes escurecer { to { background: #000; } }
@keyframes aparecer-prologo { from { opacity: 0; filter: blur(4px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes mover-nevoa-1 { from { transform: translate3d(-8%,2%,0) scale(1.1); } to { transform: translate3d(12%,-3%,0) scale(1.22); } }
@keyframes mover-nevoa-2 { from { transform: translate3d(10%,-4%,0) scale(1.2); } to { transform: translate3d(-12%,6%,0) scale(1.35); } }

@media (orientation: portrait) { .cenario { background-position: 82% center; } .conteudo { padding-top: 8vh; padding-bottom: 145px; } .titulo { font-size: clamp(4rem,20vw,7rem); } }
@media (max-width: 480px) { .conteudo { padding-inline: 16px; } .ornamento { margin-block: 17px; } .subtitulo { max-width: 320px; margin-inline: auto; } .botao-jornada { width: 94%; min-height: 67px; padding-inline: 42px; } .botao-jornada::before { left: 12px; } .botao-jornada::after { right: 12px; } }
@media (max-height: 700px) { .conteudo { padding-top: 15px; padding-bottom: 105px; } .titulo { font-size: clamp(3.5rem,14vh,6rem); } .ornamento { margin-block: 12px; } .botao-jornada { min-height: 58px; margin-top: 30px; } .rodape { bottom: 12px; } .linha-rodape { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

/* O WebView do Telegram pode renderizar como preta uma camada grande que combina
   background, filter, transform animado e will-change. Mantém o fundo estável ali. */
.telegram-mini-app .cenario { animation: none; filter: none; transform: none; will-change: auto; }