:root {
  --azul: #2F4F86;
  --azul-escuro: #1F3760;
  --branco: #FFFFFF;
  --serifa: 'Lusitana', Georgia, serif;
  --rotulo: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--branco); }
* { box-sizing: border-box; }
a { color: inherit; }
a:hover { color: var(--azul-escuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.pagina { font-family: var(--serifa); color: var(--azul); background: var(--branco); overflow-x: clip; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 26px;
  border: 0;
  border-radius: 2px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--rotulo);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--azul-escuro); color: var(--branco); }

.mar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 230px;
  background-image: url(../img/mar.svg);
  background-size: 1533px 230px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  -webkit-mask-image: linear-gradient(#000 74%, transparent);
  mask-image: linear-gradient(#000 74%, transparent);
  animation: mare 110s linear infinite;
}
@keyframes mare { to { background-position: -1533px 100%; } }

.caravela { transform-origin: 50% 88%; animation: balanco 8s ease-in-out infinite; }
@keyframes balanco {
  0%, 100% { transform: translateY(0) rotate(-.7deg); }
  50% { transform: translateY(-4px) rotate(.7deg); }
}

.rumo {
  appearance: none;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  width: 100%;
  min-height: 60px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--azul);
  background: transparent;
  color: var(--azul);
  font-family: var(--serifa);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.rumo:hover span:last-child { text-decoration: underline; }
.rumo[aria-pressed="true"] { font-weight: 700; }
.agulha { transform-origin: 200px 200px; transition: transform 1.3s cubic-bezier(.3, 1.3, .5, 1); }

#viagem {
  position: relative;
  background-color: var(--branco);
  background-image: url(../img/mar-pontos.svg);
  background-size: 442px 442px;
}
.rota { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#rota-base { fill: none; stroke: var(--azul); stroke-width: 3; stroke-dasharray: .1 9; stroke-linecap: round; }
#rota-feita { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 999999; }
#barco { position: absolute; left: 0; top: 0; width: 132px; height: 108px; pointer-events: none; z-index: 4; will-change: transform; }
#barco::before { content: ''; position: absolute; inset: 8% 2% 4%; border-radius: 42%; background: var(--branco); }
#barco img { position: relative; display: block; width: 100%; height: auto; }

.diario {
  position: sticky;
  top: 14px;
  z-index: 6;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto -44px;
  padding: 9px 16px;
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--azul);
  color: var(--azul);
  font-family: var(--rotulo);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.05;
}

.titulo-viagem {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 16em;
  margin: 72px auto 64px;
  padding: 8px 24px;
  background: var(--branco);
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  text-align: center;
  text-wrap: balance;
}

.paragem {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 40px 0;
  scroll-margin-top: 72px;
}
.paragem + .paragem { margin-top: -84px; }
.texto {
  position: relative;
  z-index: 3;
  max-width: 31em;
  padding: 18px 24px 20px;
  background: var(--branco);
}
.esq .texto { grid-column: 1; margin-right: 12%; }
.dir .texto { grid-column: 2; margin-left: 12%; }

.porto {
  position: absolute;
  top: 56px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  text-decoration: none;
}
.esq .porto { left: 54%; }
.dir .porto { left: 46%; }
.porto span {
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: var(--branco);
  box-shadow: 0 0 0 1.5px var(--azul);
  transition: background-color .3s ease, transform .3s ease;
}
.porto:hover span { transform: rotate(45deg) scale(1.3); }
.porto.passado span { background: var(--azul); }

.figura {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0 0 0 12%;
  padding: 16px 24px 20px;
  background: var(--branco);
}

.ponto { position: absolute; width: 1px; height: 1px; }
.ponto-e { left: 46%; top: -56px; }
.ponto-f { left: 17%; top: 36px; }
.ponto-a { left: 5%; top: 150px; }
.ponto-b { left: 5%; top: calc(100% - 96px); }
.ponto-g { left: 46%; top: -56px; }
.ponto-h { left: 83%; top: 36px; }
.ponto-c { left: 95%; top: 150px; }
.ponto-d { left: 95%; top: calc(100% - 96px); }

.terra {
  position: relative;
  z-index: 3;
  margin: 72px 0 112px 13%;
  padding: clamp(28px, 4vw, 56px);
  background: var(--branco);
}
.terra-lapis { margin: 72px 13% 112px 0; }

.heteronimo {
  appearance: none;
  min-height: 46px;
  padding: 8px 14px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--azul);
  color: var(--azul);
  font-family: var(--rotulo);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.heteronimo:hover { box-shadow: inset 0 0 0 2px var(--azul); }
.heteronimo[aria-pressed="true"] { background: var(--azul); color: var(--branco); }

.retratos { position: relative; aspect-ratio: 5 / 6; }
.retrato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s ease; }

.risco {
  background-image: linear-gradient(var(--azul), var(--azul));
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% .065em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.8s cubic-bezier(.5, 0, .2, 1) .3s;
}
.risco.riscado { background-size: 100% .065em; }


@media (max-width: 760px) {
  .mar { height: 150px; background-size: 1000px 150px; }
  @keyframes mare { to { background-position: -1000px 100%; } }
  #barco { width: 76px; height: 62px; }
  .paragem { grid-template-columns: minmax(0, 1fr); padding: 22px 0 22px 50px; }
  .paragem + .paragem { margin-top: 0; }
  .texto { padding: 12px 14px 14px; }
  .esq .texto, .dir .texto { grid-column: 1; margin: 0; }
  .esq .porto { left: 18px; }
  .dir .porto { left: 30px; }
  .porto { top: 28px; }
  .figura { grid-column: 1; grid-row: auto; margin: 12px 0 0; padding: 12px 14px 14px; }
  .terra, .terra-lapis { margin: 16px 0 28px 44px; padding: 20px 16px; }
  .ponto-a, .ponto-b, .ponto-c, .ponto-d, .ponto-e, .ponto-f, .ponto-g, .ponto-h { left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mar, .caravela { animation: none; }
  .agulha, .retrato, .risco, .porto span { transition: none; }
}