/* ============================================
   PRAXIS ANIMAÇÕES — Keyframes hero1–4
   ============================================ */

/* ══════════════════════════════════════════
   HERO 1 — iPhone Holográfico WhatsApp
   ══════════════════════════════════════════ */

@keyframes praxisFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-16px) rotate(-3deg); }
}

@keyframes holoRay {
  0%   { opacity: 0;    transform: scaleY(0.3) translateX(-10px); }
  30%  { opacity: 0.6;  transform: scaleY(1)   translateX(0); }
  70%  { opacity: 0.4; }
  100% { opacity: 0;    transform: scaleY(0.5) translateX(20px); }
}

@keyframes scanLine {
  0%   { top: 0%; opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

@keyframes praxisBubble {
  0%   { opacity: 0; transform: translateY(16px)  scale(0.85); }
  20%  { opacity: 1; transform: translateY(0)      scale(1); }
  75%  { opacity: 1; transform: translateY(-10px)  scale(1); }
  100% { opacity: 0; transform: translateY(-30px)  scale(0.9); }
}

@keyframes tealGlowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(14,165,160,0.5); }
  50%     { box-shadow: 0 0 0 18px rgba(14,165,160,0); }
}

/* iPhone wrapper */
.praxis-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 500px;
  padding-top: 28px;
}

.praxis-iphone {
  width: 190px;
  background: #0D0D0D;
  border-radius: 34px;
  padding: 14px 8px;
  position: relative;
  box-shadow:
    0 0 0 2px #222,
    0 30px 80px rgba(14,165,160,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  animation: praxisFloat 5s ease-in-out infinite;
  z-index: 3;
}

.praxis-notch {
  width: 75px; height: 20px;
  background: #0D0D0D;
  border-radius: 0 0 14px 14px;
  margin: 0 auto 8px;
  position: relative; z-index: 5;
}
.praxis-notch::before {
  content: '';
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%; background: #111;
}

/* Tela WhatsApp teal */
.praxis-screen {
  background: #052420;
  border-radius: 18px;
  min-height: 320px;
  overflow: hidden;
  position: relative;
}

/* Scan line sobre a tela */
.praxis-scan {
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, rgba(14,165,160,0.6), transparent);
  animation: scanLine 3s linear infinite;
  z-index: 10;
  pointer-events: none;
}

.praxis-wa-header {
  background: #0EA5A0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.praxis-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.praxis-name {
  font-size: 0.72rem; font-weight: 600; color: #fff;
}
.praxis-status {
  font-size: 0.58rem; color: rgba(255,255,255,0.75);
}

.praxis-messages {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 250px;
  overflow: hidden;
}

.praxis-msg {
  max-width: 80%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.65rem;
  line-height: 1.4;
  font-family: var(--font-sans);
  white-space: pre-line;
  animation: praxisBubble 6s ease-in-out infinite;
}
.praxis-msg-in  {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  align-self: flex-start;
  border-radius: 0 8px 8px 8px;
}
.praxis-msg-bot {
  background: rgba(14,165,160,0.15);
  color: var(--praxis-light);
  align-self: flex-start;
  border-radius: 0 8px 8px 8px;
  border-left: 2px solid var(--praxis);
}
.praxis-msg-confirm {
  background: rgba(14,165,160,0.3);
  color: #fff;
  align-self: flex-start;
  border-radius: 0 8px 8px 8px;
  font-weight: 600;
}

.praxis-home {
  width: 90px; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 8px auto 0;
}

/* Raios holográficos */
.holo-rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  z-index: 2;
  pointer-events: none;
}

.holo-ray {
  position: absolute;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  transform-origin: left center;
  animation: holoRay 2.5s ease-in-out infinite;
}
.holo-ray-1 { background: linear-gradient(to right, rgba(14,165,160,0.7), transparent); transform: rotate(30deg);  animation-delay: 0s; }
.holo-ray-2 { background: linear-gradient(to right, rgba(52,200,195,0.6), transparent); transform: rotate(50deg);  animation-delay: 0.4s; }
.holo-ray-3 { background: linear-gradient(to right, rgba(14,165,160,0.5), transparent); transform: rotate(70deg);  animation-delay: 0.8s; }
.holo-ray-4 { background: linear-gradient(to right, rgba(52,200,195,0.7), transparent); transform: rotate(-30deg); animation-delay: 0.2s; }
.holo-ray-5 { background: linear-gradient(to right, rgba(14,165,160,0.5), transparent); transform: rotate(-50deg); animation-delay: 0.6s; }
.holo-ray-6 { background: linear-gradient(to right, rgba(52,200,195,0.6), transparent); transform: rotate(-70deg); animation-delay: 1s; }

