/* Movimentos e estados interativos. Ajustes em config.js > motion.
 * translate/rotate/scale são independentes para preservar o layout e as rotações originais.
 */
:root {
  --motion-float-duration: 6s;
  --motion-orbit-duration: 28s;
}

.food-sticker {
  pointer-events: auto;
  transition:
    scale 0.35s,
    filter 0.35s;
}
.segment-art > img {
  z-index: 1;
  transition:
    transform 0.45s,
    scale 0.45s,
    filter 0.45s;
}
.segment-art {
  min-height: 340px;
}
.segment-art-note {
  z-index: 3;
  bottom: -40px;
}
.orbit {
  z-index: 2;
  pointer-events: none;
}
.orbit-two {
  opacity: 1;
  border-color: color-mix(in srgb, var(--c-line) 60%, transparent);
}
.orbit-node {
  position: absolute;
  top: calc(50% - 18px);
  left: -18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-primary-dark);
  box-shadow: 0 5px 14px #542b1510;
  font-size: 16px;
  transition:
    box-shadow 0.35s,
    border-color 0.35s,
    background 0.35s;
}
.orbit-one .orbit-node:nth-child(2) {
  left: auto;
  right: -18px;
  color: var(--c-go-dark);
}
.orbit-two .orbit-node {
  top: -16px;
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: #8b6109;
  background: var(--c-side);
}
.orbit-two .orbit-node:nth-child(2) {
  top: auto;
  bottom: -16px;
  color: var(--c-info);
  background: var(--c-surface);
}
.orbit-node i {
  display: block;
}

/* Movimentos contínuos rodam somente enquanto a cena estiver visível. */
.has-ambient-motion .food-sticker {
  animation: food-float var(--motion-float-duration) ease-in-out infinite;
}
.has-ambient-motion .sticker-burger {
  animation-delay: -2.5s;
  animation-direction: reverse;
}
.has-ambient-motion .floating-note {
  animation: note-float calc(var(--motion-float-duration) * 1.25) ease-in-out infinite;
}
.has-ambient-motion .segment-art > img {
  animation: food-float calc(var(--motion-float-duration) * 1.2) ease-in-out infinite;
}
.has-ambient-motion .orbit-one {
  animation: orbit-turn var(--motion-orbit-duration) linear infinite;
}
.has-ambient-motion .orbit-one .orbit-node i {
  animation: orbit-counterturn var(--motion-orbit-duration) linear infinite;
}
.has-ambient-motion .orbit-two {
  animation: orbit-counterturn calc(var(--motion-orbit-duration) * 1.4) linear infinite;
}
.has-ambient-motion .orbit-two .orbit-node i {
  animation: orbit-turn calc(var(--motion-orbit-duration) * 1.4) linear infinite;
}
.has-ambient-motion .integration-route > i {
  animation: connection-bob calc(var(--motion-float-duration) * 0.7) ease-in-out infinite;
}
.has-ambient-motion .integration-route > i:last-child {
  animation-delay: -2s;
}
.has-ambient-motion .integration-route > img {
  animation: connection-glow calc(var(--motion-float-duration) * 0.8) ease-in-out infinite;
}
.integration-route span::after {
  animation: none;
}
.has-ambient-motion .integration-route span::after {
  animation: route-pulse 3s ease infinite;
}
.has-ambient-motion [data-motion-scene] :is(.food-sticker, .floating-note, .orbit, .orbit-node i),
.has-ambient-motion .segment-art > img,
.has-ambient-motion .integration-route > :is(i, img),
.has-ambient-motion .integration-route span::after {
  animation-play-state: paused;
}
.has-ambient-motion
  [data-motion-scene].is-motion-active
  :is(.food-sticker, .floating-note, .orbit, .orbit-node i),
.has-ambient-motion .segment-art.is-motion-active > img,
.has-ambient-motion .integration-route.is-motion-active > :is(i, img),
.has-ambient-motion .integration-route.is-motion-active span::after {
  animation-play-state: running;
}
.motion-suspended .has-ambient-motion [data-motion-scene] *,
.motion-suspended .has-ambient-motion .integration-route span::after {
  animation-play-state: paused !important;
}

@keyframes food-float {
  0%,
  100% {
    translate: 0 0;
    rotate: -2deg;
  }
  50% {
    translate: 0 -13px;
    rotate: 4deg;
  }
}
@keyframes note-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes orbit-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orbit-counterturn {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes connection-bob {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -5px;
    rotate: -7deg;
  }
}
@keyframes connection-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-primary) 7%, transparent);
  }
}
@keyframes icon-greet {
  0%,
  100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-13deg);
  }
  65% {
    transform: rotate(10deg);
  }
}

