@charset "UTF-8";

/* Revisão de volume: um perímetro fechado, com 38 px de profundidade real. */
.phone-stage { min-height: 570px; perspective: 1050px; perspective-origin: 50% 46%; touch-action: pan-y; }
.phone-stage::after { content: ""; position: absolute; z-index: 0; bottom: 7px; left: 16%; width: 68%; height: 33px; border-radius: 50%; background: #0009; filter: blur(13px); pointer-events: none; }
.phone-model {
  --phone-depth: 38px;
  --phone-lift: 0px;
  --phone-roll: -2deg;
  width: 252px;
  height: 504px;
  transform: translate3d(0, var(--phone-lift), 0) rotateX(var(--phone-x)) rotateY(var(--phone-y)) rotateZ(var(--phone-roll));
  transform-style: preserve-3d;
  pointer-events: auto;
}
.phone-face { border-radius: 40px; }
.phone-front {
  z-index: auto;
  transform: translateZ(calc(var(--phone-depth) / 2));
  padding: 5px;
  border: 1px solid #d2e0d4;
  box-shadow: inset 0 0 0 2px #536d59, inset 0 0 0 4px #111b15, 0 18px 40px #0005;
}
.phone-bezel { border-radius: 35px; padding: 7px; background: #030805; box-shadow: inset 0 0 0 1px #000, inset 0 1px 3px #b0c7b14d; }
.phone-screen { border-radius: 28px; }
.phone-back {
  overflow: visible;
  transform: rotateY(180deg) translateZ(calc(var(--phone-depth) / 2));
  transform-style: preserve-3d;
  border: 2px solid #b3c7b8;
  background: radial-gradient(ellipse at 27% 20%, #b3d2b766, transparent 42%), linear-gradient(145deg, #617f68, #2c4934 54%, #11271a);
  box-shadow: inset 0 0 0 3px #7c9983, inset 0 0 0 5px #1e3827, inset -14px -12px 38px #0006;
}
.phone-back::after { content: ""; position: absolute; inset: 8px; border: 1px solid #bbd3bf38; border-radius: 31px; pointer-events: none; }
.phone-edge { display: none; }
.phone-shell { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.phone-shell-wall {
  position: absolute;
  display: block;
  transform-origin: center;
  backface-visibility: visible;
  background: linear-gradient(0deg, #d8e4db 0%, #7d9984 5%, #1b3022 12%, #476750 22%, #a9c0ae 46%, #d2dfd5 50%, #6f8d77 54%, #263f2e 78%, #0e2115 88%, #9db7a4 96%, #e3ece5 100%);
  filter: brightness(var(--metal-light, 1));
}
.phone-side-button {
  z-index: auto;
  width: 16px;
  border: 1px solid #c4d4c9;
  border-radius: 4px;
  background: linear-gradient(90deg, #152b1c, #b9ccbf 35%, #65846e 65%, #243e2c);
  box-shadow: 0 0 0 2px #0a170e, 0 2px 4px #0008;
  backface-visibility: visible;
}
.phone-side-button-left { left: -8px; top: 112px; height: 51px; transform: rotateY(90deg) translateZ(-2px); }
.phone-side-button-left::after { content: ""; position: absolute; left: 0; right: 0; top: 64px; height: 34px; border: inherit; border-radius: inherit; background: inherit; box-shadow: inherit; }
.phone-side-button-right { right: -8px; top: 137px; height: 67px; transform: rotateY(90deg) translateZ(2px); }
.back-camera {
  width: 108px;
  height: 112px;
  top: 24px;
  left: 21px;
  grid-template-columns: repeat(2, 34px);
  grid-template-rows: repeat(2, 34px);
  gap: 10px;
  padding: 12px;
  border: 1px solid #c7dacf;
  border-radius: 23px;
  background: linear-gradient(140deg, #90ae98, #3d5b47 45%, #193523);
  box-shadow: inset 0 0 0 2px #34513e, 7px 10px 13px #0007;
  transform: translateZ(10px);
  transform-style: preserve-3d;
  overflow: visible;
}
.back-camera i {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  background: radial-gradient(circle at 36% 31%, #8ec7a7 0 4%, #245a3f 8% 14%, #030d09 20% 45%, #1b3226 49% 54%, #050e09 60% 66%, #d0dfd3 70% 78%, #5d7d66 83% 91%, #142b1c 94%);
  box-shadow: inset 0 0 0 1px #d1e4d7, 2px 4px 5px #0009;
  transform: translateZ(6px);
  transform-style: preserve-3d;
}
.camera-body-shell .phone-shell-wall { background: linear-gradient(0deg, #112d1b, #6d8e77 35%, #b5cdbe 85%, #d4e2d8); }
.lens-body-shell .phone-shell-wall { background: linear-gradient(0deg, #102319, #638970 35%, #d6e5db 76%, #5c7b66); }
.back-camera b { width: 15px; height: 15px; transform: translateZ(3px); }
.back-mark { width: 62px; height: 62px; transform: translateZ(.6px); }
.back-finish { transform: translateZ(.7px); }
.phone-controls { width: min(100%, 460px); }
.phone-controls button { min-height: 44px; font-size: 10px; }
.phone-app-hint { font-size: 9px; line-height: 1.5; }
.phone-visual figcaption { color: #a1b1a6; font-size: 9px; }
.phone-label-bottom { bottom: 7%; left: 2%; }
.phone-stage.is-dragging { cursor: grabbing; }
.phone-orbit-label { z-index: 0; }
.phone-model[data-facing="front"] .phone-back,
.phone-model[data-facing="back"] .phone-front { visibility: hidden; }
@keyframes app-copy-rise { from { transform: translateY(7px); opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes app-view-in { from { transform: translateY(9px); opacity: 1; } to { transform: translateY(0); opacity: 1; } }

/* Entradas amplas, suaves e automáticas. Texto permanece legível em todos os frames. */
@keyframes ponci-letter-enter {
  0% { transform: translate3d(0, .62em, 0) rotate(-10deg) scale(.88); }
  68% { transform: translate3d(0, -.1em, 0) rotate(2deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
 .words-sequenced.words-active .letter-sequence-letter { animation-duration: 900ms; }
@keyframes ponci-card-arrive {
  from { opacity: 1; transform: translate3d(var(--reveal-x, -20px), 68px, 0) rotate(var(--reveal-tilt, -1deg)) scale(.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes ponci-section-arrive {
  from { opacity: 1; transform: translate3d(-32px, 48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ponci-rise {
  from { opacity: 1; transform: translate3d(0, 42px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.motion-reveal.is-visible { animation-duration: 650ms; }
@keyframes ponci-phone-enter {
  from { transform: translateY(58px) scale(.94); }
  to { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .phone-visual { animation: ponci-phone-enter 1.6s cubic-bezier(.2,.65,.25,1) both; }
}
@media (max-width: 900px) and (min-width: 681px) {
  .phone-model { width: 228px; height: 470px; }
  .phone-stage { min-height: 535px; }
}
@media (max-width: 680px) {
  .phone-model { width: 230px; height: 470px; --phone-depth: 38px; }
  .phone-stage { min-height: 540px; perspective: 900px; }
  .phone-face, .phone-front { border-radius: 38px; }
  .phone-bezel { border-radius: 33px; }
  .phone-screen { border-radius: 26px; }
  .phone-scene-top { font-size: 6.5px; letter-spacing: .09em; }
  .phone-controls { grid-template-columns: 1fr 1.35fr 1fr 36px; }
  .phone-controls button { min-height: 44px; font-size: 8px; padding-inline: 4px; }
  .phone-app-hint { font-size: 8px; }
  .phone-visual figcaption { font-size: 8px; }
  .phone-label-bottom { bottom: 3%; left: 4%; }
  .site-header { position: relative; }
  .personal-header { flex-wrap: wrap; gap: 10px 20px; padding-block: 12px; }
}
@media (max-width: 370px) {
  .phone-model { width: 212px; height: 440px; --phone-depth: 36px; }
  .phone-stage { min-height: 510px; }
  .phone-controls { grid-template-columns: 1fr 1.35fr 1fr 30px; gap: 4px; }
  .phone-controls button { font-size: 7px; }
  .phone-controls button span { font-size: 11px; }
  .phone-scene-top > span:last-child { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-visual { animation: none !important; }
  .motion-reveal.is-visible { animation: ponci-copy-rise-gentle 650ms ease-out var(--reveal-delay, 0ms) both !important; }
  .words-sequenced.words-active .letter-sequence-letter { animation: ponci-letter-rise-gentle 650ms ease-out var(--letter-delay, 0ms) both !important; }
}