/* Motion layer for the proposal site.
   Keep movement predictable: transform and opacity only, no animated color/shadow. */
:root {
  --proposal-motion-ease: cubic-bezier(.22, .7, .18, 1);
}

/* One continuous canvas: chapter decorations must not end at section edges. */
section::before,
section::after,
.hero::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Section-owned atmosphere: every shape is complete and bounded by its chapter. */
.proposal-ambient {
  display: none;
}

section {
  overflow: clip;
}

.hero::before {
  display: block !important;
  content: '' !important;
  position: absolute;
  top: 9%;
  right: 4%;
  width: clamp(14rem, 29vw, 27rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 209, 173, .2), rgba(79, 209, 173, .06) 44%, transparent 72%);
  filter: blur(18px);
  opacity: .82;
  pointer-events: none;
  animation: hero-glow-drift 13s var(--proposal-motion-ease) infinite alternate;
}

.hero::after {
  display: block !important;
  content: '' !important;
  position: absolute;
  top: 14%;
  right: 10%;
  width: clamp(13rem, 25vw, 23rem);
  height: auto !important;
  aspect-ratio: 1;
  border: 1px solid rgba(118, 168, 143, .32);
  border-radius: 50%;
  box-shadow: inset 0 0 34px rgba(118, 168, 143, .05);
  pointer-events: none;
  animation: hero-ring-breathe 9s var(--proposal-motion-ease) infinite alternate !important;
}

#dor::after {
  display: block !important;
  content: '' !important;
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: clamp(12rem, 23vw, 21rem);
  height: auto !important;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 168, 84, .16), rgba(214, 168, 84, .045) 45%, transparent 73%);
  filter: blur(18px);
  opacity: .8;
  transform: translate3d(0, var(--dor-orb-shift, 0px), 0) scale(var(--dor-orb-scale, 1));
  will-change: transform;
  animation: none !important;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  #dor::after {
    animation: dor-orb-rise linear both !important;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
  }
}

@keyframes hero-glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3vw, 3vh, 0) scale(1.08); }
}

@keyframes hero-ring-breathe {
  from { transform: translate3d(0, 0, 0) scale(.96); opacity: .42; }
  to { transform: translate3d(-1vw, 1.5vh, 0) scale(1.04); opacity: .72; }
}

@keyframes dor-orb-rise {
  from { transform: translate3d(0, 20%, 0) scale(.88); opacity: .32; }
  to { transform: translate3d(0, -22%, 0) scale(1.04); opacity: .82; }
}

.proposal-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
}

.proposal-ambient::before,
.proposal-ambient::after {
  content: '';
  position: absolute;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .13;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.proposal-ambient::before {
  top: -12rem;
  right: -8rem;
  background: #4fd1ad;
  animation: proposal-ambient-drift-a 19s var(--proposal-motion-ease) infinite alternate;
}

.proposal-ambient::after {
  bottom: -16rem;
  left: 22%;
  background: #d6a854;
  animation: proposal-ambient-drift-b 23s var(--proposal-motion-ease) infinite alternate;
}

@keyframes proposal-ambient-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-8vw, 7vh, 0) scale(1.16); }
}

@keyframes proposal-ambient-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to { transform: translate3d(9vw, -6vh, 0) scale(.88); }
}

/* The preview always fills the card while preserving the real desktop canvas. */
.identity-preview-viewport {
  height: auto !important;
  aspect-ratio: 1100 / 650;
  background: #fff;
}

.identity-preview-card iframe {
  transform: scale(var(--preview-scale, .34));
}

.motion-target {
  transform: translate3d(0, 0, 0);
  transition: transform 460ms var(--proposal-motion-ease);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .motion-target:hover {
    transform: translate3d(0, -5px, 0);
  }

  .motion-target:active {
    transform: translate3d(0, -1px, 0) scale(.998);
  }
}

.motion-target:focus-within {
  transform: translate3d(0, -2px, 0);
}

.motion-stagger > .motion-item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms var(--proposal-motion-ease), transform 420ms var(--proposal-motion-ease);
  transition-delay: calc(var(--motion-index, 0) * 70ms);
}

.motion-stagger.is-motion-visible > .motion-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .proposal-ambient::before,
  .proposal-ambient::after {
    animation: none;
  }

  #dor::after {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  .motion-target,
  .motion-target:hover,
  .motion-target:active,
  .motion-target:focus-within,
  .motion-stagger > .motion-item,
  .motion-stagger.is-motion-visible > .motion-item {
    transform: none;
    transition: none;
    animation: none !important;
    opacity: 1;
    will-change: auto;
  }
}

