/* Tema "celular que acende": so a cena. Usada na abertura da home (.c3d-home) e em projetos/3d-celular.html.
   Base: /assets/site.css. Sem JavaScript: o <noscript> no <head> de cada pagina empilha tudo. */

/* ── Cena presa na tela enquanto a rolagem conduz o celular ── */
.c3d { position: relative; height: 520vh; padding: 0; }
.c3d-home { height: 440vh; }
.c3d-modelo { height: 420vh; }
/* Na home o hero vem logo depois: o fundo dele entra em degrade, sem emenda reta. */
.c3d-home + .hero .hero-bg { mask-image: linear-gradient(transparent, #000 220px); -webkit-mask-image: linear-gradient(transparent, #000 220px); }
.c3d-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.c3d-grade {
  position: absolute; inset: -1px; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000 15%, transparent 72%);
}
.c3d-glow {
  position: absolute; left: 70%; top: 50%; width: 78vmin; height: 78vmin; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .22;
  background: radial-gradient(circle, var(--c3d-glow-1, rgba(139,92,246,.5)) 0%, var(--c3d-glow-2, rgba(124,58,237,.2)) 38%, transparent 68%);
}
#c3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease); }
.c3d-ok #c3d-canvas { opacity: 1; }

/* Imagem de reserva: aparece enquanto o 3D carrega e fica se o aparelho nao tiver WebGL. */
.c3d-poster {
  position: absolute; left: 70%; top: 50%; width: min(62vmin, 520px); transform: translate(-50%, -50%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  transition: opacity .6s var(--ease);
}
.c3d-ok .c3d-poster { opacity: 0; visibility: hidden; }

.c3d-loader {
  position: absolute; left: 70%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: grid; justify-items: center; gap: 14px; padding: 22px 26px; border-radius: 18px; white-space: nowrap;
  background: var(--c3d-painel, rgba(5,5,7,.78)); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  transition: opacity .5s, visibility .5s;
}
.c3d-loader i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent-soft); animation: c3d-gira 0.9s linear infinite; }
.c3d-loader.fora { opacity: 0; visibility: hidden; }
@keyframes c3d-gira { to { transform: rotate(360deg); } }

/* Textos sobre a cena. O script liga cada um na sua faixa de rolagem; antes dele, so o primeiro aparece. */
.c3d-hud { position: absolute; inset: 0; pointer-events: none; }
.c3d-hud .wrap { position: relative; height: 100%; }
.c3d-textos { position: absolute; left: clamp(20px, 5vw, 40px); top: 0; bottom: 0; width: min(480px, 44%); }
.c3d-passo { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; pointer-events: auto; opacity: 0; visibility: hidden; }
.c3d-passo:first-child { opacity: 1; visibility: visible; }
.c3d-passo h1, .c3d-passo .c3d-h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: .98; letter-spacing: -0.045em; font-weight: 700; }
.c3d-passo h2 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
.c3d-passo p { color: var(--muted); font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.6; margin-top: 18px; max-width: 42ch; }
.c3d-passo .kicker { margin-bottom: 18px; }
.c3d-num { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--accent-soft); margin-bottom: 14px; }
.c3d-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.c3d-tags span { font-family: var(--mono); font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); background: var(--c3d-painel-2, rgba(5,5,7,.5)); }
.c3d-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.c3d-lateral {
  position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--dim);
}
.c3d-trilho { width: 2px; height: 150px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
#c3d-barra { display: block; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: linear-gradient(var(--accent-soft), var(--accent-deep)); }

.c3d-dica {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.c3d-rato { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid var(--line-2); position: relative; }
.c3d-rato::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--accent-soft); animation: c3d-rola 1.6s var(--ease) infinite; }
@keyframes c3d-rola { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }

