/* Movimento compartilhado das páginas tsl (bri, bre, crs).
   Usa as propriedades individuais translate/scale/rotate para não brigar
   com os transform: rotate() que os elementos já têm. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mo-up { from { opacity: 0; translate: 0 18px } to { opacity: 1; translate: 0 0 } }
  @keyframes mo-slide { from { translate: 0 22px } to { translate: 0 0 } }
  @keyframes mo-zoom { from { scale: 1.06; filter: brightness(.6) } to { scale: 1; filter: none } }
  @keyframes mo-drop { from { opacity: 0; translate: 0 -26px; scale: .9 } to { opacity: 1; translate: 0 0; scale: 1 } }
  @keyframes mo-pop { 0% { opacity: 0; scale: .6 } 70% { opacity: 1; scale: 1.06 } 100% { scale: 1 } }
  @keyframes mo-fade { from { opacity: 0 } to { opacity: 1 } }
  @keyframes mo-float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -9px } }
  @keyframes mo-orbit { to { rotate: 360deg } }
  @keyframes mo-shine { from { background-position: 100% 0 } to { background-position: 0 0 } }

  /* Hero bri/bre */
  .hero-logo { animation: mo-pop .8s cubic-bezier(.2,.8,.2,1) both }
  .hero h1 { animation: mo-slide .8s cubic-bezier(.2,.7,.2,1) .06s both }
  .hero-lead { animation: mo-up .7s cubic-bezier(.2,.7,.2,1) .16s both }
  .hero-sub { animation: mo-up .7s cubic-bezier(.2,.7,.2,1) .22s both }
  .hero .cta-row { animation: mo-up .7s cubic-bezier(.2,.7,.2,1) .3s both }
  .hero .shot img { animation: mo-zoom 1.4s cubic-bezier(.2,.7,.2,1) both }
  .hero .polaroid { animation: mo-drop .9s cubic-bezier(.2,.8,.2,1) .45s both, mo-float 7s ease-in-out 1.4s infinite }
  .hero .pol-2 { animation-delay: .6s, 2.4s }
  .hero h1 .gold { background: linear-gradient(100deg, var(--gold) 42%, #fff4d6 50%, var(--gold) 58%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mo-shine 1.6s ease .9s both }

  /* Hero crs (Curadoria) */
  #midtrack-page .hero-copy > * { animation: mo-up .7s cubic-bezier(.2,.7,.2,1) both }
  #midtrack-page .hero-copy > h1 { animation-name: mo-slide }
  #midtrack-page .hero-copy > :nth-child(2) { animation-delay: .06s }
  #midtrack-page .hero-copy > :nth-child(3) { animation-delay: .16s }
  #midtrack-page .hero-copy > :nth-child(4) { animation-delay: .24s }
  #midtrack-page .hero-copy > :nth-child(5) { animation-delay: .32s }
  #midtrack-page .laptop, #midtrack-page .laptop-base { animation: mo-up .9s cubic-bezier(.2,.7,.2,1) .2s both }
  #midtrack-page .floating-frame { animation: mo-drop .9s cubic-bezier(.2,.8,.2,1) .55s both, mo-float 7s ease-in-out 1.5s infinite }
  #midtrack-page .floating-two { animation-delay: .7s, 2.6s }
  #midtrack-page .number-stamp { animation: mo-pop .8s cubic-bezier(.2,.8,.2,1) .8s both }

  /* Órbitas: um ponto dourado percorrendo devagar */
  html .orbit.orbit-1, html .orbit.orbit-2, html .orbit.orbit-one, html .orbit.orbit-two { transform: none; translate: -50% -50% }
  .orbit-1, .orbit-one { animation: mo-orbit 60s linear infinite }
  .orbit-2, .orbit-two { animation: mo-orbit 90s linear infinite reverse }
  .orbit-1::after, .orbit-one::after, .orbit-2::after, .orbit-two::after { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #e3b56a; box-shadow: 0 0 12px 2px rgba(227,181,106,.55) }
  .orbit-2::after, .orbit-two::after { top: auto; bottom: -3px; width: 4px; height: 4px; opacity: .7 }

  /* Revelação ao rolar (motion.js adiciona .mo no html) */
  .mo .mo-rv { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--mo-d, 0ms) }
  .mo .mo-rv.mo-in { opacity: 1; translate: 0 0 }
  .mo .mo-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1); transition-delay: var(--mo-d, 0ms) }
  .mo .mo-wipe img, .mo .mo-wipe video { scale: 1.14; transition: scale 1.6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--mo-d, 0ms) }
  .mo .mo-wipe.mo-in { clip-path: inset(0 0 0 0) }
  .mo .mo-wipe.mo-in img, .mo .mo-wipe.mo-in video { scale: 1 }

  /* Sublinhado de destaque desenha quando o título entra */
  .mo .ex-accent::after { scale: 0 1; transform-origin: left; transition: scale .9s cubic-bezier(.2,.7,.2,1) .35s }
  .mo .mo-in .ex-accent::after { scale: 1 1 }

  /* Brilho que passa no botão dourado ao passar o mouse */
  .btn-gold, .button-gold { overflow: hidden; isolation: isolate }
  .btn-gold::after, .button-gold::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat; transition: background-position .8s ease; pointer-events: none }
  .btn-gold:hover::after, .button-gold:hover::after { background-position: -50% 0 }
  .button-gold { position: relative }
}

/* Selo de garantia: flutua devagar e o brilho respira */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mo-glow { 0%, 100% { opacity: .7; scale: .96 } 50% { opacity: 1; scale: 1.04 } }
  .guarantee .seal-img { animation: mo-float 6s ease-in-out infinite }
  .guarantee .seal::before { animation: mo-glow 6s ease-in-out infinite }
}