/* Reintroduce depth without bringing back the old cut-off shapes.
   Every chapter owns one soft, edge-fading atmosphere. */
section {
  isolation: isolate;
}

section > .wrap {
  position: relative;
  z-index: 1;
}

section:not(.hero)::before {
  display: block !important;
  content: '' !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 20%, rgba(93, 228, 207, .13), transparent 38%),
    radial-gradient(ellipse at 84% 78%, rgba(214, 168, 84, .08), transparent 42%);
  opacity: .48;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  animation: section-ambient-drift 20s var(--proposal-motion-ease) infinite alternate !important;
}

#dor::before {
  background:
    radial-gradient(ellipse at 14% 32%, rgba(93, 228, 207, .18), transparent 40%),
    radial-gradient(ellipse at 88% 76%, rgba(214, 168, 84, .12), transparent 43%);
}

#sistema::before,
#atendimentos::before {
  background:
    radial-gradient(ellipse at 84% 18%, rgba(93, 228, 207, .17), transparent 39%),
    radial-gradient(ellipse at 18% 84%, rgba(118, 168, 143, .12), transparent 42%);
}

#orcamentos::before,
#oferta::before {
  background:
    radial-gradient(ellipse at 18% 24%, rgba(214, 168, 84, .16), transparent 38%),
    radial-gradient(ellipse at 84% 78%, rgba(93, 228, 207, .13), transparent 44%);
}

#pos-venda::before,
#experiencia::before {
  background:
    radial-gradient(ellipse at 82% 22%, rgba(118, 168, 143, .16), transparent 38%),
    radial-gradient(ellipse at 16% 82%, rgba(93, 228, 207, .11), transparent 43%);
}

#cadastro::before,
#customizacao::before {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(93, 228, 207, .14), transparent 38%),
    radial-gradient(ellipse at 86% 78%, rgba(214, 168, 84, .1), transparent 42%);
}

#fluxo::before {
  background:
    radial-gradient(ellipse at 76% 18%, rgba(93, 228, 207, .15), transparent 38%),
    radial-gradient(ellipse at 22% 82%, rgba(118, 168, 143, .1), transparent 43%);
}

#dor::before { animation-duration: 22s !important; animation-delay: -6s !important; }
#sistema::before { animation-duration: 18s !important; animation-delay: -2s !important; }
#atendimentos::before { animation-duration: 21s !important; animation-delay: -9s !important; }
#orcamentos::before { animation-duration: 19s !important; animation-delay: -4s !important; }
#pos-venda::before { animation-duration: 23s !important; animation-delay: -12s !important; }
#experiencia::before { animation-duration: 20s !important; animation-delay: -7s !important; }
#cadastro::before { animation-duration: 24s !important; animation-delay: -14s !important; }
#customizacao::before { animation-duration: 19s !important; animation-delay: -3s !important; }
#fluxo::before { animation-duration: 25s !important; animation-delay: -16s !important; }
#oferta::before { animation-duration: 18s !important; animation-delay: -8s !important; }

@keyframes section-ambient-drift {
  from {
    transform: translate3d(-1.2%, 0, 0) scale(1);
    opacity: .4;
  }
  to {
    transform: translate3d(1.2%, 1.5%, 0) scale(1.035);
    opacity: .64;
  }
}

@media (max-width: 640px) {
  section:not(.hero)::before {
    opacity: .36;
    animation-duration: 26s;
  }
}

@media (prefers-reduced-motion: reduce) {
  section:not(.hero)::before {
    animation: none !important;
    transform: none;
    opacity: .48;
  }
}

/* The atmosphere belongs to the whole proposal, not to isolated chapters.
   This prevents a hard horizontal restart when one section meets the next. */
section:not(.hero)::before,
#dor::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 12%, rgba(93, 228, 207, .16), transparent 31rem),
    radial-gradient(ellipse at 90% 28%, rgba(118, 168, 143, .12), transparent 34rem),
    radial-gradient(ellipse at 18% 72%, rgba(214, 168, 84, .1), transparent 29rem),
    radial-gradient(ellipse at 82% 88%, rgba(93, 228, 207, .09), transparent 36rem);
  opacity: .64;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  animation: continuous-atmosphere 30s var(--proposal-motion-ease) infinite alternate !important;
}

@keyframes continuous-atmosphere {
  from {
    transform: translate3d(-1.4%, -.5%, 0) scale(1);
    opacity: .52;
  }
  to {
    transform: translate3d(1.4%, 1%, 0) scale(1.035);
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none !important;
    transform: none;
    opacity: .64;
  }
}