/* Camada visual do Home: adiciona profundidade e movimento sem trocar o conteúdo do Canva. */
:root {
  --motion-ink: #6e5849;
  --motion-terracotta: #d39b93;
  --motion-rose: #fbd6d2;
  --motion-cream: #faf6f2;
  --motion-mint: #e3f3e6;
}

.home-motion-layer { --motion-layer-active: 1; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--motion-cream); }

/* A abertura ganha uma atmosfera lúdica com luzes e órbitas muito sutis. */
.hero-elegant { isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #fff 0%, var(--motion-cream) 38%, #fdeee7 72%, var(--motion-rose) 100%) !important; }
.hero-elegant::after { content: ""; position: absolute; width: 38rem; height: 38rem; right: -12rem; top: -14rem; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .75), rgb(251 214 210 / .1) 62%, transparent 70%); filter: blur(2px); animation: motion-breathe 11s ease-in-out infinite; z-index: -1; }
.hero-elegant .elegant-container { z-index: 2; }
.professional-image-frame { animation: motion-float 8s ease-in-out infinite; transform-origin: center; }
.professional-image-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(255 255 255 / .7); border-radius: 14px; pointer-events: none; opacity: .7; }
.elegant-title { text-wrap: balance; text-shadow: 0 12px 32px rgb(110 88 73 / .12); }
.btn-primary, .btn-secondary { will-change: transform; }

/* As seções entram em cena em sequência para guiar a leitura sem esconder conteúdo. */
.fade-in-up, .fade-in-elegant { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.fade-in-up:not(.visible), .fade-in-elegant:not(.visible) { opacity: .01; transform: translateY(26px); }
.fade-in-up.visible, .fade-in-elegant.visible { opacity: 1; transform: translateY(0); }
.card-hover { transform: translateY(0) rotate(0); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; border: 1px solid transparent; }
.card-hover:hover { transform: translateY(-10px) rotate(-1deg); border-color: rgb(211 155 147 / .35); box-shadow: 0 24px 44px rgb(110 88 73 / .16); }
.card-hover:nth-child(even):hover { transform: translateY(-10px) rotate(1deg); }

/* Pequenos elementos decorativos criados pelo script reforçam o aspecto infantil. */
.motion-orbit { position: absolute; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; opacity: .55; background: var(--motion-terracotta); box-shadow: 0 0 0 8px rgb(211 155 147 / .1), 0 0 28px rgb(211 155 147 / .35); animation: motion-orbit 12s linear infinite; z-index: 1; }
.motion-orbit--mint { background: #9dc9a5; box-shadow: 0 0 0 8px rgb(157 201 165 / .13), 0 0 28px rgb(157 201 165 / .3); animation-duration: 16s; animation-direction: reverse; }
.motion-progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 100; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--motion-terracotta), #a9d6af, var(--motion-rose)); box-shadow: 0 2px 14px rgb(211 155 147 / .35); pointer-events: none; }
.page-transition { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--motion-cream); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.page-transition::before { content: "✦"; color: var(--motion-terracotta); font-size: 2rem; animation: motion-spin 1.2s ease-in-out infinite; }
.page-transition.is-leaving { opacity: 1; pointer-events: auto; }

@keyframes motion-float { 0%, 100% { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0); } 50% { transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-10px); } }
@keyframes motion-breathe { 0%, 100% { transform: scale(.95); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes motion-orbit { 0% { transform: translate3d(0, 0, 0) rotate(0); } 25% { transform: translate3d(80px, 30px, 0) rotate(90deg); } 50% { transform: translate3d(20px, 120px, 0) rotate(180deg); } 75% { transform: translate3d(-70px, 55px, 0) rotate(270deg); } 100% { transform: translate3d(0, 0, 0) rotate(360deg); } }
@keyframes motion-spin { 50% { transform: rotate(180deg) scale(1.3); } }

@media (max-width: 700px) {
  .professional-image-frame { animation-duration: 10s; }
  .motion-orbit { transform: scale(.75); }
  .page-transition::before { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fade-in-up:not(.visible), .fade-in-elegant:not(.visible) { opacity: 1; transform: none; }
}