/* Páginas de agradecimento: alçado do Porto com o barco rabelo («Obrigado / até breve» na vela).
   Mesmo desenho do primeiros-socorros.pt. */
@keyframes rbNavega { 0% { transform: translateX(var(--rb-from)) scale(var(--rb-scale)); } 50% { transform: translateX(var(--rb-to)) scale(var(--rb-scale)); } 100% { transform: translateX(var(--rb-from)) scale(var(--rb-scale)); } }
@keyframes rbBalanco { 0%,100% { transform: rotate(-.9deg) translateY(0); } 50% { transform: rotate(.9deg) translateY(3px); } }
@keyframes rbCorrente { to { transform: translateX(-160px); } }
.obrigado-arte { position: relative; max-width: 960px; margin: -48px auto 0; padding-bottom: 24px; }
.obrigado-arte img { display: block; width: 100%; height: auto; opacity: .9; }
.rb-lane { --rb-scale: .95; --rb-from: 10px; --rb-to: 780px; position: absolute; z-index: 2; left: 0; right: 0; bottom: 50px; display: block; overflow: hidden; }
.rb-lane svg { display: block; width: 100%; height: auto; }
.rb-boat { animation: rbNavega 30s cubic-bezier(.45,0,.55,1) infinite; will-change: transform; transform-origin: 210px 199px; }
.rb-rock { animation: rbBalanco 3.6s ease-in-out infinite; transform-origin: 210px 180px; }
.rb-water { animation: rbCorrente 9s linear infinite; }
.rb-sail { fill: #C75F3F; stroke: #2A1A12; stroke-width: 1.6; }
.rb-word { font: 800 25px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .03em; fill: #F7F0E6; }
.rb-lane:hover .rb-boat { animation-play-state: paused; }
@media (max-width: 760px) { .obrigado-arte { margin-top: -24px; } .rb-lane { --rb-scale: 1.3; --rb-from: 40px; --rb-to: 700px; bottom: 44px; } }
@media (prefers-reduced-motion: reduce) { .rb-boat, .rb-rock, .rb-water { animation: none; } .rb-boat { transform: translateX(400px) scale(var(--rb-scale)); } }