/* ClipX: roxo → rosa com o ponto amarelo do ícone. A base vem de /assets/raxy/raxy-immersive.css. */
:root {
  --bg: #0a0812;
  --bg-soft: #151122;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  align-self: center;
}
.site-header__brand {
  align-items: center;
}
.hero__logo {
  width: clamp(72px, 9vw, 112px);
  height: auto;
  filter: drop-shadow(0 20px 40px rgb(242 90 180 / 0.35));
}
.section__head--center {
  justify-items: center;
  text-align: center;
}
.section__head--center .lead {
  max-width: 52ch;
}

/* ───────────── Cards com vídeo dos estilos ───────────── */
.card3d.vcard {
  width: auto;
  height: min(580px, 66svh);
  aspect-ratio: 9 / 16;
  padding: 0;
}
.vcard video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgb(10 8 18 / 0.88) 62%, rgb(10 8 18 / 0.98));
  pointer-events: none;
}
.vcard__info {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 1.5rem;
  transform: translateZ(40px);
}
.vcard__info h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.vcard__info p {
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.75);
}

/* ───────────── Os dois modos ───────────── */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  perspective: 1200px;
}
.mode {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgb(139 92 246 / 0.16), rgb(21 17 34 / 0.85) 60%);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(10px);
}
.mode h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mode p {
  color: var(--muted);
}
.mode__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0d0b16;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Tela + câmera: janela de app, bolha da câmera e área de zoom */
.mode__window {
  position: absolute;
  inset: 10% 8% 12% 8%;
  border-radius: 10px;
  background:
    linear-gradient(#1f1a33 0 14%, transparent 14%),
    repeating-linear-gradient(180deg, transparent 0 18%, rgb(255 255 255 / 0.06) 18% 22%),
    #17132a;
}
.mode__window i {
  position: absolute;
  top: 4%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5f57;
}
.mode__window i:nth-child(1) { left: 2.5%; }
.mode__window i:nth-child(2) { left: 5.5%; background: #febc2e; }
.mode__window i:nth-child(3) { left: 8.5%; background: #28c840; }
.mode__zoom {
  position: absolute;
  left: 22%;
  top: 34%;
  width: 34%;
  height: 26%;
  border: 2px solid var(--c3);
  border-radius: 8px;
  box-shadow: 0 0 0 999px rgb(10 8 18 / 0.35);
  animation: zoom-hint 4s var(--ease) infinite;
}
.mode__cam {
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #f3c7a5 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 95%, #3b3355 0 45%, transparent 46%),
    linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 3px #fff;
}
@keyframes zoom-hint {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Só câmera: rosto, texto cinético e emoji */
.mode__visual--camera {
  background: linear-gradient(160deg, #2a1846, #120d1f);
}
.mode__face {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% 18%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(circle at 50% 30%, #f3c7a5 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, #3b3355 0 55%, transparent 56%);
  animation: punch-in 3s var(--ease) infinite;
}
.mode__kinetic {
  position: absolute;
  left: 8%;
  top: 14%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.7rem);
  line-height: 1;
  color: #fff;
}
.mode__kinetic b {
  display: inline-block;
  margin-top: 0.2em;
  padding: 0.1em 0.3em;
  background: var(--c2);
  rotate: -3deg;
}
.mode__emoji {
  position: absolute;
  right: 10%;
  top: 14%;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  animation: pop 3s var(--ease) infinite;
}
@keyframes punch-in {
  0%, 40% { scale: 1; }
  55%, 100% { scale: 1.15; }
}
@keyframes pop {
  0%, 30% { scale: 0; rotate: -20deg; }
  45%, 100% { scale: 1; rotate: 0deg; }
}

.tile__icon {
  display: flex;
  align-items: center;
  height: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .mode__zoom,
  .mode__face,
  .mode__emoji {
    animation: none;
  }
}