/* A mesma ênfase aparece com teclado quando o componente contém um controle. */
.feature-card,
.integration-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.has-hover-effects :is(.feature-card, .integration-card)::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--pointer-x, 50%) var(--pointer-y, 35%),
    color-mix(in srgb, var(--c-accent) 16%, transparent),
    transparent 75%
  );
  transition: opacity 0.35s;
}
.feature-icon,
.integration-icon,
.feature-icon i,
.integration-icon i,
.module-tab i,
.segment-tab i,
.btn > i,
.text-link > i,
.navbar-brand img,
.footer-brand img {
  transition:
    transform 0.3s,
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s,
    filter 0.3s;
}
.has-hover-effects .feature-card:is(:hover, :focus-within),
.has-hover-effects .integration-card:is(:hover, :focus-within) {
  transform: translateY(-8px);
  border-color: var(--c-primary-light);
  box-shadow:
    0 18px 38px #542b1514,
    0 0 0 1px color-mix(in srgb, var(--c-primary) 10%, transparent);
}
.has-hover-effects :is(.feature-card, .integration-card):is(:hover, :focus-within)::before {
  opacity: 1;
}
.has-hover-effects .feature-card:is(:hover, :focus-within) .feature-icon {
  transform: rotate(-7deg) scale(1.13);
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--c-primary) 23%, transparent);
}
.has-hover-effects .integration-card:is(:hover, :focus-within) .integration-icon {
  transform: scale(1.17) rotate(-5deg);
  box-shadow: 0 6px 16px #542b1514;
}
.has-hover-effects .integration-card:hover .integration-icon i {
  animation: icon-greet 0.55s ease both;
}
.has-hover-effects :is(.module-tab, .segment-tab):is(:hover, :focus-visible) i {
  transform: translateY(-2px) rotate(-10deg) scale(1.12);
}
.has-hover-effects :is(.module-tab, .segment-tab):hover {
  box-shadow: 0 5px 15px #542b1518;
}
.has-hover-effects :is(.btn, .text-link):is(:hover, :focus-visible) > .bi-arrow-up-right {
  transform: translate(3px, -3px);
}
.has-hover-effects .navbar-brand:hover img {
  transform: translateY(-2px) scale(1.025);
}
.has-hover-effects .footer-brand a:hover img {
  transform: translateY(-2px);
  filter: brightness(0) invert(1) drop-shadow(0 0 8px #ffffff30);
}
.has-hover-effects .hero-product:hover .food-sticker {
  scale: 1.05;
}
.has-hover-effects .food-sticker:hover {
  scale: 1.18 !important;
  filter: drop-shadow(0 10px 10px #542b1538);
}
.has-hover-effects .segment-panel:hover .segment-art > img {
  scale: 1.07;
  filter: drop-shadow(15px 20px 0 var(--c-line-soft));
}
.has-hover-effects .segment-panel:hover .orbit-node {
  border-color: var(--c-accent-dark);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-accent) 13%, transparent),
    0 5px 15px #542b1514;
}

@media (max-width: 991px) {
  .segment-art {
    min-height: 300px;
  }
  .segment-art-note {
    bottom: -30px;
  }
}
@media (max-width: 767px) {
  .segment-art {
    min-height: 310px;
  }
  .segment-art-note {
    bottom: -24px;
  }
  .orbit-node {
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: -15px;
    font-size: 13px;
  }
  .orbit-one .orbit-node:nth-child(2) {
    right: -15px;
  }
  .orbit-two .orbit-node {
    width: 28px;
    height: 28px;
    top: -14px;
    left: calc(50% - 14px);
    font-size: 12px;
  }
  .orbit-two .orbit-node:nth-child(2) {
    bottom: -14px;
  }
  .has-ambient-motion .food-sticker {
    animation-name: food-float-small;
  }
  @keyframes food-float-small {
    0%,
    100% {
      translate: 0 0;
      rotate: -2deg;
    }
    50% {
      translate: 0 -7px;
      rotate: 3deg;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-scene] *,
  .integration-card:hover .integration-icon i {
    animation: none !important;
  }
  .food-sticker,
  .segment-art > img {
    translate: none;
    rotate: none;
  }
}