/* Tela em pe (celular/tablet em pe): aparelho em cima (centro a 38% da altura), texto embaixo. Mesma regra do celular3d.js (aspecto < 1). */
@media (max-aspect-ratio: 1/1) {
  .c3d { height: 460vh; }
  .c3d-home { height: 400vh; }
  .c3d-modelo { height: 380vh; }
  .c3d-grade { mask-image: radial-gradient(ellipse 80% 50% at 50% 38%, #000 15%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 38%, #000 15%, transparent 72%); }
  .c3d-glow, .c3d-poster, .c3d-loader { left: 50%; top: 38%; }
  .c3d-glow { width: 100vmin; height: 100vmin; }
  .c3d-poster { width: min(88vw, 51vh); }
  /* embaixo, acima do botao flutuante do WhatsApp (76px) */
  .c3d-textos { left: clamp(20px, 5vw, 40px); right: clamp(20px, 5vw, 40px); width: auto; top: auto; bottom: max(7vh, 84px); text-align: center; }
  .c3d-passo { top: auto; bottom: 0; translate: none; }
  .c3d-passo h1, .c3d-passo .c3d-h1 { font-size: clamp(32px, 9vw, 52px); }
  .c3d-passo h2 { font-size: clamp(25px, 7vw, 38px); }
  .c3d-passo p { font-size: 14.5px; margin: 12px auto 0; max-width: 40ch; }
  .c3d-passo .kicker { display: block; margin-bottom: 12px; }
  .c3d-tags, .c3d-acoes { justify-content: center; }
  .c3d-tags { margin-top: 14px; }
  .c3d-acoes { margin-top: 16px; }
  .c3d-acoes .btn { height: 46px; padding: 0 20px; font-size: 14px; }
  /* contador no alto, a esquerda, logo abaixo do menu */
  .c3d-lateral { top: 88px; bottom: auto; right: auto; left: clamp(20px, 5vw, 40px); translate: none; }
  .c3d-trilho { display: none; }
  .c3d-dica { top: calc(62% + 6px); bottom: auto; }
  .c3d-rato { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .c3d-textos { bottom: max(4vh, 80px); }
  .c3d-passo p { display: none; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .c3d-passo h1, .c3d-passo .c3d-h1 { font-size: 34px; }
  .c3d-passo h2 { font-size: 26px; }
  .c3d-passo p { font-size: 14px; margin-top: 10px; }
  .c3d-acoes { margin-top: 14px; }
  .c3d-dica { display: none; }
}

/* Etiquetas que flutuam em volta do aparelho (so na home). Posicao em "medidas do celular":
   --dx/--dy vao de -1 a 1 da borda ao centro (--mdx/--mdy na tela em pe). O mouse move de leve (--z). */
.c3d { --c3d-fx: 70%; --c3d-fy: 50%; --c3d-fw: 14.6vh; --c3d-fh: 29.7vh; }
.c3d-chip {
  position: absolute; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden;
  left: calc(var(--c3d-fx) + var(--dx, 0) * var(--c3d-fw)); top: calc(var(--c3d-fy) + var(--dy, 0) * var(--c3d-fh));
  transform: translate(-50%, -50%) translate3d(calc(var(--c3d-px, 0) * var(--z, 1) * 16px), calc(var(--c3d-py, 0) * var(--z, 1) * 10px), 0) scale(calc(.82 + .18 * var(--c, 0)));
}
.c3d-chip span {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 15px 9px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--c3d-chip-texto, #f5f5f7); background: var(--c3d-chip-fundo, rgba(18,14,30,.62));
  border: 1px solid var(--c3d-chip-borda, rgba(196,181,253,.28));
  box-shadow: 0 14px 40px -12px var(--c3d-glow-1, rgba(139,92,246,.5)), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  animation: c3d-boia 5.5s ease-in-out infinite; animation-delay: var(--atraso, 0s);
}
.c3d-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(196,181,253,.16), 0 0 12px var(--accent-soft); }
@keyframes c3d-boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-aspect-ratio: 1/1) {
  .c3d { --c3d-fx: 50%; --c3d-fy: 38%; --c3d-fw: 9.3vh; --c3d-fh: 19vh; }
  .c3d-chip { left: calc(var(--c3d-fx) + var(--mdx, 0) * var(--c3d-fw)); top: calc(var(--c3d-fy) + var(--mdy, 0) * var(--c3d-fh)); }
  .c3d-chip span { font-size: 11.5px; padding: 7px 12px 7px 10px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .c3d-chip span { animation: none; } }
