/* ═══════════════════════════════════════════════════════════
   AGENTS MOCKUP — agents-mockup.css
   Prefixo: am-  (isolado, não conflita com código existente)

   Single iPhone premium com BOOT ANIMATION cinematográfica.
   - Acabamento metálico nas laterais (alumínio escuro com 8 stops)
   - Botões físicos: silent toggle, vol up/down, power button
   - Reflexo de vidro dinâmico sobre a tela
   - Sombras múltiplas (drop + ambient + glow violeta)
   - Boot overlay: halo + anéis + logo + brand + progress bar + flash
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper e glow ambiente ── */
.am-showcase {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 4vw, 40px);
  overflow: visible;
  isolation: isolate;
}

.am-showcase::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 60% 55% at 50% 50%,
    rgba(124, 58, 237, 0.28) 0%,
    rgba(76, 29, 149, 0.12) 45%,
    transparent 75%);
  filter: blur(44px);
  pointer-events: none;
  z-index: 0;
  /* Pulsa em sincronia com o idle float (controlado via JS através da CSS var) */
  opacity: var(--am-halo-op, 1);
  transform: scale(var(--am-halo-scale, 1));
  transition: opacity 60ms linear, transform 60ms linear;
}

/* Segundo halo, mais largo e difuso (profundidade) */
.am-showcase::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 80% 65% at 50% 50%,
    rgba(139, 92, 246, 0.10) 0%,
    transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* ── Stage: contêiner do phone (single) ── */
