/* Renderizador compartilhado — fontes carregadas via <link> do Google Fonts nas páginas */
.dn-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.dn-stage { position: absolute; transform-origin: 0 0; }
.dn-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.dn-bgimg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; }
.dn-bgimg.kb { animation: dn-kenburns 22s ease-in-out infinite alternate; }
.dn-dim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.dn-el { position: absolute; }
.dn-a, .dn-b { width: 100%; height: 100%; }
.dn-text { width: 100%; height: 100%; display: flex; flex-direction: column; white-space: pre-wrap; word-break: break-word; overflow: hidden; box-sizing: border-box; }
.dn-img { width: 100%; height: 100%; display: block; box-sizing: border-box; user-select: none; -webkit-user-drag: none; }
.dn-shape { width: 100%; height: 100%; box-sizing: border-box; }

/* entradas — todas com easing suave definido no JS */
@keyframes dn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dn-slideup { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@keyframes dn-slidedown { from { opacity: 0; transform: translateY(-90px); } to { opacity: 1; transform: none; } }
@keyframes dn-slideleft { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes dn-slideright { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes dn-zoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dn-blur { from { opacity: 0; filter: blur(24px); transform: scale(1.06); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes dn-bounce { 0% { opacity: 0; transform: translateY(120px) scale(.9); } 60% { opacity: 1; transform: translateY(-18px) scale(1.02); } 100% { transform: none; } }
@keyframes dn-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* loops */
@keyframes dn-l-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes dn-l-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes dn-l-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes dn-l-spin { to { transform: rotate(360deg); } }
@keyframes dn-l-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes dn-kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }

/* ---------- mockup do celular (palco de 1920x1080 ou 1080x1920) ---------- */
.dn-ig-scene { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 150px; font-family: "Inter", "Segoe UI", Arial, sans-serif; }
.dn-ig-scene.portrait { flex-direction: column; gap: 60px; }
.dn-ig-scene.portrait .ig-phone { transform: scale(1.45); }
.dn-ig-scene.portrait .ig-phone-anim { margin: 225px 0; }
.ig-phone { width: 560px; height: 1000px; border-radius: 92px; padding: 14px; background: #0b0b0d; box-shadow: 0 0 0 3px #3a3a40, 0 50px 120px rgba(0,0,0,.55), inset 0 0 0 2px #1d1d22; }
.ig-screen { position: relative; width: 100%; height: 100%; border-radius: 80px; background: #000; color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.ig-status { height: 56px; flex: none; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 6px; }
.ig-island { width: 150px; height: 38px; border-radius: 20px; background: #000; box-shadow: 0 0 0 2px #151518; }
.ig-head { height: 92px; flex: none; display: flex; align-items: center; gap: 18px; padding: 0 24px; font-size: 27px; }
.ig-head b { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-av { width: 58px; height: 58px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; overflow: hidden;
  background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); box-shadow: 0 0 0 3px #000, 0 0 0 5px #dc2743; }
.ig-av img { width: 100%; height: 100%; object-fit: cover; }
.ig-more { letter-spacing: 2px; opacity: .8; }
.ig-media { width: 100%; height: 532px; flex: none; background: #151515; overflow: hidden; }
.ig-media img, .ig-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-actions { height: 78px; flex: none; display: flex; align-items: center; gap: 24px; padding: 0 24px; }
.ig-actions .sp { flex: 1; }
.ig-cap { padding: 0 26px; font-size: 25px; line-height: 1.38; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.ig-cap b { font-weight: 600; }
.ig-date { padding: 12px 26px 0; font-size: 18px; opacity: .55; letter-spacing: .5px; }
.ig-home { position: absolute; bottom: 14px; left: 50%; width: 190px; height: 7px; margin-left: -95px; border-radius: 4px; background: #fff; opacity: .85; }

.ig-cta { max-width: 760px; }
.ig-cta-t { font-size: 96px; font-weight: 800; line-height: 1.05; text-shadow: 0 6px 30px rgba(0,0,0,.3); }
.ig-cta-u { margin-top: 28px; font-size: 54px; font-weight: 600; opacity: .92; }
.portrait .ig-cta { text-align: center; max-width: 900px; }
.portrait .ig-cta-t { font-size: 84px; }