/* Chat bubbles flutuando à direita do iPhone */
.holo-bubble {
  position: absolute;
  background: rgba(14,165,160,0.15);
  border: 1px solid rgba(14,165,160,0.35);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.62rem;
  color: var(--clr-praxis-light, #34C8C3);
  font-family: var(--font-sans);
  white-space: nowrap;
  right: -10px;
  left: auto;
  animation: praxisBubble 6s ease-in-out infinite;
  z-index: 10;
}
.holo-b1 { top:  80px; animation-delay: 0s; }
.holo-b2 { top: 200px; animation-delay: 2s; }
.holo-b3 { top: 320px; animation-delay: 4s; }

/* ══════════════════════════════════════════
   HERO 2 — Consultório + Agenda
   ══════════════════════════════════════════ */

@keyframes slotAppear {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

@keyframes roomFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.room-scene {
  position: relative;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: roomFade 1s ease forwards;
}

/* Silhueta de sala (line art) */
.room-outline {
  width: 100%;
  height: 120px;
  position: relative;
  border-bottom: 2px solid rgba(14,165,160,0.3);
}

/* Tablet com agenda */
.agenda-tablet {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 32px rgba(14,165,160,0.12), 0 0 0 1px rgba(14,165,160,0.1);
}

.agenda-month {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--praxis);
  margin-bottom: 10px;
  font-family: var(--font-sans);
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.agenda-day {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: var(--gray-400);
  font-family: var(--font-sans);
  background: transparent;
}

.agenda-day.has-appt {
  background: rgba(14,165,160,0.12);
  color: var(--praxis);
  font-weight: 600;
  animation: slotAppear 0.5s ease forwards;
}

.agenda-day.full {
  background: var(--praxis);
  color: #fff;
  font-weight: 700;
}

.agenda-day.today {
  border: 1.5px solid var(--praxis);
  color: var(--praxis);
  font-weight: 700;
}

/* Badge flutuante */
.agenda-badge {
  background: var(--praxis);
  color: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  animation: badgeFloat 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   HERO 3 — Pipeline Triagem→Confirmação
   ══════════════════════════════════════════ */

@keyframes tealParticle {
  0%   { left: -5%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

@keyframes tealNodePing {
  0%   { box-shadow: 0 0 0 0   rgba(14,165,160,0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(14,165,160,0); }
  100% { box-shadow: 0 0 0 0   rgba(14,165,160,0); }
}

@keyframes progressGrow {
  0%   { width: 0%; }
  100% { width: 100%; }
}

.teal-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 20px;
}

.teal-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.teal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(14,165,160,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(14,165,160,0.1);
  animation: tealNodePing 5s ease-out infinite;
}
.teal-node:nth-child(1) .teal-icon { animation-delay: 0s; }
.teal-node:nth-child(3) .teal-icon { animation-delay: 1.6s; }
.teal-node:nth-child(5) .teal-icon { animation-delay: 3.3s; }

.teal-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dark);
  text-align: center;
  font-family: var(--font-sans);
}
.teal-sub {
  font-size: 0.6rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: -6px;
  font-family: var(--font-sans);
}

.teal-connector {
  flex: 1;
  height: 2px;
  background: rgba(14,165,160,0.15);
  position: relative;
  overflow: hidden;
}

.teal-connector::after {
  content: '';
  position: absolute;
  top: -3px; height: 8px; width: 16px;
  border-radius: 4px;
  background: linear-gradient(to right, transparent, var(--praxis), transparent);
  animation: tealParticle 5s linear infinite;
}

.teal-connector:nth-child(2)::after { animation-delay: 0s; }
.teal-connector:nth-child(4)::after { animation-delay: 1.6s; }

/* ══════════════════════════════════════════
   HERO 4 — Calendário com Dots Teal
   ══════════════════════════════════════════ */

@keyframes dotAppear {
  0%   { opacity: 0; transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes calFloat {
  0%,100% { transform: translateY(0) rotate(1deg); }
  50%     { transform: translateY(-10px) rotate(1deg); }
}

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

.cal-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 20px 60px rgba(14,165,160,0.15), 0 0 0 1px rgba(14,165,160,0.1);
  animation: calFloat 5s ease-in-out infinite;
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.cal-month-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  font-family: var(--font-sans);
}

.cal-stat {
  font-size: 0.65rem;
  background: var(--praxis-dim);
  color: var(--praxis);
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 600;
  font-family: var(--font-sans);
  animation: statCount 0.8s ease forwards 1s;
  opacity: 0;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.cal-wd {
  text-align: center;
  font-size: 0.55rem;
  color: var(--gray-400);
  font-weight: 600;
  font-family: var(--font-sans);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.6rem;
  color: var(--gray-400);
  font-family: var(--font-sans);
}

.cal-day.active { background: rgba(14,165,160,0.08); }
.cal-day.today {
  background: var(--praxis);
  color: #fff;
  font-weight: 700;
}

.cal-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.cal-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--praxis);
  animation: dotAppear 0.4s ease forwards;
}

/* Gera delays para os dots aparecerem em sequência */
.cal-day:nth-child(3)  .cal-dot { animation-delay: 0.2s; }
.cal-day:nth-child(5)  .cal-dot { animation-delay: 0.4s; }
.cal-day:nth-child(8)  .cal-dot { animation-delay: 0.6s; }
.cal-day:nth-child(9)  .cal-dot { animation-delay: 0.8s; }
.cal-day:nth-child(12) .cal-dot { animation-delay: 1.0s; }
.cal-day:nth-child(15) .cal-dot { animation-delay: 1.2s; }
.cal-day:nth-child(16) .cal-dot { animation-delay: 1.4s; }
.cal-day:nth-child(18) .cal-dot { animation-delay: 1.6s; }
.cal-day:nth-child(19) .cal-dot { animation-delay: 1.8s; }
.cal-day:nth-child(22) .cal-dot { animation-delay: 2.0s; }
.cal-day:nth-child(23) .cal-dot { animation-delay: 2.2s; }
.cal-day:nth-child(25) .cal-dot { animation-delay: 2.4s; }
.cal-day:nth-child(26) .cal-dot { animation-delay: 2.6s; }
.cal-day:nth-child(29) .cal-dot { animation-delay: 2.8s; }

/* ══════════════════════════════════════════
   EMBED MODE — contraste para fundo escuro
   ══════════════════════════════════════════ */

/* Hero 1 — iPhone holográfico */
.embed .praxis-iphone {
  box-shadow:
    0 0 0 1px rgba(14,165,160,0.55),
    0 0 0 3px rgba(14,165,160,0.15),
    0 30px 80px rgba(14,165,160,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
.embed .praxis-screen {
  background: #073330 !important;
}
.embed .holo-ray-1,
.embed .holo-ray-4 { opacity: 1 !important; filter: brightness(1.6); }
.embed .holo-ray-2,
.embed .holo-ray-5 { opacity: 0.9 !important; filter: brightness(1.5); }
.embed .holo-ray-3,
.embed .holo-ray-6 { opacity: 0.8 !important; filter: brightness(1.4); }
.embed .holo-bubble {
  background: rgba(14,165,160,0.22) !important;
  border-color: rgba(14,165,160,0.60) !important;
  color: #5EECEA !important;
  box-shadow: 0 0 12px rgba(14,165,160,0.25);
}

/* Hero 2 — consultório + agenda: card branco → escuro */
.embed .agenda-tablet {
  background: rgba(14,165,160,0.06) !important;
  border: 1px solid rgba(14,165,160,0.22) !important;
  box-shadow: 0 8px 32px rgba(14,165,160,0.18) !important;
}
.embed .agenda-month    { color: var(--praxis-light) !important; }
.embed .agenda-day      { color: rgba(255,255,255,0.32) !important; }
.embed .agenda-day.has-appt { color: var(--praxis-light) !important; background: rgba(14,165,160,0.18) !important; }
.embed .agenda-day.full     { color: #fff !important; }
.embed .agenda-day.today    { color: var(--praxis) !important; }

/* Hero 3 — pipeline triagem */
.embed .teal-label { color: rgba(255,255,255,0.88) !important; }
.embed .teal-sub   { color: rgba(255,255,255,0.42) !important; }
.embed .teal-icon  {
  background: rgba(14,165,160,0.12) !important;
  border-color: rgba(14,165,160,0.50) !important;
  box-shadow: 0 4px 16px rgba(14,165,160,0.2) !important;
}

/* Hero 4 — calendário card branco → escuro */
.embed .cal-card {
  background: rgba(14,165,160,0.05) !important;
  border: 1px solid rgba(14,165,160,0.18) !important;
  box-shadow: 0 16px 50px rgba(14,165,160,0.18) !important;
}
.embed .cal-month-title { color: rgba(255,255,255,0.9) !important; }
.embed .cal-wd          { color: rgba(255,255,255,0.30) !important; }
.embed .cal-day         { color: rgba(255,255,255,0.30) !important; }
.embed .cal-day.active  { background: rgba(14,165,160,0.14) !important; color: rgba(255,255,255,0.55) !important; }