.am-stage {
  position: relative;
  z-index: 1;
  width: clamp(170px, 16.2vw, 245px);
  height: clamp(342px, 32.4vw, 477px);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Frame (perspectiva 3D) ── */
.am-frame {
  position: absolute;
  perspective: 2800px;
  transform-style: preserve-3d;
  cursor: default;
  pointer-events: auto;
}

/* Phone único — centralizado, levemente inclinado p/ esquerda */
.am-frame--front {
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(0deg);
  filter:
    drop-shadow(-14px 32px 44px rgba(0, 0, 0, 0.50))
    drop-shadow(0 18px 36px rgba(76, 29, 149, 0.18));
}

/* ── Tilt container (idle float 3D — controlado em JS via rAF) ── */
.am-tilt {
  position: relative;
  z-index: 1;
  transform-origin: 50% 55%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Tilt-hover container (hover tilt — controlado por animejs) ── */
.am-tilt-hover {
  position: relative;
  transform-origin: 50% 55%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Corpo do iPhone ── */
.am-phone {
  --am-w: clamp(153px, 13.95vw, 205px);
  --am-r: 38px;
  --am-bezel: 4px;

  position: relative;
  width: var(--am-w);
  flex-shrink: 0;
  background:
    /* highlight superior em arco (luz do topo) */
    radial-gradient(ellipse 110% 30% at 50% 0%,
      rgba(255, 255, 255, 0.10) 0%,
      transparent 60%),
    linear-gradient(175deg,
      #3D3D3F 0%,
      #2E2E30 22%,
      #1E1E20 58%,
      #141416 100%);
  border-radius: var(--am-r);
  padding: var(--am-bezel);
  transform-style: preserve-3d;
  z-index: 2;

  box-shadow:
    /* borda interna */
    inset 0  1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    inset  1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(0, 0, 0, 0.25),
    /* espessura lateral (alumínio em camadas) */
    -1px  1px 0 0 #2C2C2E,
    -2px  2px 0 0 #272729,
    -3px  3px 0 0 #222224,
    -4px  4px 0 0 #1D1D1F,
    -5px  5px 0 0 #19191B,
    -6px  6px 0 0 #151517,
    -7px  7px 0 0 #111113,
    -8px  8px 0 0 #0E0E10,
    -9px  9px 0 0 #0A0A0C,
    /* sombra projetada */
    -12px 16px 36px rgba(0, 0, 0, 0.60),
    -6px  32px 80px rgba(0, 0, 0, 0.55),
    /* glow violeta ambiente */
    0 0 110px rgba(124, 58, 237, 0.10),
    0 0 220px rgba(124, 58, 237, 0.05);
}

/* ═══════════════════════════════════════════════════════════
   BOTÕES FÍSICOS LATERAIS (premium detail)
   ═══════════════════════════════════════════════════════════ */
.am-phone__btn {
  position: absolute;
  background: linear-gradient(to bottom, #3A3A3C 0%, #2A2A2C 50%, #1F1F21 100%);
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    -1px 1px 2px rgba(0, 0, 0, 0.45);
}

/* Silent toggle (lado esquerdo, no topo) */
.am-phone__btn--silent {
  left: calc(-1 * var(--am-bezel) - 3px);
  top: 13%;
  width: 3px;
  height: 5%;
  border-radius: 2px 0 0 2px;
}

/* Volume up (lado esquerdo, abaixo do silent) */
.am-phone__btn--volup {
  left: calc(-1 * var(--am-bezel) - 3px);
  top: 22%;
  width: 3px;
  height: 9%;
  border-radius: 2px 0 0 2px;
}

/* Volume down (lado esquerdo, abaixo do volup) */
.am-phone__btn--voldn {
  left: calc(-1 * var(--am-bezel) - 3px);
  top: 33%;
  width: 3px;
  height: 9%;
  border-radius: 2px 0 0 2px;
}

/* Power button (lado direito, alinhado entre vol up e vol down do esquerdo) */
.am-phone__btn--power {
  right: calc(-1 * var(--am-bezel) - 3px);
  top: 26%;
  width: 3px;
  height: 12%;
  border-radius: 0 2px 2px 0;
}

/* ── Overlay de borda iluminada (highlight no contorno do frame) ── */
.am-phone__edge {
  position: absolute;
  inset: 0;
  border-radius: var(--am-r);
  pointer-events: none;
  z-index: 21;
  background: linear-gradient(
    162deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 28%,
    transparent 68%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

/* ── Reflexo de luz (shimmer) ── */
.am-phone__shimmer {
  position: absolute;
  inset: var(--am-bezel);
  border-radius: calc(var(--am-r) - var(--am-bezel));
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}

.am-phone__shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.05) 43%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 57%,
    transparent 62%,
    transparent 100%
  );
  transform: translateX(-80%) translateY(-10%) rotate(25deg);
  opacity: 0;
  pointer-events: none;
}

.am-phone__shimmer.is-passing::before {
  animation: amShimmerPass 1.6s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes amShimmerPass {
  0%   { transform: translateX(-80%) translateY(-10%) rotate(25deg); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(80%) translateY(10%) rotate(25deg); opacity: 0; }
}

/* ── Light Sweep Reveal (entrada cinematográfica) ── */
.am-phone__reveal {
  position: absolute;
  inset: 0;
  border-radius: var(--am-r);
  overflow: hidden;
  pointer-events: none;
  z-index: 22;
  opacity: 0;
}

.am-phone__reveal::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(167, 139, 250, 0.08) 44%,
    rgba(196, 181, 253, 0.55) 49%,
    #ffffff 50%,
    rgba(196, 181, 253, 0.55) 51%,
    rgba(167, 139, 250, 0.08) 56%,
    transparent 62%,
    transparent 100%
  );
  filter: blur(0.6px);
  transform: translateX(-90%) translateY(-12%) rotate(25deg);
  mix-blend-mode: screen;
}

.am-phone__reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%,
    rgba(139, 92, 246, 0.40) 0%,
    rgba(124, 58, 237, 0.18) 35%,
    transparent 65%);
  opacity: 0;
  mix-blend-mode: screen;
}

.am-phone__reveal.is-active     { opacity: 1; }
.am-phone__reveal.is-active::before { animation: amRevealSweep 1100ms cubic-bezier(.22,.61,.36,1) forwards; }
.am-phone__reveal.is-active::after  { animation: amRevealGlow  1100ms ease-out forwards; }

@keyframes amRevealSweep {
  0%   { transform: translateX(-90%) translateY(-12%) rotate(25deg); }
  100% { transform: translateX(90%)  translateY(12%)  rotate(25deg); }
}

@keyframes amRevealGlow {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Tela ── */
.am-screen {
  width: 100%;
  height: calc((var(--am-w) - var(--am-bezel) * 2) / 393 * 852);
  background: #000;
  border-radius: calc(var(--am-r) - var(--am-bezel));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.am-screen--shot { background: #0b141a; }

.am-screen__shot {
  position: absolute;
  top: -4.5%;
  left: 0;
  right: 0;
  width: 100%;
  height: 104.5%;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   REFLEXO DE VIDRO (premium glass overlay sobre a tela)
   Camada sutil que simula o vidro sobre o display, com gradiente
   diagonal estático (sem animação — só presença visual).
   ═══════════════════════════════════════════════════════════ */
.am-screen__glass {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  border-radius: inherit;
  background:
    /* Reflexo diagonal sutil (vidro) */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      transparent 38%,
      transparent 62%,
      rgba(255, 255, 255, 0.015) 82%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    /* Vinheta sutil nos cantos */
    radial-gradient(
      ellipse 130% 100% at 50% 50%,
      transparent 60%,
      rgba(0, 0, 0, 0.10) 100%
    );
  mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════════════════════
   BOOT OVERLAY — splash da Avancce ao "ligar" o phone
   Camada que cobre a tela enquanto a animação de boot roda;
   some no fim da sequência revelando o screenshot do chat.
   ═══════════════════════════════════════════════════════════ */
.am-boot {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(139, 92, 246, 0.32) 0%,
      rgba(76, 29, 149, 0.18) 35%,
      transparent 70%),
    linear-gradient(170deg,
      #1a0d3e 0%,
      #0f0628 45%,
      #07041a 100%);
}

/* Halo central — respira por trás da logo */
.am-boot__halo {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(167, 139, 250, 0.50) 0%,
    rgba(124, 58, 237, 0.24) 30%,
    rgba(76, 29, 149, 0.10) 55%,
    transparent 75%);
  filter: blur(16px);
  pointer-events: none;
  animation: amBootHalo 5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes amBootHalo {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* Anéis concêntricos atrás da logo — pulsam em ondas */
.am-boot__ring {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(196, 181, 253, 0.28);
  pointer-events: none;
}

.am-boot__ring--1 { width: 110px; height: 110px; opacity: 0.60; }
.am-boot__ring--2 { width: 158px; height: 158px; opacity: 0.36; border-color: rgba(167, 139, 250, 0.24); }
.am-boot__ring--3 { width: 210px; height: 210px; opacity: 0.20; border-color: rgba(139, 92, 246, 0.20); }

@media (prefers-reduced-motion: no-preference) {
  .am-boot__ring--1 { animation: amBootRingPulse 4s ease-in-out infinite;       }
  .am-boot__ring--2 { animation: amBootRingPulse 4s ease-in-out infinite 0.6s;  }
  .am-boot__ring--3 { animation: amBootRingPulse 4s ease-in-out infinite 1.2s;  }
}

@keyframes amBootRingPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: var(--am-ring-op, 0.40); }
  50%      { transform: translate(-50%, -50%) scale(1.10); opacity: 0.06; }
}

/* Logo central — wrapper para escala separar do float idle */
.am-boot__logo-wrap {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -8%;
  filter:
    drop-shadow(0 0 20px rgba(139, 92, 246, 0.55))
    drop-shadow(0 0 48px rgba(124, 58, 237, 0.32));
  animation: amBootLogoFloat 4s ease-in-out infinite;
}

.am-boot__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

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

/* Marca "AVANCCE" abaixo da logo */
.am-boot__brand {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 5px;
  color: #f3eaff;
  text-shadow:
    0 0 16px rgba(167, 139, 250, 0.55),
    0 0 32px rgba(124, 58, 237, 0.30);
}

/* Loading bar — barrinha fina na parte inferior */
.am-boot__progress {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}

.am-boot__progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(196, 181, 253, 0.80) 0%,
    #c4b5fd 50%,
    rgba(196, 181, 253, 0.80) 100%);
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  box-shadow:
    0 0 8px rgba(196, 181, 253, 0.60),
    0 0 16px rgba(139, 92, 246, 0.40);
}

/* Flash branco durante a transição boot → chat */
.am-boot__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(196, 181, 253, 0.40) 30%,
    transparent 70%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
}

/* ── Float idle 3D ── */
/* Tudo controlado em JS (rAF) para movimento orgânico real, não keyframes lineares.
   Veja `createIdleFloat()` em agents-mockup.js. */

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .am-stage {
    width: clamp(170px, 37.8vw, 230px);
    height: clamp(342px, 77.4vw, 459px);
  }
}

@media (max-width: 768px) {
  .am-phone {
    --am-w: clamp(144px, 34.2vw, 184px);
    --am-r: 32px;
  }
  .am-stage {
    width: clamp(153px, 46.8vw, 216px);
    height: clamp(324px, 100.8vw, 430px);
  }
  .am-boot__logo-wrap { width: 68px; height: 68px; }
  .am-boot__brand     { font-size: 14px; letter-spacing: 4px; }
  .am-boot__ring--1   { width: 78px;  height: 78px; }
  .am-boot__ring--2   { width: 112px; height: 112px; }
  .am-boot__ring--3   { width: 150px; height: 150px; }
}

@media (max-width: 480px) {
  .am-phone {
    --am-w: clamp(135px, 39.6vw, 169px);
    --am-r: 28px;
  }
  .am-stage {
    width: 100%;
    height: clamp(293px, 100.8vw, 400px);
  }
  .am-boot__logo-wrap { width: 60px; height: 60px; }
  .am-boot__brand     { font-size: 12px; letter-spacing: 3.5px; margin-top: 12px; }
  .am-boot__progress  { bottom: 12%; width: 40%; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .am-boot__halo,
  .am-boot__ring,
  .am-boot__logo-wrap,
  .am-phone__shimmer.is-passing::before,
  .am-phone__reveal.is-active::before,
  .am-phone__reveal.is-active::after {
    animation: none !important;
  }
}